Per incorporare un chatbot Agentkit, apri la pagina Channels → Website embed del tuo agente, attiva Chat widget e copia il codice generato completo. Incolla entrambi i tag script in un footer comune a tutto il sito o in un template di pagina, pubblica, poi carica la pagina pubblica e invia un messaggio di prova. Il codice generato contiene già l’ID del tuo agente e l’URL del widget configurato. Non sostituirlo con uno snippet copiato da un articolo.
Se vuoi la chat all’interno di una sezione della pagina, attiva invece il canale Iframe e copia il suo codice iframe generato. L’iframe e il widget flottante sono canali separati, quindi controlla l’interruttore di quello che usi.
Scegli dove deve apparire la chat
| Obiettivo | Usa | Dove ottenerlo |
|---|---|---|
| Una bolla di chat flottante su tutto il sito | Chat widget | Channels → Website embed → Chat widget |
| Un pannello di chat dentro una pagina di supporto o contatto | Iframe | Channels → Website embed → Iframe |
| Una bolla flottante in un’app React o Next.js | Chat widget | Usa lo script generato nel layout o nel template HTML dell’app |
| Una bolla su tutto un sito WordPress | Chat widget | Inserisci entrambi i tag generati in un campo di codice del footer |
Un’app React non ha bisogno di un pacchetto React Agentkit separato per questa installazione. Per un esempio di posizionamento in React o Next.js, segui la guida all’integrazione con React. La guida all’iframe mostra come dimensionare un pannello di chat inline.
Installa il widget flottante
- Crea un agente, aggiungi una fonte di cui puoi verificare le risposte e prova qualche domanda nel Playground. Se parti da zero, crea un account Agentkit.
- Apri la pagina Channels → Website embed dell’agente. Seleziona Chat widget e attiva quel canale.
- Copia il codice completo mostrato lì. Contiene un piccolo script di bootstrap seguito dallo script asincrono del widget. Mantieni insieme entrambi i tag e i loro valori generati
data-chatbotesrc. - Incolla il codice nel footer condiviso o nel template HTML del sito, prima del tag di chiusura
</body>. Aggiungilo una volta per pagina. Se vuoi il widget su una sola pagina, usa invece l’area codice di quella pagina. - Pubblica il sito. Apri l’URL pubblico in una nuova finestra del browser, clicca sulla bolla e invia una domanda la cui risposta puoi confrontare con una fonte approvata.
L’URL del widget dipende dalla configurazione di hosting di Agentkit. Copia quindi il codice aggiornato da Website embed. La guida al widget JavaScript contiene i passaggi di configurazione attuali, e la guida all’Embed SDK spiega cosa fa lo script di bootstrap.
React e Next.js
Aggiungi lo script al template HTML dell’app o a un layout condiviso in modo che si carichi nelle pagine in cui vuoi la bolla. Mantieni una sola copia del widget su ogni pagina renderizzata. La guida all’integrazione con React copre il posizionamento nel layout per React e Next.js. Copia l’URL e l’ID agente attuali da Channels → Website embed; l’installazione di un pacchetto non fa parte di questa configurazione.
WordPress
Per un’installazione su tutto il sito, incolla entrambi i tag script generati nel campo Footer della schermata Header & Footer di WPCode. Salva, svuota eventuali cache del sito, poi ispeziona una pagina pubblica. WordPress può rimuovere gli script da un blocco HTML personalizzato quando il tuo account non ha il permesso di pubblicarli, quindi controlla il codice sorgente della pagina renderizzata se la bolla manca. Segui la guida all’installazione su WordPress per il percorso esatto del menu e i controlli.
Incorpora la chat all’interno di una pagina
Scegli Iframe nella stessa pagina Website embed, attiva il canale e copia l’iframe generato. Incollalo dove deve apparire la chat inline. Il suo URL punta alla pagina iframe ospitata del tuo agente. Il pannello inline resta in quella sezione della pagina; non aggiunge una bolla flottante al resto del sito. Dai all’iframe un’altezza sufficiente nel tuo layout, usa Visit per visualizzare in anteprima la pagina chat ospitata, poi prova l’iframe sulla tua pagina pubblicata. L’iframe non espone l’SDK window.agentkit della pagina padre, quindi usa il widget script se ti servono quei comandi del browser. Consulta le istruzioni dell’iframe.
Controlla il risultato prima del lancio
Apri la pagina pubblicata in una nuova finestra del browser e registra quattro esiti:
- La bolla o il pannello inline appare nel punto previsto?
- Si apre e accetta un messaggio?
- La sua risposta corrisponde alla fonte che hai usato per il test?
- Un visitatore può ancora raggiungere il tuo normale canale di contatto se l’agente non riesce a rispondere?
Se non appare nulla, verifica prima che il canale sia attivo e ispeziona il codice sorgente della pagina renderizzata cercando entrambi i tag generati del widget o l’iframe. Controlla che l’URL dello script sia assoluto e si carichi nel pannello Network del browser. Un editor di contenuti o una cache potrebbero aver rimosso o ritardato il codice. Se l’interfaccia appare ma un messaggio fallisce, controlla le impostazioni dell’agente, i domini consentiti e lo stato delle fonti. La guida alle restrizioni di dominio spiega come una lista di domini consentiti influisce sulle incorporazioni.
Conserva la domanda di prova e la risposta osservata nelle tue note di lancio. Installare un widget dimostra che si carica; non dimostra che ogni risposta sia corretta. Ricontrolla le domande interessate dopo aver modificato fonti o impostazioni.
