Incorpora la chat web sul tuo sito

Il widget della chat web è il canale più veloce da mettere online: zero configurazione, niente token, niente chiavi API. Abiliti un canale, copi un tag script dalla dashboard, lo incolli prima del tag di chiusura del body e sul tuo sito compare un launcher a tema con il tuo brand. Questa pagina è il passo-passo click dopo click. Per l'anatomia completa del widget, ogni impostazione di aspetto e il modello di privacy, vedi il riferimento del canale Web chat.

Cosa costruirai

Un launcher di chat AnyBot dal vivo sul tuo sito web, collegato a un agente che hai già testato. I visitatori chattano come ospiti, senza login, le risposte arrivano in streaming dal vivo e nulla di privato è mai raggiungibile. Circa cinque minuti, una volta che il tuo agente esiste.

Prima di iniziare

• Un agente che risponde già bene. Nuovo qui? Il tuo primo agente in 10 minuti.
• Accesso per modificare l'HTML del tuo sito, incollerai un solo tag <script>.
• Decisioni facoltative: se limitare quali domini possono caricare il widget, e se chiedere ai visitatori un contatto prima che chattino.

Passaggi

1. Scegli o crea l'agente

Apri AI Agents nella barra laterale e apri l'agente che vuoi sul tuo sito. Il widget serve esattamente ciò a cui quell'agente risponde, quindi dovrebbe già superare una chat di prova. Parti da zero? Costruiscine e testane uno prima con Il tuo primo agente.

Risultato atteso: l'editor dell'agente è aperto sulle sue schede.

2. Abilita il canale Web Chat

Vai alla scheda Integrations dell'agente e attiva la card Web Chat. Questo alimenta sia l'incorporamento sia il pannello di prova integrato Chat with Agent.

Risultato atteso: la card Web Chat risulta abilitata e il pannello Chat è disponibile a fianco dell'editor (un pannello laterale sugli schermi larghi, un pulsante Chat su quelli più piccoli).

3. Provalo nel pannello prima di incorporarlo

Apri il pannello Chat with Agent e passa alla modalità Test (si apre in modalità Training per impostazione predefinita), la modalità Test rimuove il contesto admin, così vedi ciò che vede un vero visitatore del sito. Fai una domanda che la tua conoscenza dovrebbe coprire; le risposte arrivano token dopo token e ogni passaggio degli strumenti è visibile. Correggi il tono o aggiungi conoscenza ora; vedi Testare il tuo agente.

Risultato atteso: una risposta fondata e in streaming che corrisponde ai tuoi contenuti.

4. Copia lo snippet di incorporamento

Sulla card Web Chat, clicca Embed in website, poi Copy code. Lo snippet è un solo tag che contiene l'ID del tuo agente; copialo alla lettera, non c'è nessuna chiave da aggiungere.

Risultato atteso: un tag su una riga nei tuoi appunti, come questo, con l'ID del tuo agente al posto di BOT_UID:

<script src="https://app.any.bot/widget.js" data-anybot="BOT_UID" async></script>

Se il tuo sito ha ancora lo snippet precedente su più righe (inizia con <!-- AnyBot Chat Widget -->), sostituisci l'intero blocco con questo tag: quello vecchio non recepisce più la tua icona e i tuoi colori. Il riferimento del canale descrive il tag nel dettaglio.

5. Incollalo sul tuo sito

Incolla il tag subito prima del tag di chiusura </body> su ogni pagina in cui il widget deve comparire, poi pubblica. Al caricamento renderizza un launcher fluttuante; cliccandolo si apre la chat.

Risultato atteso: un pulsante launcher compare nell'angolo della tua pagina dal vivo.

6. (Facoltativo) apri la chat dal tuo pulsante

Aggiungi data-anybot-open a qualsiasi pulsante o link della tua pagina, per esempio un pulsante "Chatta con noi" nell'intestazione, e un clic su di esso apre la chat:

<button type="button" data-anybot-open>Chatta con noi</button>

Risultato atteso: cliccando il tuo pulsante si apre lo stesso pannello di chat del launcher.

7. (Facoltativo) blindalo e cattura i contatti

Di nuovo nelle impostazioni del canale Web Chat:

• Allowed domains, elenca i siti autorizzati a caricare il widget. Qualsiasi altra origine viene rifiutata lato server con un 403, quindi non può essere aggirata modificando lo snippet. Un elenco vuoto significa nessuna restrizione, e l'origine della tua stessa dashboard è sempre consentita.
• Pre-chat capture, chiedi uno qualsiasi tra nome, email o telefono prima del primo messaggio; i valori popolano il contatto. È una delle scritture public-safe deliberate.

Entrambe hanno effetto senza reincollare il tag.

8. Prova il widget dal vivo

Apri la tua pagina pubblicata in un browser nuovo (o una finestra in incognito) così da essere un visitatore anonimo, clicca il launcher e invia un messaggio.

Risultato atteso: il pannello si apre, il tuo messaggio viene inviato e l'agente invia una risposta in streaming, come ospite, senza login.

Verifica che funzioni

• Il canale Web Chat è abilitato sull'agente.
• Il pulsante launcher compare sulla tua pagina dal vivo.
• Cliccandolo si apre la chat e un messaggio di prova ottiene una risposta in streaming.
• Se hai impostato i domini consentiti, il widget si carica su quelli e viene rifiutato altrove.

Risoluzione dei problemi

• Il launcher non compare, verifica che lo <script> sia prima di </body> e che il canale Web Chat sia abilitato per questo agente.
• 403 quando il widget si carica, il dominio della pagina non è nell'elenco dei domini consentiti; aggiungilo, oppure svuota l'elenco per rimuovere le restrizioni.
• Il launcher mostra il colore e l'icona predefiniti, la pagina ha ancora lo snippet precedente su più righe; sostituiscilo con il tag su una riga di Copy code.
• Le modifiche allo stile o al saluto non si vedono, il widget legge le impostazioni a ogni caricamento; ricarica la pagina forzatamente. Non hai bisogno di reincollare il tag, tranne dopo aver cambiato il tema.
• I visitatori bloccati su un modulo, la pre-chat capture è attiva; ogni campo elencato è obbligatorio prima che la chat inizi.

Prossimi passi

• Riferimento del canale Web chat, il tag di incorporamento, come aprire la chat dai tuoi pulsanti, ogni impostazione di aspetto e il modello di privacy public-safe.
• Impostazioni del canale, saluto, orari di lavoro e fuori orario.
• Connetti altri canali, metti lo stesso agente su WhatsApp, Slack, SMS e tutti gli altri 8 canali.