Installare il widget di chat con un tag script

Un solo tag script aggiunge la bolla di chat di intoCHAT a qualsiasi sito di cui puoi modificare l'HTML. Il tag contiene solo l'ID del tuo agente. Tutto il resto viene caricato da intoCHAT, quindi le modifiche successive non richiedono di toccare il sito.

Copiare lo snippet

1. Apri il tuo agente e vai alla scheda Share (Condividi). È disponibile dopo aver salvato l'agente.
2. Nel riquadro Bubble Chat, clicca Copy Code. Lo snippet contiene già l'ID del tuo agente.

<script src="https://www.intochat.ai/api/embed.js" data-chatbot-id="YOUR_AGENT_ID"></script>

Per impostazione predefinita, qualsiasi sito che contiene questo snippet può mostrare il tuo agente. Per limitarlo ai tuoi siti, imposta i domini consentiti.

Dove incollarlo

Incolla lo script subito prima del tag di chiusura </body>, in ogni pagina in cui deve comparire la chat. Il posto più semplice è un footer, un layout o un template globale usato da tutte le pagine.

La fine del body è la posizione consigliata, ma lo script funziona anche nel <head>: attende che la pagina sia caricata prima di creare la bolla. Se la tua piattaforma offre solo un campo per l'head, incollalo lì.

Se lo stesso snippet finisce due volte nella pagina, per esempio una volta nel tema e una tramite un plugin, solo la prima copia aggiunge la bolla e la seconda viene ignorata. Gli snippet di agenti diversi aggiungono ciascuno la propria bolla.

Attributi

Non esistono altri attributi. Colori, tema, font, posizione, icona della bolla, tooltip, messaggi di benvenuto, domande suggerite, il pop-up di benvenuto e l'apertura automatica si impostano nella scheda Appearance.

Lo script legge data-chatbot-id dall'elemento script che lo ha caricato. Lascia quindi l'attributo su quell'elemento. Gli strumenti che riscrivono i tag script possono eliminarlo: i tag HTML personalizzati di Google Tag Manager lo fanno, ed è per questo che GTM richiede uno snippet apposito.

Cosa succede nella pagina

1. Quando l'HTML è caricato, lo script recupera da intoCHAT le impostazioni del tuo agente.
2. Aggiunge una bolla rotonda nell'angolo in basso a sinistra o a destra, con un breve tooltip accanto. Se hai attivato il pop-up di benvenuto o l'apertura automatica in Launcher behaviour, li mostra dopo il ritardo impostato.
3. Un clic apre la chat in un iframe servito da intoCHAT: una finestra di 380 × 600 pixel su desktop, a schermo intero sugli schermi larghi fino a 768 pixel.
4. Il widget salva un ID di sessione in un cookie e nel local storage del tuo sito, così la conversazione continua quando il visitatore apre un'altra pagina.

Single-page app

La bolla viene aggiunta a document.body, fuori dall'elemento radice della tua app. I cambi di route lato client non la toccano, quindi carica lo script una volta per ogni caricamento completo della pagina, non a ogni cambio di route. Se il tuo framework sostituisce l'intero <body> durante la navigazione, la bolla viene rimossa insieme a esso. Eseguendo di nuovo lo snippet, la stessa bolla torna al suo posto invece di aggiungerne una seconda.

Per il codice React e Next.js, vedi Next.js e React.

Content Security Policy

Se il tuo sito invia una Content Security Policy, consenti https://www.intochat.ai in:

• script-src, per lo script
• connect-src, per caricare le impostazioni dell'agente
• frame-src, per la finestra della chat

Un'icona personalizzata della bolla è un'immagine nella tua pagina, quindi anche img-src deve consentire il suo indirizzo.

Verificare l'installazione

Ricarica una pagina del sito. La bolla dovrebbe comparire nell'angolo in basso entro pochi secondi. Se non compare, apri la console per sviluppatori del browser:

• "Chatbot not found." Il valore di data-chatbot-id è errato. Copia di nuovo lo snippet dalla scheda Share.
• "The embed script needs a data-chatbot-id attribute." L'attributo manca, oppure uno strumento lo ha tolto dal tag. Copia di nuovo lo snippet, oppure usa lo snippet per Google Tag Manager se lo carichi tramite GTM.
• "intoCHAT: this website is not in the allowed domains of this agent…" L'agente è limitato ad altri siti. Aggiungi il dominio di questo sito nella scheda Share, in Where this agent can appear. Vedi Domini consentiti.
• "intoCHAT: this agent is private…" Disattiva Private agent nella scheda Share.
• Un errore di Content Security Policy. Consenti gli indirizzi elencati sopra.
• Nessun errore e nessuna richiesta a intochat.ai. Lo script manca nella pagina, oppure un blocco pubblicità o un'estensione per la privacy lo ha fermato. Prova in una finestra privata senza estensioni.

Altri casi sono descritti in Risoluzione dei problemi.