Per aggiungere un chatbot Agentkit a Webflow, copia entrambi i tag script generati da Channels → Website embed → Chat widget. Inseriscili nel Footer code a livello di sito di Webflow o nel campo Before </body> di una singola pagina, poi pubblica. Controlla la pagina pubblicata e fai una domanda di cui conosci già la risposta.
Il codice attuale di Agentkit include un piccolo bootstrap della coda seguito dal loader del widget, con il tuo ID chatbot e l'URL attuale dello script. Copialo come un'unità dalla tua dashboard.
Controlla l'accesso prima di iniziare
Le regole sul codice personalizzato di Webflow richiedono un Workspace Core, Growth, Agency o Freelancer, oppure un piano Site attivo. Un Site manager o un Designer deve aggiungere il codice. Se non puoi aggiungere codice personalizzato, controlla il piano e il tuo ruolo prima di modificare il chatbot. Webflow non garantisce che il codice personalizzato di terze parti funzioni e non fornisce assistenza diretta per risolverne i problemi.
Ti serve anche un chatbot Agentkit con Chat widget abilitato. Creane uno, aggiungi una fonte sito web aggiornata o risposte Q&A approvate e prova alcune domande nel playground. Controlla le risposte prima di invitare i visitatori.
Se aggiungi un URL Webflow come fonte sito web, controlla cosa ha effettivamente indicizzato Agentkit. Un crawl o una sitemap può scoprire più pagine, ma percorsi esclusi, contenuti inaccessibili ed errori di estrazione possono lasciare lacune. La guida alle fonti sito web spiega come ispezionare e restringere il crawl. Aggiungi una fonte Q&A esatta per una risposta su una policy che richiede una formulazione precisa.
Inserisci il codice in un'unica posizione di Webflow
Per un widget su ogni pagina:
- Apri la pagina Channels → Website embed → Chat widget del tuo chatbot in Agentkit. Abilita il canale e copia l'intero blocco di codice generato, inclusi entrambi i tag script.
- In Webflow, apri Site settings → Custom code. Incolla il codice in Footer code, che Webflow inserisce prima del tag di chiusura
</body>. - Salva le modifiche e pubblica sul dominio che intendi testare. Salvare il campo da solo non aggiorna il sito visto dai visitatori.
Per un widget su una sola pagina, lascia vuoti i Site settings. Nel Designer di Webflow, apri Page settings → Custom code → Before </body> tag della pagina, incolla entrambi i tag, salva e pubblica. Ripeti solo sulle pagine che necessitano del widget. Webflow inserisce il codice di pagina dopo il codice del sito, quindi mantieni lo snippet in un unico posto per facilitare modifiche e risoluzione dei problemi.
La guida all'installazione per Webflow contiene una versione più breve di questi passaggi.
Verifica la pagina pubblicata
Apri il dominio *.webflow.io pubblicato o il tuo dominio personalizzato in una nuova scheda. Webflow afferma che il codice personalizzato può essere eseguito nell'anteprima del Designer, ma i visitatori non riceveranno una modifica salvata finché non pubblichi. Testa il dominio effettivamente usato dai visitatori.
Usa questo controllo di accettazione prima di invitare traffico:
| Controllo | Risultato atteso |
|---|---|
| Sorgente della pagina | Il tag di bootstrap della coda e il tag del loader del widget dal codice generato, installati in un unico posto |
| Widget | Il launcher si apre sulle pagine pubblicate desktop e mobile dove lo hai posizionato |
| Risposta nota | Una domanda su contenuti approvati restituisce la risposta prevista |
| Dominio | I domini di staging e personalizzati che testi sono consentiti se hai abilitato le restrizioni di dominio |
Ad esempio, un sito di servizi potrebbe testare «Offrite appuntamenti il sabato?» rispetto a una pagina degli orari approvata. Se la risposta manca o è errata, correggi la fonte o aggiungi una risposta Q&A esatta e ripeti il test. La presenza di una bolla di chat dimostra solo che il widget è stato renderizzato.
Se il launcher è assente, ispeziona il sorgente della pagina pubblicata cercando entrambi i tag, conferma che Chat widget sia abilitato e controlla le richieste di rete fallite nel browser. Se non puoi aggiungere codice personalizzato, torna ai requisiti di piano e ruolo di Webflow. Se hai incollato lo snippet sia nei Site settings sia nei Page settings, rimuovi una copia e ripubblica. Se il launcher si apre ma la risposta fallisce, controlla le fonti e i domini consentiti del chatbot prima di modificare il codice Webflow.
Dopo un'installazione riuscita, esamina le prime domande reali e correggi le lacune nelle fonti. Ricontrolla quando modifichi una pagina Webflow o passi dallo staging al tuo dominio personalizzato. Per un pannello all'interno del contenuto della pagina invece di un launcher flottante, usa il canale iframe separato di Agentkit.
