L'aggiunta di un chatbot ChatLab al tuo sito Webflow consente ai visitatori di interagire con il tuo assistente AI direttamente sulle tue pagine. Questa guida illustra i passaggi per ottenere il codice di incorporamento da ChatLab e incollarlo in Webflow.
Prima di iniziare
Prima di iniziare, crea il tuo chatbot e verifica che il tuo sito o workspace Webflow includa l'accesso al codice personalizzato. Consulta i requisiti per il codice personalizzato di Webflow. È inoltre necessaria l'autorizzazione per modificare e pubblicare il sito web.
Passaggio 1 - Copia il codice di incorporamento da ChatLab
- Accedi a ChatLab e seleziona il chatbot che desideri incorporare
- Fai clic sulla scheda Deploy (Pubblica), quindi seleziona Webflow dal pannello delle piattaforme sulla destra
- Scegli Widget per l'installazione nell'header descritta di seguito. Per una chat sempre visibile, scegli Iframe e segui le istruzioni relative all'iframe più in basso. Consulta Qual è la differenza tra widget e Iframe? per un confronto
- Fai clic su Copy to clipboard (Copia negli appunti)
Passaggio 2 - Aggiungi il codice su Webflow
Aggiungere il codice in Site Settings (Impostazioni sito) inserisce il chatbot su ogni pagina del tuo sito Webflow.
- Apri il tuo progetto nella Webflow Dashboard
- Vai su Site settings > Custom code
- Incolla il codice copiato nella sezione Head Code
- Fai clic su Save Changes (Salva modifiche)
- Fai clic su Publish (Pubblica) per rendere effettive le modifiche
Aggiunta a una singola pagina
Se desideri mostrare il chatbot solo su una pagina specifica anziché sull'intero sito:
- Apri la pagina nel Webflow Designer
- Fai clic sull'icona a forma di ingranaggio per aprire Page Settings (Impostazioni pagina)
- Scorri verso il basso fino alla sezione Custom Code
- Incolla il codice nel campo Head Code
- Salva e pubblica il sito
Aggiunta di un iframe sempre visibile
Nel Webflow Designer, inserisci un elemento Code Embed nel punto in cui desideri posizionare il chatbot, incolla lo snippet Iframe ottenuto da ChatLab e imposta larghezza e altezza in base al tuo layout. Salva e pubblica il sito. L'iframe va inserito nel contenuto della pagina, non in Head Code.
Verifica dell'installazione
Dopo la pubblicazione, apri il tuo sito Webflow in un browser. Dovresti visualizzare l'icona della chat nell'angolo della pagina (in modalità widget) oppure la finestra di chat incorporata direttamente nella pagina (in modalità iframe). Fai clic sull'icona per aprire la chat e invia un messaggio di prova per verificare che tutto funzioni correttamente.