Incorpora un Chatbot AI sul tuo sito web

Incorporazione nel Sito Web

Questo è il metodo universale per aggiungere il tuo chatbot a qualsiasi sito web. Incolli due brevi righe nell'HTML del tuo sito: un tag <script> che carica il widget e un elemento <web-chat-agent> che indica quale chatbot mostrare. Tutto qui, il fumetto di chat mobile compare nell'angolo di ogni pagina in cui viene eseguito il codice.

Se utilizzi WordPress, Shopify, Wix, Squarespace o Webflow, consulta la guida dedicata per la tua piattaforma, che mostra esattamente dove incollare questo stesso codice.

Dove trovare il tuo ID del chatbot

Non serve digitare l'ID manualmente. Nella dashboard di WebChatAgent:

Apri il tuo chatbot.
Vai su Canali → Widget di chat ed espandi Mostra dettagli di installazione.
Fai clic sul pulsante copia nel riquadro del codice.

Lo snippet copiato contiene già il tuo ID del chatbot, quindi basta incollarlo. (Se hai bisogno dell'ID non elaborato da solo, è la stringa lunga nell'URL della dashboard: /dashboard/<your-chatbot-id>.)

Il codice da incollare

Incolla questo frammento appena prima del tag di chiusura </body> del tuo sito:

<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>

Sostituisci YOUR_ID con il tuo ID del chatbot (o, più semplicemente, copia lo snippet pronto dalla dashboard in modo che l'ID sia già inserito). Il widget si carica in modo asincrono, quindi non rallenta la pagina, e compare come pulsante di chat mobile nell'angolo inferiore.

Attributi opzionali

Il widget eredita colori, titolo, messaggio di benvenuto e comportamento dalle impostazioni della dashboard, quindi normalmente serve solo chatbot-id. Per modificare alcune impostazioni direttamente nell'HTML, aggiungi questi attributi all'elemento <web-chat-agent>:

chatbot-id — Il tuo ID del chatbot. Obbligatorio.
theme — Stile visivo: "default" o "modern". Il valore predefinito è "default".
initially-open — Imposta su "true" per aprire automaticamente la chat al caricamento della pagina. Il valore predefinito è "false" (chiusa).
tracking-consent — Segnale di consenso opzionale per la personalizzazione persistente: "unknown", "denied" o "granted". Se omesso, il valore predefinito è "unknown" e i trigger locali anonimi continuano a funzionare.
context-data — Contesto di sessione della pagina per l'IA (ad esempio "Customer=Acme GmbH;OrderID=A-1023"), utile quando il widget viene eseguito all'interno di un CRM o di un'area riservata. Formati, limiti e note di sicurezza sono disponibili nella guida per sviluppatori.

<web-chat-agent
  chatbot-id="YOUR_ID"
  theme="modern"
  initially-open="false"
></web-chat-agent>

Tutti gli altri elementi, come colore del brand, avatar, font, posizione e comportamento, si configurano in Canali → Widget di chat, senza dover modificare nuovamente il codice per cambiare lo stile del widget. Il profilo dell'assistente si configura in Impostazioni → Stile di risposta e ruolo.

Il widget non aggiunge un secondo banner dei cookie. Senza un segnale di consenso, funziona in Modalità privacy anonima: i trigger basati su tempo, scorrimento, intenzione di uscita, inattività, URL, visibilità e rage click vengono elaborati localmente in memoria. Il riconoscimento dei visitatori ricorrenti, i contatori persistenti, l'analisi proattiva e i messaggi di saluto generati dall'IA richiedono il segnale granted.

Consulta Consenso sui cookie e trigger proattivi anonimi per la matrice completa dei comportamenti, gli esempi CMP e la guida all'archiviazione.

Incorporare la chat all'interno della pagina

Lo snippet descritto sopra crea un pulsante mobile. Se preferisci posizionare la chat all'interno del layout della pagina, ad esempio con un pannello di chat completo su una pagina di supporto dedicata, usa il widget integrato. Carica uno script diverso e un elemento differente:

<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_ID"></web-chat-agent-inline>

La chat integrata viene visualizzata nella posizione in cui inserisci l'elemento, quindi posizionala all'interno del contenitore in cui deve risiedere la chat. Consulta la guida alla Chat integrata per i dettagli sul layout.

Funziona ovunque

Entrambi gli snippet sono costituiti da normale HTML e da un custom element, quindi possono essere eseguiti su qualsiasi piattaforma per siti web: WordPress, Shopify, Wix, Squarespace, Webflow e siti HTML/JS personalizzati. Incolla il codice nell'HTML del tuo sito e pubblica.

Risoluzione dei problemi

Il widget non compare? Verifica che il codice si trovi nell'HTML della pagina (prima di </body>) e di aver pubblicato le modifiche o svuotato la cache dei plugin. Controlla la console del browser per verificare la presenza di script bloccati.
Compare solo su una pagina? Inserisci lo snippet in una posizione globale del sito (footer / codice globale), non su una singola pagina.