Come aggiungere un chatbot AI al tuo sito Webflow

I siti Webflow hanno un aspetto curato, si caricano velocemente e ti danno un controllo preciso sul design. Ma non includono una chat AI integrata. Se vuoi un chatbot che capisca davvero i tuoi contenuti e possa avere conversazioni reali con i visitatori, devi aggiungerlo tu.

La buona notizia: aggiungere un chatbot AI a Webflow richiede circa 20 minuti e non serve scrivere codice, a parte incollare un singolo tag script. Crei il chatbot, lo addestri sui contenuti del tuo sito e lo aggiungi a Webflow tramite le impostazioni Custom Code. Funziona su ogni pagina, si abbina al tuo design e inizia subito a rispondere alle domande dei visitatori.

Questa guida copre l'intero processo: creare e addestrare il chatbot, incorporarlo in Webflow, personalizzarne l'aspetto e configurarlo per ottenere i risultati migliori.

Confronto tra le opzioni di chatbot per Webflow

Prima di passare alla configurazione, ecco come si confrontano i principali approcci per aggiungere funzionalità di chat a Webflow.

Se ti serve un widget di chat in cui un team umano risponde in tempo reale, uno strumento di live chat come Intercom è la scelta giusta. Se vuoi un assistente basato su AI che risponde automaticamente alle domande, addestrato sui contenuti reali del tuo sito, un chatbot AI è la soluzione più adatta. La maggior parte dei proprietari di siti Webflow vuole quest'ultima opzione: un assistente self-service che gestisce le domande dei visitatori senza bisogno di personale dedicato.

Passaggio 1: crea il tuo chatbot

Inizia creando un chatbot su Agentkit. Ti serve un account gratuito.

1. Vai su Agentkit e registrati.
2. Crea un nuovo chatbot e dagli un nome che ne rifletta lo scopo (ad es. "Website Assistant" o il nome del tuo brand).
3. Scegli un modello AI. GPT-4o è una buona opzione predefinita. Hai a disposizione una gamma di modelli tra OpenAI, Anthropic (Claude) e Google (Gemini).

Passaggio 2: addestra il chatbot sui contenuti del tuo sito Webflow

È il passaggio che rende il chatbot davvero utile. Gli stai fornendo i contenuti reali del tuo sito web perché possa rispondere alle domande dei visitatori in modo accurato.

Aggiungi l'URL del tuo sito web

1. Nella dashboard di Agentkit, vai alla pagina Fonti del tuo chatbot.
2. Clicca su Aggiungi fonte e scegli Sito web.
3. Inserisci l'URL del tuo sito Webflow (ad es. https://yoursite.webflow.io oppure il tuo dominio personalizzato https://yoursite.com).
4. Il crawler segue i link a partire dal tuo URL principale e indicizza tutte le pagine accessibili: homepage, pagina chi siamo, pagine dei servizi, portfolio, articoli del blog, FAQ, prezzi e qualsiasi altro contenuto collegato.

Per i siti Webflow che usano interazioni, animazioni o contenuti caricati dinamicamente, il crawler di Agentkit usa Firecrawl per eseguire il rendering di JavaScript prima dell'indicizzazione. Questo garantisce che i contenuti caricati tramite le interazioni di Webflow vengano acquisiti in modo accurato.

Aggiungi coppie di domande e risposte per gli argomenti chiave

Mentre la scansione del sito web cattura i tuoi contenuti generali, le coppie di domande e risposte ti danno un controllo preciso sulle risposte specifiche. Crea coppie per le domande più importanti dei tuoi visitatori:

Le coppie di domande e risposte hanno priorità sui contenuti scansionati, quindi sono lo strumento giusto per assicurarti che il chatbot dica esattamente quello che vuoi sugli argomenti critici.

Carica documenti (facoltativo)

Se hai risorse che non sono pubblicate sul tuo sito Webflow, come case study in formato PDF, documenti con le specifiche dei servizi o listini prezzi, caricale come fonti documento. Il chatbot userà questi contenuti insieme ai dati del tuo sito web per rispondere alle domande.

Testa nel Playground

Prima di aggiungere il chatbot al tuo sito online, testalo nel Playground di Agentkit.

Fai le domande che di solito fanno i tuoi visitatori:

• "Quali servizi offrite?"
• "Quanto costa?"
• "Come posso iniziare?"
• "Lavorate con aziende del settore [settore]?"
• "Qual è la vostra politica di rimborso?"

Se una risposta è sbagliata, incompleta o formulata male, modifica i tuoi dati di addestramento. Aggiungi o aggiorna le coppie di domande e risposte, aggiungi altri frammenti di testo, oppure perfeziona la tua fonte sito web per includere pagine specifiche che potresti aver trascurato.

Passaggio 3: personalizza l'aspetto del widget

Prima di incorporarlo, configura il widget del chatbot in modo che si abbini al design del tuo sito Webflow.

Nella dashboard di Agentkit, vai su Impostazioni del tuo chatbot:

Tema colore. Imposta il colore primario in linea con il tuo brand. Usa il codice esadecimale esatto della tua style guide Webflow. La bolla del chatbot, l'intestazione e il pulsante di invio usano tutti questo colore.

Posizione. Scegli in basso a destra (predefinita e più comune) o in basso a sinistra. Scegli il lato che non entra in conflitto con altri elementi fluttuanti del tuo sito Webflow.

Messaggio di benvenuto. Scrivi un messaggio coerente con la voce del tuo brand e che stabilisca aspettative chiare:

• Per un'attività di servizi: "Ciao, posso rispondere a domande sui nostri servizi, sui prezzi e sul processo di lavoro. Come posso aiutarti?"
• Per un prodotto SaaS: "Benvenuto! Chiedimi qualsiasi cosa sul nostro prodotto, sulle funzionalità o sui prezzi."
• Per un sito portfolio: "Ciao. Posso raccontarti dei nostri lavori, delle nostre competenze e di come collaboriamo con i clienti."

Messaggi suggeriti. Aggiungi da tre a cinque messaggi suggeriti che guidano i visitatori verso le conversazioni più preziose per te:

• "Quali servizi offrite?"
• "Quanto costa?"
• "Posso vedere esempi dei vostri lavori?"
• "Come posso iniziare?"

Avatar. Carica il tuo logo o un'icona del brand come avatar del chatbot per un look coerente.

Passaggio 4: incorpora il chatbot in Webflow

Ecco l'installazione vera e propria. Hai due opzioni in Webflow: su tutto il sito (ogni pagina) oppure per pagina specifica.

Opzione A: installazione su tutto il sito (consigliata)

Aggiunge il chatbot a ogni pagina del tuo sito Webflow.

1. Nella dashboard di Agentkit, vai su Impostazioni del tuo chatbot, poi su Pubblica.
2. Copia il tag script:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

3. In Webflow, apri Project Settings (l'icona a forma di ingranaggio nella barra laterale sinistra del Designer, oppure dalla dashboard del progetto).
4. Vai alla scheda Custom Code.
5. Incolla il tag script nella sezione Footer Code (il campo etichettato "Before </body> tag").
6. Clicca su Save Changes.
7. Clicca su Publish per rendere effettive le modifiche.

Il chatbot apparirà ora su ogni pagina del tuo sito Webflow pubblicato.

Opzione B: installazione per pagina specifica

Se vuoi il chatbot solo su alcune pagine (ad esempio la pagina prezzi e la pagina contatti, ma non il blog):

1. Nel Webflow Designer, apri la pagina in cui vuoi il chatbot.
2. Apri Page Settings (l'icona a forma di ingranaggio vicino al nome della pagina nel pannello Pages).
3. Scorri fino alla sezione Custom Code.
4. Incolla il tag script nel campo Before </body> tag.
5. Clicca su Save e poi su Publish.

Ripeti per ogni pagina in cui vuoi il chatbot. Le pagine senza lo script non mostreranno il chatbot.

Verificare l'installazione

Dopo la pubblicazione:

1. Apri il tuo sito Webflow in una nuova scheda del browser (oppure in una finestra in incognito per evitare la cache).
2. Cerca la bolla della chat nell'angolo in basso.
3. Clicca sulla bolla e invia un messaggio di prova.
4. Verifica che la risposta sia accurata e che lo stile sia corretto.
5. Testa da mobile per confermare che il widget venga visualizzato correttamente su schermi più piccoli.

Se il chatbot non appare subito dopo la pubblicazione, esegui un hard refresh della pagina (Ctrl+Shift+R o Cmd+Shift+R). Il CDN di Webflow potrebbe impiegare qualche minuto per propagare il codice aggiornato.

Passaggio 5: configura le restrizioni di dominio

Una volta che il chatbot è online, limitalo al tuo dominio in modo che non possa essere incorporato su siti non autorizzati.

1. Nella dashboard di Agentkit, vai su Impostazioni del tuo chatbot.
2. In Restrizioni di dominio, aggiungi il dominio del tuo sito Webflow (ad es. yoursite.com).
3. Se usi anche il dominio Webflow predefinito (yoursite.webflow.io), aggiungi anche quello.

Il chatbot si caricherà solo sui domini specificati. Questo impedisce a chiunque di copiare il tuo codice di embed e usare il tuo chatbot (e la tua quota di messaggi) sul proprio sito.

Consigli specifici per Webflow

Lavorare con le interazioni di Webflow

Se il tuo sito Webflow usa molte interazioni e animazioni, il widget del chatbot si carica in modo indipendente e non interferisce con esse. Il widget usa un overlay a posizione fissa, quindi si sovrappone al contenuto della pagina senza essere influenzato dalle trasformazioni di Webflow o dalle animazioni attivate dallo scroll.

Pagine di collection del CMS

Se hai un blog o un portfolio basato sul CMS di Webflow, il chatbot (installato su tutto il sito) apparirà su ogni pagina di collection del CMS. Addestra il chatbot sull'URL dell'intero sito, così potrà rispondere a domande su qualsiasi contenuto, comprese le pagine del CMS.

Se i contenuti del tuo CMS cambiano spesso, valuta il piano Standard ($119.99/mese), che include il riaddestramento automatico. Il chatbot esegue periodicamente di nuovo la scansione del tuo sito e rileva automaticamente le nuove voci del CMS.

Webflow Ecommerce

Per i siti Webflow Ecommerce, addestra il chatbot sulle pagine dei prodotti, sulla politica di spedizione, sulla politica di reso e sulle FAQ. Il chatbot può rispondere a domande sui prodotti, spiegare le opzioni di spedizione e gestire le richieste di reso. Consulta la nostra guida al chatbot per l'ecommerce per consigli dettagliati sulla configurazione.

Staging e produzione

Se usi l'ambiente di staging di Webflow (yoursite.webflow.io) per i test prima di pubblicare sul tuo dominio personalizzato, puoi aggiungere lo script del chatbot a entrambi. Usa la restrizione di dominio per controllare su quale dominio è attivo il chatbot. Durante i test, consenti entrambi i domini. In produzione, limita al solo dominio personalizzato.

Impatto sulle prestazioni

Il widget di Agentkit si carica in modo asincrono (nota l'attributo async nel tag script). Questo significa che non blocca il caricamento della tua pagina. Si carica in background dopo che il contenuto della pagina è pronto. Non c'è alcun impatto misurabile sul tempo di caricamento del tuo sito Webflow o sul punteggio Lighthouse.

Raccolta lead su Webflow

Un chatbot sul tuo sito Webflow è uno strumento di raccolta lead oltre che di supporto. I visitatori che interagiscono con il chatbot hanno dimostrato interesse. Raccogliere la loro email al momento giusto trasforma un visitatore occasionale in un'opportunità di follow-up.

Configurare la raccolta lead

1. Nella dashboard di Agentkit, vai su Azioni del tuo chatbot.
2. Attiva Raccogli contatti con nome ed email come campi obbligatori.
3. Configura nelle istruzioni del tuo chatbot quando deve comparire il modulo: "Dopo aver risposto alla domanda di un visitatore su servizi o prezzi, proponi di inviargli maggiori dettagli e usa il modulo di raccolta lead per raccogliere la sua email."

Collegare i lead ai tuoi strumenti

Zapier, i webhook e l'accesso alla REST API sono tutti disponibili a partire dal piano Hobby ($29.99/mese).

Per approfondire le strategie di raccolta lead, consulta Come usare i chatbot per la generazione di lead.

Abbinare il chatbot al design del tuo Webflow

Il tuo sito Webflow ha un linguaggio di design specifico. Ecco come far sembrare il chatbot parte integrante del sito, invece che aggiunto in un secondo momento.

Colore del brand. Copia il valore esadecimale esatto del colore primario del tuo brand dal pannello di stile di Webflow e usalo come colore del widget del chatbot. Questo garantisce che la bolla della chat e l'intestazione si integrino con il tuo sito.

Coerenza dei font. Il widget del chatbot usa uno stack di font di sistema pulito che si abbina bene alla maggior parte delle scelte tipografiche di Webflow. Il testo del widget è volutamente neutro, così non entra in conflitto con i font personalizzati.

Spaziatura e posizione. Se il tuo sito Webflow ha un footer fisso, un pulsante CTA fluttuante o un banner cookie, posiziona il chatbot sul lato opposto per evitare sovrapposizioni. Puoi scegliere in basso a sinistra o in basso a destra nelle impostazioni del chatbot.

Tono del messaggio di benvenuto. Scrivi il messaggio di benvenuto e i messaggi suggeriti con la stessa voce dei testi del tuo sito Webflow. Se il tuo sito è informale e amichevole, il chatbot dovrebbe rispecchiarlo. Se il tuo sito è professionale e formale, il chatbot dovrebbe riflettere lo stesso tono.

Misurare le prestazioni del chatbot sul tuo sito Webflow

Dopo che il chatbot è stato attivo per qualche settimana, rivedi le sue prestazioni nella dashboard di Agentkit.

Rivedi i log delle conversazioni ogni settimana per il primo mese. È qui che trovi i risultati rapidi: domande a cui il chatbot risponde male e che sono facili da correggere con una coppia di domande e risposte, e domande a cui risponde bene, che puoi usare per validare il tuo approccio di addestramento.

Piani Agentkit per i siti Webflow

La fatturazione annuale fa risparmiare circa il 20% su tutti i piani a pagamento. La maggior parte dei siti Webflow inizia con il piano Free per testare, poi passa a Hobby una volta visto il chatbot gestire domande reali dei visitatori.

Risoluzione dei problemi comuni

Il chatbot non appare dopo la pubblicazione. Il CDN di Webflow può impiegare qualche minuto per propagare le modifiche. Esegui un hard refresh della pagina. Se ancora non appare, verifica che lo script si trovi nel campo Custom Code corretto (Footer Code in Project Settings oppure Before </body> tag in Page Settings).

Il chatbot appare nel Designer ma non sul sito pubblicato (o viceversa). L'anteprima del Designer non esegue gli script personalizzati. Vedrai il chatbot solo sul sito pubblicato. È un comportamento previsto di Webflow.

Il chatbot si sovrappone a un elemento Webflow. Cambia la posizione del chatbot (in basso a sinistra o in basso a destra) nelle impostazioni di Agentkit, oppure regola lo z-index del tuo elemento Webflow se deve apparire sopra il chatbot.

Il chatbot dà risposte sbagliate. Rivedi la domanda specifica nei tuoi log delle conversazioni, poi aggiungi o aggiorna una coppia di domande e risposte con la risposta corretta. Le coppie di domande e risposte hanno la priorità sui contenuti scansionati per le domande corrispondenti.

Il chatbot non si carica su pagine specifiche. Se hai usato l'installazione per pagina specifica, verifica che lo script sia presente nelle impostazioni Custom Code di quella pagina. Se hai usato l'installazione su tutto il sito, controlla che non ci siano script in conflitto o header di sicurezza che lo bloccano.

Come iniziare

Aggiungere un chatbot AI al tuo sito Webflow è una delle modifiche con l'impatto più alto e lo sforzo più basso che puoi fare. Un solo tag script ti dà un assistente 24/7 che risponde alle domande dei visitatori, raccoglie lead e migliora l'esperienza di chiunque visiti il tuo sito.

1. Registrati su Agentkit (gratis).
2. Crea un chatbot e addestralo sull'URL del tuo sito Webflow.
3. Aggiungi coppie di domande e risposte per le domande più frequenti dei visitatori.
4. Personalizza il widget in linea con il tuo brand.
5. Incolla il codice di embed nelle impostazioni Custom Code di Webflow.
6. Pubblica e testa.

L'intero processo richiede circa 20 minuti. Il tuo chatbot inizia subito a rispondere alle domande reali dei visitatori.

Crea gratis il tuo chatbot →

Nessuna carta di credito richiesta.