Aggiungere ChatLab al tuo sito web consente ai visitatori di interagire con il tuo chatbot AI direttamente sulle tue pagine. Questa guida spiega come ottenere il codice di incorporamento e aggiungerlo al tuo sito web.
Prima di iniziare
Crea e allena il tuo chatbot prima di condividerlo con i clienti. Per l'installazione, hai anche bisogno dei permessi per modificare e pubblicare il sito web. Consulta Come creare il tuo primo chatbot.
Aprire la scheda Deploy
Seleziona il tuo chatbot dalla dashboard principale, poi fai clic sulla scheda Deploy (Pubblica).
Scegliere la piattaforma
Il pannello Select Platform (Seleziona piattaforma) sulla destra elenca le destinazioni supportate in due gruppi: Website (Sito web), per inserire il chatbot sulle pagine che gestisci, e Messaging channels (Canali di messaggistica), per collegarlo a un account di conversazione esistente. Fai clic sulla voce corrispondente a dove desideri far apparire il chatbot per visualizzare le istruzioni dedicate.
Piattaforme supportate:
- HTML Code - funziona con qualsiasi sito web in cui puoi modificare l'HTML
- WordPress - tramite il plugin ufficiale di ChatLab o l'inserimento manuale del codice
- Wix - tramite Settings > Custom Code
- Webflow - tramite Site settings > Custom code, con l'accesso al codice personalizzato abilitato per il tuo sito o workspace
- PrestaShop - tramite il modulo PrestaShop di ChatLab o l'inserimento manuale del codice
- Shopify - tramite il file theme.liquid
- WooCommerce - tramite il plugin WordPress o l'inserimento manuale del codice
- Abicart - tramite Store design > Themes > Site header
- CS-Cart - tramite Design > Layouts > Custom HTML code
Canali di messaggistica:
- WhatsApp Business - risponde all'interno di un account WhatsApp Business, consulta WhatsApp for Business
- Facebook Messenger - risponde ai messaggi della tua pagina Facebook, consulta Integrazione con Facebook Messenger
- Instagram - risponde ai messaggi diretti di Instagram, consulta Integrazione con Instagram
I canali di messaggistica non utilizzano il codice di incorporamento indicato di seguito. Vengono collegati a un account già in tuo possesso, quindi non è necessario incollare alcun codice nel sito web.
Ogni piattaforma mostra istruzioni dettagliate specifiche per quell'integrazione. Per le piattaforme con articoli della guida dedicati, in basso appare il link View full instructions (Visualizza istruzioni complete).
Aggiunta tramite HTML Code
L'opzione HTML Code funziona con qualsiasi sito web in cui hai accesso al codice sorgente. Vedrai due opzioni di incorporamento: Widget e Iframe.
Modalità Widget
La scheda Widget mostra il codice che aggiunge un'icona di chat al tuo sito web. Quando i visitatori fanno clic sull'icona, si apre una finestra popup di chat.
- Fai clic sulla scheda Widget
- Fai clic su Copy to clipboard (Copia negli appunti) per copiare il codice
- Individua la sezione
<head>del tuo sito web - Incolla il codice come ultimo elemento all'interno della sezione
<head> - Aggiorna la pagina nel browser per verificare che l'icona del chatbot appaia
Modalità Iframe
La scheda Iframe mostra il codice che incorpora il chatbot direttamente all'interno dei contenuti della pagina. Il chatbot è sempre visibile e può essere circondato da altri elementi della pagina.
- Fai clic sulla scheda Iframe
- Fai clic su Copy to clipboard per copiare il codice
- Incolla il codice nel punto dell'HTML del tuo sito web in cui desideri far apparire il chatbot
- Modifica gli attributi
widtheheightper adattarli al tuo layout
Non sai quale scegliere? Leggi Qual è la differenza tra widget e Iframe? per un confronto dettagliato.
Aggiunta tramite WordPress o WooCommerce
Le piattaforme WordPress e WooCommerce offrono due metodi di installazione: Plugin Installation (Installazione tramite plugin, consigliata) e Manual Installation (Installazione manuale).
Plugin Installation (consigliata)
- Fai clic su Get the plugin on WordPress.org, quindi installa e attiva il plugin ChatLab.
- Apri ChatLab in WordPress. Per un negozio WooCommerce, mantieni selezionata l'opzione WooCommerce integration per collegare anche i dati dello store.
- Fai clic su Continue, accedi a ChatLab e seleziona il tuo chatbot.
- Completa il collegamento, apri il tuo sito web pubblicato e invia un messaggio di prova.
Manual Installation
Passa a Manual Installation e copia il codice Widget nell'header del tuo sito utilizzando un plugin per l'inserimento del codice. Per Iframe, usa un blocco HTML nel contenuto della pagina che consenta l'HTML per iframe. Pubblica la pagina e prova la chat. Installa il widget una sola volta, utilizzando il plugin oppure lo snippet manuale.
Per tutti i dettagli, consulta Come aggiungere il tuo chatbot al sito web WordPress.
Aggiunta tramite altre piattaforme
Per Shopify, Wix, Webflow, PrestaShop, Abicart e CS-Cart, seleziona la piattaforma nel pannello Select Platform. Ogni piattaforma mostra:
- Il codice di incorporamento con le opzioni Widget e Iframe
- Istruzioni dettagliate specifiche per la piattaforma su dove incollare il codice
- Il link View full instructions alla guida completa per la piattaforma
Conformità al GDPR
Se hai bisogno che il chatbot si carichi solo dopo aver ottenuto il consenso ai cookie, consulta Configurare ChatLab per la conformità al GDPR per le guide all'integrazione con Cookiebot, Usercentrics e Google Tag Manager.
Content Security Policy (CSP)
Se il tuo sito web utilizza gli header di Content Security Policy, devi autorizzare i domini di ChatLab affinché il chatbot funzioni. Le direttive richieste dipendono dall'uso della modalità Widget o Iframe.
Modalità Widget
Il widget carica uno script sulla tua pagina che genera l'interfaccia di chat. Unisci le seguenti origini di ChatLab alle tue direttive CSP esistenti; non sostituire la policy del resto del tuo sito web:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Per impostazione predefinita, il widget inietta alcuni stili inline. La tua policy deve autorizzare anche lo script di configurazione inline, ad esempio tramite un nonce o un hash CSP. Autorizza in img-src le origini delle immagini utilizzate dal tuo bot e dalle schede prodotto; i contenuti audio e altre funzionalità attivate potrebbero richiedere ulteriori origini. Se utilizzi un dominio agency, usa i domini presenti nel tuo snippet generato.
CSP Safe Mode - evitare unsafe-inline
Se la policy di sicurezza del tuo sito web non consente 'unsafe-inline' in style-src, puoi attivare la CSP Safe Mode. Questa opzione carica il foglio di stile del contenitore del widget da un file CSS esterno. Non autorizza lo script di configurazione inline né garantisce che ogni stile personalizzato e funzionalità attivata rispetti la tua policy.
Per attivarla, aggiungi window.aichatbotCspSafe = true; prima del tag di script di ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Con la CSP Safe Mode attivata, verifica una policy per i fogli di stile senza 'unsafe-inline'. Un punto di partenza è:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Modalità Iframe
La pagina principale deve consentire l'origine presente nell'URL copiato per l'iframe. Per l'hosting standard di ChatLab, aggiungi questa voce alla policy esistente:
frame-src https://api.chatlab.com;