Come aggiungere un chatbot IA a Webflow (in 5 minuti)

Nexoply è un assistente IA che crei nella sua dashboard e aggiungi a un sito Webflow con un tag script. Webflow contiene solo quella riga; le conoscenze, l’aspetto e il comportamento dell’assistente si gestiscono in Nexoply, senza codice e senza chiave IA, perché è Nexoply a gestire l’IA. In pratica:

• Conosce l’attività. Aggiungi servizi e prezzi, FAQ, politiche, orari di apertura e zone servite, oppure importali dalle pagine pubbliche del sito Webflow (15 per scansione con il piano Gratuito). Non viene aggiunto nulla senza la tua approvazione.
• Risponde solo in base a queste informazioni. È istruito a dire quando non conosce la risposta invece di tirare a indovinare, e ogni conversazione è nella dashboard da rivedere.
• Si adatta al design. Pulsante dei messaggi o linguetta laterale, colori, caratteri e logo, modelli già pronti, un aspetto separato sugli smartphone, regole per pagine scelte e pulsanti della schermata iniziale come Prenota, Chiama o WhatsApp.
• Risponde in 12 lingue. I visitatori che scrivono in un’altra lingua supportata ricevono risposte in quella lingua.
• Cosa non è. Non è una casella di live chat per operatori umani e non gestisce direttamente prenotazioni né pagamenti; i suoi pulsanti indirizzano i visitatori a una pagina di prenotazione, al telefono o a WhatsApp.

Il piano Gratuito include 50 conversazioni al mese; i piani a pagamento partono da $19 al mese, come indicato nella pagina dei prezzi. Realizzi siti Webflow per i clienti? Ogni attività ha il proprio account Nexoply e un chatbot, quindi configuralo con le informazioni del cliente. Per l’elenco completo delle opzioni, consulta le funzionalità del chatbot.

Prima verifica queste tre cose:

• Un account Nexoply. Registrati gratis: il piano Gratuito include 50 conversazioni al mese, senza carta.
• Le informazioni sull’attività in Nexoply: servizi e prezzi, FAQ, politiche, orari di apertura e zone servite. Il modo più rapido è inserire l’indirizzo del sito Webflow e lasciare che Nexoply importi le sue pagine pubbliche, comprese quelle create con JavaScript. Controlli le proposte; non viene aggiunto nulla senza la tua approvazione.
• L’accesso alle impostazioni del progetto Webflow e un piano che consenta il codice personalizzato. Se le impostazioni Custom code non sono disponibili per te, verifica il tuo piano o chiedi al proprietario del sito.

Nella tua dashboard Nexoply, apri la pagina Chatbot (fai clic su Crea chatbot se non l’hai ancora fatto) e copia il codice di installazione. Ha questo aspetto:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

Al posto di YOUR-KEY c’è la chiave del tuo chatbot, che la pagina Chatbot inserisce automaticamente. La chiave è pubblica: non è una password e non dà accesso al tuo account. Vuoi vedere l’assistente prima di mettere mano a Webflow? Fai clic su Apri una pagina di prova con il tuo chatbot per provarlo su una pagina di esempio.

1. 1

   Apri Project settings

   In Webflow, apri le Project settings del progetto.

2. 2

   Vai su Custom code

   Apri la sezione Custom code. Il codice inserito qui vale per tutto il sito, quindi viene eseguito su ogni pagina del progetto.

3. 3

   Incolla in Footer code

   Incolla il codice Nexoply in Footer code. Il Footer code viene inserito subito prima della fine di ogni pagina, che è proprio il punto giusto per lo script.

4. 4

   Salva

   Salva le modifiche nelle Project settings.

5. 5

   Pubblica

   Pubblica il sito. Il codice personalizzato viene aggiunto solo al sito pubblicato, quindi è questo passaggio a far comparire il pulsante della chat.

Apri il sito pubblicato in una nuova finestra privata, così lo vedi come un visitatore. Nell’angolo in basso compare un pulsante della chat. Fai una domanda reale, come "Accettate nuovi pazienti?" oppure "Cosa devo portare alla prima visita?" (altri esempi nella guida al chatbot IA per studi medici). In pochi secondi la conversazione compare in Conversazioni nella tua dashboard Nexoply. Da quel momento, le modifiche che fai nella dashboard arrivano sul sito in circa un minuto, senza dover ripubblicare in Webflow.

• Non pubblicato. Salvare le Project settings non basta: pubblica il sito, poi ricaricalo.
• Verifica nel Designer. Controlla il sito pubblicato in una finestra privata, non nel Designer.
• Campo sbagliato o codice incompleto. Riapri Custom code e controlla che il codice si trovi in Footer code, completo e invariato, da <script a </script>.
• Piano o permessi. Se non riesci a salvare il codice personalizzato, verifica che il tuo piano Webflow lo consenta, o che il tuo ruolo nel progetto ti permetta di modificare le Project settings.
• Domini consentiti. Se hai impostato Consenti solo su questi siti web nella pagina Chatbot, elenca ogni indirizzo su cui il sito è pubblicato (per esempio miostudiomedico.it, oppure *.miostudiomedico.it per i sottodomini).
• Content-Security-Policy. Se il sito invia una Content-Security-Policy, consenti https://nexoply.com in script-src, connect-src e img-src.
• Chatbot disattivato o ad blocker. Controlla che l’interruttore Chatbot attivo sia acceso. Raramente un’estensione del browser blocca i widget di chat; prova con un altro browser.

Il design si imposta nella tua dashboard Nexoply, non in Webflow. In Chatbot → Personalizza puoi scegliere l’icona del pulsante dei messaggi (una tua immagine o un codice SVG incollato), l’etichetta di testo, la forma, le dimensioni, i colori, il bordo, l’ombra e la posizione, oppure usare al suo posto una linguetta laterale sul bordo dello schermo (come "Aiuto"). Puoi impostare un aspetto diverso sugli smartphone e usare le regole per pagina per cambiarlo su pagine scelte (per esempio /servizi/*). Adatta la finestra di chat ai caratteri e ai colori del sito, aggiungi un logo oppure parti da un modello già pronto. Una schermata iniziale può mostrare i tuoi pulsanti, come Prenota, Chiama o WhatsApp.

Per aprire la chat da uno dei tuoi pulsanti Webflow, un breve script può chiamare window.dispatchEvent(new Event("nexoply:open-chat")); per aprirla appena la pagina è caricata, aggiungi data-open="true" al tag script. Poi rivedi regolarmente le conversazioni: le domande a cui l’assistente non ha saputo rispondere vengono elencate e possono diventare FAQ con un clic. Leggi come funziona Nexoply per il quadro completo, oppure scopri come aggiungere un chatbot IA a qualsiasi sito web per le altre piattaforme.