WebChatAgent Logo

Aggiungi un AI Chatbot a Webflow

Webflow

Aggiungi un chatbot AI al tuo sito Webflow in minuti utilizzando la funzionalità Custom Code di Webflow. Incolla un breve snippet una sola volta, pubblica e la bolla di chat apparirà sul tuo sito live. Usa il metodo per l'intero sito per coprire tutte le pagine, oppure usa il metodo per pagina singola se desideri visualizzarlo solo su una pagina.

Metodo 1: Intero sito (Tutte le pagine)

  1. Apri Site Settings: nel Webflow Designer, fai clic sull'icona a forma di ingranaggio o vai su Site Settings > Custom Code.
  2. Incolla in Footer Code: nella sezione Footer Code, incolla quanto segue:
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. Sostituisci YOUR_ID con il tuo ID del chatbot effettivo dalla dashboard di WebChatAgent.
  2. Salva e pubblica: fai clic su Salva e poi pubblica il tuo sito. Il Widget di chat apparirà su ogni pagina.

Metodo 2: Solo pagina singola

  1. Nel Webflow Designer, seleziona la pagina in cui desideri inserire il Chatbot.
  2. Apri Page Settings (l'icona a forma di ingranaggio accanto al nome della pagina).
  3. Scorri verso il basso fino a Custom Code > Before </body> tag.
  4. Incolla lo stesso snippet di codice sopra indicato.
  5. Salva e pubblica.

Metodo 3: Elemento Embed

Per un maggiore controllo sul posizionamento:

  1. Trascina un elemento Embed dal pannello dei componenti sulla tua pagina.
  2. Incolla lo snippet di codice nell'editor di incorporamento.
  3. Il Widget verrà visualizzato come una bolla di chat mobile, indipendentemente dalla posizione in cui è inserito l'elemento embed.

Trovare il tuo ID del chatbot

Accedi alla dashboard di WebChatAgent, apri il tuo Assistente e vai su Canali → Widget di chat. Espandi Mostra dettagli di installazione e fai clic su Copia codice. Lo snippet contiene già il tuo ID del chatbot, quindi puoi incollare l'intero blocco invece di digitare manualmente l'ID.

Risoluzione dei problemi

  • Il Widget non viene visualizzato nel Designer?: il codice personalizzato viene eseguito solo sul sito pubblicato, non nell'anteprima del Webflow Designer. Pubblica il sito e visualizzalo live.
  • Il Widget non è presente su tutte le pagine?: assicurati di aver utilizzato Site Settings > Custom Code (Metodo 1) e non il codice a livello di pagina.
  • È necessario l'hosting Webflow?: il codice personalizzato funziona sia sui siti ospitati da Webflow sia sul codice esportato. Se esporti il tuo sito, il codice sarà incluso nell'esportazione.