Come personalizzare un widget chatbot IA e integrarlo nel sito

Apri il tuo assistente e seleziona Widget Integration → Appearance. Inizia impostando Widget Width e facoltativamente Height, poi seleziona Theme, Font Family e Chat Title. Tutorial Lab utilizza il tema Modern e il titolo “Tutorial Lab”; lasciare l'altezza libera consente al widget di adattarsi in modo responsivo.

Assegna i colori in base al loro ruolo: sfondo e testo dell'intestazione, fumetto e testo del bot, fumetto e testo del visitatore, sfondo e icona del pulsante di avvio. L'esempio utilizza un'intestazione blu navy con testo bianco e un fumetto visitatore blu acceso. Verifica ogni combinazione di testo e sfondo nell'anteprima effettiva, non solo nel selettore di colore. Il testo normale deve garantire un contrasto di almeno 4.5:1.

Apri la scheda Images. Avatar Image compare accanto ai messaggi dell'assistente, Chat Button Image sostituisce l'icona del pulsante di avvio e Welcome Image arricchisce la schermata iniziale vuota. Non caricare un unico logo orizzontale per tutti i campi: ritaglia una risorsa dedicata per ciascun ruolo.

Utilizza file PNG o WebP ottimizzati con un profilo netto e ben definito. Mantieni avatar e pulsante di avvio in formato quadrato, verifica la trasparenza sia su sfondi chiari che scuri ed evita testi troppo piccoli nelle icone. Nella schermata di esempio le immagini opzionali sono lasciate vuote: è una scelta valida se l'icona predefinita WebChatAgent risulta più chiara rispetto a una grafica personalizzata poco leggibile.

Apri la scheda Content & Behavior. Decidi se disabilitare il widget sul sito, se aprirlo automaticamente all'avvio, se nasconderlo sui dispositivi mobili o se mostrare le fonti utilizzate. Controlla poi le opzioni per il microfono, la traduzione automatica, il fumetto di anteprima (speech bubble) e le pagine escluse. Modifica un'opzione alla volta e controlla il risultato visibile.

Scrivi un messaggio di benvenuto breve che spieghi chiaramente l'utilità del bot. I pulsanti di prompt non si trovano in questa scheda: sono posizionati in Buttons & forms, nella sezione Quick actions. Aggiungine due o tre mirati a compiti precisi. Il prompt “Which plan is right for me?” offre un contesto migliore rispetto a “Learn more.”. Evita l'apertura automatica del pannello su tutte le pagine: usa la scheda Triggers solo dopo aver verificato tempistiche, pagine di attivazione, chiusura e frequenza in una sessione pulita.

Apri la scheda Positioning. Le sezioni Desktop Offsets e Mobile Offsets consentono di gestire in modo indipendente le distanze dall'angolo selezionato. Tutorial Lab imposta 20 pixel da destra e dal basso per entrambi i layout come configurazione iniziale neutra.

Non limitarti a controllare il pulsante chiuso. Apri il widget completo alla larghezza minima supportata con il banner dei cookie visibile, la barra dell'interfaccia del browser mobile espansa ed eventuali elementi fissi di navigazione, carrello o checkout. Aumenta i margini necessari fino a quando il pulsante e il pannello restano facilmente accessibili senza nascondere le azioni principali della pagina.

Fai clic su Test Your Chatbot per aprire l'anteprima autenticata lato utente. Controlla il titolo, il fumetto blu dell'utente, la leggibilità delle risposte dell'assistente, i pulsanti di prompt, il campo di input del messaggio, il pulsante di chiusura e il branding. Esegui una prova completa sia con il mouse che da tastiera: lo stato di focus deve restare visibile e tornare al punto corretto dopo la chiusura del pannello.

Nell'esempio di test viene chiesto “What are the support hours?”. Il widget risponde correttamente indicando che gli orari di supporto di Northstar Services sono dal lunedì al venerdì, dalle 8:00 AM alle 6:00 PM (dalle 08:00 alle 18:00) (ora dell'Europa centrale). Questo passaggio conferma contemporaneamente la resa grafica e l'accuratezza delle risposte. Ripeti il test con una domanda volutamente senza risposta per verificare che il design mantenga leggibile anche un testo di fallback più lungo.

Scorri fino al blocco di codice nella sezione Widget Integration e copia l'intero frammento HTML, non solo l'ID del chatbot. Il blocco carica lo script WebChatAgent in modalità asincrona e genera l'elemento personalizzato `web-chat-agent` con l'ID associato all'assistente. Incollalo una sola volta prima del tag di chiusura `body` o nella sezione dedicata al codice personalizzato del tuo CMS.

Prima di iniziare i test, inserisci gli hostname esatti di staging e produzione nel campo Allowed Websites. Se la tua policy di consenso blocca i widget di terze parti non essenziali, carica lo script solo dopo l'accettazione della categoria corretta; se il widget è considerato supporto tecnico essenziale, documenta questa scelta e il relativo flusso di dati. Controlla che non vi siano script duplicati, errori nella console o blocchi dovuti alla Content Security Policy.

Le modifiche salvate nel widget vengono applicate automaticamente tramite l'elemento già presente. Non serve aggiornare il codice di incorporamento dopo aver modificato colori, prompt o margini. Dovrai sostituirlo solo se cambi l'ID del chatbot o il tipo di integrazione.