Come aggiungere un chatbot IA al tuo sito web (qualsiasi piattaforma, passo dopo passo)

Aggiungere un chatbot IA a un sito web richiede due cose: creare l’assistente e inserirlo nel sito. Con Nexoply la prima parte si svolge nella dashboard di Nexoply, senza codice e senza chiave IA, perché è Nexoply a gestire l’IA. La seconda parte è una riga di codice. Ti servono:

• Un account Nexoply. Registrati gratis: il piano Gratuito include 50 conversazioni al mese, senza carta. I piani a pagamento partono da $19 al mese, come indicato nella pagina dei prezzi.
• L’accesso al punto in cui il tuo sito accetta codice personalizzato: un’impostazione per il codice del footer nel tuo website builder, i file del tema o i template HTML. Sui website builder in hosting, verifica che il tuo piano consenta il codice personalizzato.
• Circa cinque minuti, più il tempo per rivedere le informazioni sulla tua attività.

Un chatbot IA per il sito di una piccola impresa è utile quanto ciò che sa. In Nexoply gli fornisci servizi e prezzi, FAQ, politiche, orari di apertura e zone servite. Il modo più rapido è l’importazione dal sito web: inserisci l’indirizzo del tuo sito e Nexoply legge le tue pagine pubbliche (Gratuito 15, Starter 40, Business 100, Pro 200 per scansione), comprese le pagine create con JavaScript, poi propone servizi con prezzi, FAQ, politiche, orari e dati di contatto. Controlli le proposte; non viene aggiunto nulla senza la tua approvazione.

Da quel momento l’assistente risponde solo in base a queste informazioni. È istruito a dire quando non conosce la risposta invece di tirare a indovinare, e ogni conversazione è nella tua dashboard da rivedere. I visitatori possono scrivere in una qualsiasi delle 12 lingue e ricevere risposte nella propria. Nexoply non è una casella di live chat per operatori umani e non gestisce direttamente prenotazioni né pagamenti; i suoi pulsanti possono indirizzare i visitatori alla tua pagina di prenotazione, al telefono o a WhatsApp. Per il quadro completo, scopri come funziona Nexoply.

Apri la pagina Chatbot nella tua dashboard (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; dice solo al widget a quale attività appartiene. Per vedere l’assistente prima di modificare il sito, fai clic su Apri una pagina di prova con il tuo chatbot.

Se modifichi il sito come file HTML, incolla il codice su una riga a sé, subito sopra il tag di chiusura </body>:

    <!-- …il contenuto della tua pagina… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   Trova il footer condiviso

   Se le tue pagine condividono un template o un include per il footer (frequente sui siti PHP e con i generatori di siti statici), incolla lì il codice una sola volta. Altrimenti, incollalo in ogni pagina in cui deve comparire il pulsante della chat.

2. 2

   Una volta per pagina

   Basta una copia per pagina. Lo script si carica in modo asincrono, quindi metterlo in fondo alla pagina permette ai tuoi contenuti di comparire per primi.

3. 3

   Carica o pubblica

   Salva i file e caricali o pubblicali come fai di solito per aggiornare il sito.

Ogni website builder e framework ha un punto dedicato al codice valido per tutto il sito. Incolla lì la stessa riga; le guide per piattaforma spiegano ogni caso passo dopo passo.

• Nessun pacchetto npm necessario. Il widget è sempre lo stesso tag script. Funziona anche quando il tag viene aggiunto da codice, purché mantenga l’attributo data-chatbot e un src che contenga widget.js.
• Single-page app. Si monta una sola volta sulla pagina, fuori dall’elemento radice della tua app, mantiene la conversazione mentre i visitatori navigano e ricontrolla le regole per pagina quando cambia l’URL. Caricarlo due volte non causa problemi.
• Rendering lato server. Viene eseguito solo nel browser e non tocca il markup del tuo framework, quindi non ci sono problemi di hydration.
• Content-Security-Policy. Se il tuo sito ne invia una, consenti https://nexoply.com in script-src, connect-src e img-src.
• Test in locale. Se compili Consenti solo su questi siti web, aggiungi il tuo host di sviluppo locale con la porta (per esempio localhost:3000), oppure lascia l’elenco vuoto durante i test.

Apri il sito pubblicato in una nuova finestra privata. Nell’angolo in basso compare un pulsante della chat. Fai una domanda reale, come "Fate interventi urgenti nel fine settimana?" oppure "Quali zone coprite?" (altri esempi nella guida al chatbot IA per idraulici). 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 modificare di nuovo il codice.

• Codice non ancora online. Assicurati che la modifica sia salvata e pubblicata, poi ricarica il sito pubblicato in una finestra privata. Le anteprime dell’editor nei website builder non sempre eseguono il codice personalizzato.
• Codice modificato o incompleto. Controlla che la riga sia completa, da <script a </script>, con data-chatbot e la tua chiave invariati.
• Codice personalizzato non consentito. Sui website builder in hosting, il codice personalizzato può dipendere dal piano (per esempio Wix richiede un piano premium con un dominio collegato, e Squarespace il piano Business o superiore).
• Domini consentiti. Se hai impostato Consenti solo su questi siti web nella pagina Chatbot, assicurati che ogni indirizzo del tuo sito sia elencato esattamente (per esempio miaattivita.it, oppure *.miaattivita.it per i sottodomini).
• Content-Security-Policy. Una policy restrittiva blocca lo script finché https://nexoply.com non è consentito 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, mai nel codice del sito. In Chatbot → Personalizza puoi scegliere l’icona del pulsante dei messaggi (oppure una tua immagine o un SVG), 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 cambiare o nascondere il pulsante su pagine scelte (per esempio /servizi/*). Adatta la finestra di chat ai tuoi caratteri e colori, aggiungi il tuo logo oppure parti da un modello già pronto. Una schermata iniziale può mostrare i tuoi pulsanti, come Prenota, Chiama o WhatsApp. Il widget usa uno Shadow DOM, quindi il CSS del tuo sito non lo influenza.

Poi rivedi regolarmente le conversazioni: le domande a cui l’assistente non ha saputo rispondere vengono elencate e possono diventare FAQ con un clic, e le statistiche mostrano gli argomenti, gli orari di maggiore attività e le pagine in cui è stata aperta la chat. Per l’elenco completo delle opzioni, consulta le funzionalità del chatbot; per confrontare prima gli strumenti, leggi i migliori chatbot IA per piccole imprese.