Installare su Webflow

Aggiungi il widget di chat botts.ai al tuo sito Webflow con il codice personalizzato per tutto il sito nelle Site settings, in sei passaggi e senza toccare il design.

Questa guida aggiunge a un sito Webflow il widget di chat di un deployment botts.ai di tipo sito web. Usa il campo Footer code nelle Site settings (impostazioni del sito) di Webflow, che inserisce lo script del widget in tutte le pagine del sito in un colpo solo. Il tuo design nel Designer resta com'è. I nomi dell'interfaccia di Webflow sono indicati in inglese.

Prima di iniziare

Ti servono:

• Accesso al tuo sito in Webflow come owner o admin del Workspace, oppure con il ruolo Site manager o Designer. Solo questi ruoli possono modificare il codice personalizzato di un sito. Devi anche poter pubblicare il sito.
• Un piano Webflow che include il codice personalizzato: un Site plan a pagamento (Basic o superiore) per il tuo sito. Anche un piano Workspace a pagamento Core, Growth, Freelancer o Agency sblocca il codice personalizzato, ma solo sull'indirizzo di staging webflow.io. Per mostrare il widget sul tuo dominio ti serve comunque un Site plan a pagamento, perché solo i siti con un Site plan si possono pubblicare su un dominio personalizzato. Se sia il tuo sito sia il tuo Workspace sono sul piano gratuito Starter, il codice personalizzato non è disponibile.
• Il codice di incorporamento del tuo deployment sito web. In botts.ai apri Agenti, scegli il tuo agente, passa alla scheda Implementa e apri il deployment Sito Web. La sezione Installazione in fondo all'editor mostra il codice con un pulsante per copiarlo. Non hai ancora un deployment sito web? Vedi Deployment.

Il codice di incorporamento è fatto così, con la chiave del tuo deployment al posto di YOUR_API_KEY:

<script async src="https://api.botts.ai/widget/chat-widget.js?key=YOUR_API_KEY"></script>

Passaggio 1: Apri «Site settings»

Accedi a Webflow. Nella Dashboard clicca sull'icona a puntini (more options) accanto al nome del tuo sito, sotto la sua anteprima, e scegli Settings. Si aprono così le Site settings di quel sito.

Se il sito è già aperto nel Designer, clicca sul logo di Webflow in alto a sinistra e scegli Site settings.

Passaggio 2: Apri «Custom code»

Nel menu a sinistra delle Site settings clicca su Custom code (codice personalizzato). Sotto l'impostazione Run custom code in Preview, la sezione Custom Code contiene due campi per il codice valido per tutto il sito: Head code e Footer code.

Lo screenshot mostra un sito senza Site plan: al posto dei due campi, nella sezione Custom Code c'è solo l'avviso «To unlock custom code, add a site plan to this site.» Se vedi questo avviso, al tuo sito serve prima un Site plan a pagamento (vedi «Prima di iniziare»).

Passaggio 3: Incolla il codice nel campo «Footer code»

Incolla il codice di incorporamento nel campo Footer code. Se nel campo c'è già del codice, metti il codice botts.ai su una nuova riga sotto e lascia il resto com'è. Incolla il codice esattamente come l'hai copiato: l'indirizzo e la chiave non devono cambiare.

Webflow inserisce il Footer code in ogni pagina subito prima del tag di chiusura </body>, ed è proprio lì che va lo script del widget.

Passaggio 4: Salva le modifiche

Clicca su Save changes (Salva modifiche). Ora il codice è salvato nel tuo sito, ma non è ancora online.

Passaggio 5: Pubblica il sito

Webflow mette il codice personalizzato sul sito online solo quando pubblichi. Clicca su Publish (Pubblica), spunta il dominio che usano i tuoi visitatori (il tuo dominio e, se vuoi, anche l'indirizzo webflow.io) e poi clicca su Publish to selected domains (pubblica sui domini selezionati).

Passaggio 6: Controlla il widget sul sito

Apri il tuo sito pubblicato in una finestra privata, ricarica la pagina e attendi un momento. Il pulsante della chat compare in basso a destra, o dove l'hai posizionato nell'editor del widget. Aprilo e invia una domanda di prova. Controlla anche una sottopagina e la visualizzazione sullo smartphone.

Se il widget non compare

1. Controlla di aver pubblicato dopo aver salvato, e sul dominio giusto. Se hai spuntato solo l'indirizzo webflow.io, il tuo dominio mostra ancora la versione senza widget.
2. Controlla che il codice completo sia nel campo Footer code in Site settings → Custom code e che tu abbia cliccato su Save changes.
3. Prova sul sito pubblicato, non nel Designer di Webflow.
4. Controlla il tuo piano. Senza un Site plan a pagamento o un piano Workspace a pagamento, Webflow non ti permette di aggiungere il codice: Custom code mostra allora solo «To unlock custom code, add a site plan to this site.» al posto dei due campi.
5. Prova in una finestra privata senza ad blocker. Se il banner dei cookie o lo strumento di consenso blocca gli script, controllane la configurazione.
6. Controlla che la chiave appartenga al deployment giusto e che il deployment sia attivo nella scheda Implementa.

Modificare o rimuovere il widget

Colori, testi, il launcher e tutte le altre impostazioni del widget si modificano nell'editor di botts.ai. Il tuo sito le riprende senza nessuna modifica in Webflow e senza pubblicare di nuovo. Devi sostituire il codice solo se cambia la chiave del deployment.

Per rimuovere il widget, cancella solo la riga dello script botts.ai dal campo Footer code, clicca su Save changes e pubblica di nuovo il sito.

Altro aiuto

• Webflow Help Center: Custom code in head and body tags (in inglese)
• Webflow Help Center: How do I publish or unpublish a Webflow site? (in inglese)
• I passaggi generali per qualsiasi sito: Codice di incorporamento

Ultimo aggiornamento: 4 ottobre 2026