Le impostazioni di aspetto controllano l'aspetto del widget di chat del tuo chatbot per i visitatori sul tuo sito web: l'intestazione, i colori e i caratteri dei messaggi, l'icona di avvio, la schermata di benvenuto, le dimensioni del widget e altro ancora. Qui puoi adattare il widget al tuo brand.
Prima di poterne definire lo stile, è necessario avere un chatbot. Se non ne hai ancora creato uno, inizia con Come creare il tuo primo chatbot.
Dove trovare le impostazioni di aspetto
Seleziona il tuo chatbot e vai su Settings > Appearance (Impostazioni > Aspetto). Dalla pagina principale di ChatLab fai clic su Chatbots (Chatbot), apri il tuo chatbot, apri la scheda Settings (Impostazioni), quindi scegli Appearance (Aspetto) nel menu a sinistra.
Un'anteprima in tempo reale del widget appare sul lato destro della pagina e si aggiorna man mano che modifichi le impostazioni.
Chat Header (Intestazione chat)
Configura l'aspetto della sezione superiore del widget di chat:
- Chatbot name (Nome chatbot) - il nome visualizzato nell'intestazione della chat (massimo 60 caratteri)
- Tagline (Sottotitolo) - sottotitolo opzionale mostrato sotto il nome del chatbot (massimo 60 caratteri)
- Avatar - carica un'immagine personalizzata visibile agli utenti mentre interagiscono con il chatbot. Usa il pulsante Remove (Rimuovi), evidenziato sotto, per cancellare l'immagine corrente.
- Background (Sfondo) - colore di sfondo dell'area di intestazione
- Name color (Colore nome) - colore del testo del nome del chatbot
- Tagline color (Colore sottotitolo) - colore del testo del sottotitolo
- Reset conversation tooltip (Tooltip azzera conversazione) - testo del tooltip mostrato quando i visitatori passano il cursore sul pulsante di azzeramento della conversazione nell'intestazione del widget (massimo 40 caratteri, predefinito "Reset conversation")
Message (Messaggio)
Personalizza il campo di inserimento del messaggio e l'aspetto dei messaggi della conversazione:
- Input placeholder (Placeholder del campo di testo) - testo segnaposto mostrato nel campo di immissione del nuovo messaggio nella parte inferiore del widget (massimo 50 caratteri, predefinito "Type a message..."). Usalo per incoraggiare i visitatori a iniziare a scrivere.
- User background (Sfondo utente) - colore di sfondo dei messaggi inviati dal visitatore
- User text (Testo utente) - colore del testo dei messaggi del visitatore
- Resp. background (Sfondo risposta) - colore di sfondo delle risposte del chatbot
- Response text (Testo risposta) - colore del testo delle risposte del chatbot
La dimensione del testo del messaggio viene impostata nella sezione Typography (Tipografia), insieme al carattere del widget.
Suggested Questions (Domande suggerite)
Le domande suggerite sono prompt predefiniti che il visitatore può toccare per iniziare una conversazione. I testi delle domande si configurano in Settings > Chat Conversation (Impostazioni > Conversazione chat); qui ne definisci lo stile dei pulsanti:
- Background (Sfondo) - colore di sfondo dei pulsanti delle domande suggerite
- Text (Testo) - colore del testo dei pulsanti delle domande suggerite
- Stack (Impila) - se abilitato, le domande suggerite più lunghe vengono impilate verticalmente anziché mostrare una barra di scorrimento orizzontale
La dimensione del testo delle domande suggerite viene impostata nella sezione Typography (Tipografia).
Impostazioni della modalità compressa (Minimized-Mode Settings)
Controlla l'aspetto del widget di chat quando è compresso (prima che l'utente apra la chat):
- Modalità di visualizzazione compressa (Minimized display mode) - scegli tra:
- Icona (Icon) - icona standard circolare di avvio chat (predefinita)
- Barra di chat ridotta (Minified chat bar) - barra compatta di inserimento testo visualizzata in fondo alla pagina
- Icona con testo (Icon with text) - pulsante di avvio più ampio a forma di pillola: l'icona con una breve didascalia su due righe
- Colore icona / Colore barra ridotta (Icon color / Mini bar color) - colore dell'icona di avvio o dello sfondo della barra ridotta
- Icona di chat personalizzata (Custom chat icon) (solo in modalità icona) - attiva questa opzione per caricare icone personalizzate per l'apertura e la chiusura della chat
- Posizione sullo schermo (Position on screen) - posiziona il widget sul lato sinistro o destro dello schermo
- Sposta in alto l'icona/barra chat di (Move up chat icon/bar by) - offset verticale in pixel dal bordo inferiore
- Sposta l'icona/barra a sinistra/destra di (Move icon/bar left/right by) - offset orizzontale in pixel dal bordo dello schermo più vicino
Icona con testo (Icon with Text)
La modalità Icona con testo (Icon with text) aggiunge una breve didascalia al pulsante di avvio, così gli utenti possono capire a cosa serve la chat prima di aprirla. È utile quando la sola icona non è abbastanza chiara - ad esempio "Scrivici / Rispondiamo subito" o "Hai bisogno di aiuto? / Chiedi al nostro assistente".
Selezionando questa modalità compaiono quattro impostazioni aggiuntive:
- Riga etichetta 1 (Label line 1) - la prima riga della didascalia, con risalto maggiore (massimo 60 caratteri)
- Riga etichetta 2 (Label line 2) - la seconda riga, più leggera (massimo 60 caratteri). Lasciala vuota per un pulsante di avvio a riga singola
- Colore testo (Text color) - colore della didascalia. Se non lo modifichi, ChatLab seleziona automaticamente il bianco o il nero in base alla tonalità più o meno scura del colore di avvio
- Mostra crocetta di chiusura (Show close cross) - aggiunge una piccola crocetta al pulsante di avvio per consentire agli utenti di nasconderlo
Entrambe le righe vengono troncate con puntini di sospensione se lo spazio non basta, evitando che il pulsante di avvio diventi più largo dello schermo. Quando la chat è aperta, il pulsante torna a ridursi a un cerchio.
Se il supporto multilingua è abilitato, entrambe le righe della didascalia vengono tradotte come tutti gli altri testi visibili agli utenti.
L'opzione Mostra crocetta di chiusura (Show close cross) è disattivata per impostazione predefinita ed è disponibile solo in questa modalità. Quando è attiva, se un utente fa clic sulla crocetta, il pulsante di avvio rimane nascosto per il resto della sessione di navigazione: continua a non comparire mentre l'utente passa da una pagina all'altra e torna visibile alla visita successiva o in una nuova scheda. Un chatbot configurato per aprirsi automaticamente rispetta questa scelta e non si riapre dopo che l'utente l'ha chiuso.
Auto Open Chat Widget After Page Load (Apertura automatica del widget di chat dopo il caricamento della pagina)
Configura la chat affinché si apra automaticamente al caricamento della pagina:
- Auto open on mobile (Apertura automatica su dispositivi mobili) - apre automaticamente la chat sui dispositivi mobili
- Auto open on desktop (Apertura automatica su desktop) - apre automaticamente la chat su schermi desktop
- Open chat with delay (Apri chat con ritardo) - imposta un ritardo prima dell'apertura automatica (disponibile solo quando l'apertura automatica è abilitata)
- Delay by (Ritarda di) - numero di secondi di attesa prima dell'apertura (0-60 secondi)
Human-Like Messaging (Messaggistica simile a quella umana)
Simula la digitazione umana dividendo le risposte in più fumetti di messaggio, mostrati gradualmente frase per frase:
- Human-Like Messaging - interruttore per abilitare/disabilitare la funzione
- Delay Between Bubbles (Ritardo tra i fumetti) - tempo in secondi tra la visualizzazione di ciascun fumetto di messaggio (0-200 secondi)
Welcome Message Bubble (Fumetto messaggio di benvenuto)
Mostra il messaggio di benvenuto in un fumetto sopra l'icona di avvio della chat per aiutare i visitatori a notare la chat. Questa funzione è disponibile solo in modalità icona e non funziona in modalità iframe o quando è abilitata l'apertura automatica.
- Show on desktop (Mostra su desktop) - mostra il fumetto del messaggio di benvenuto su desktop
- Show on mobile (Mostra su dispositivi mobili) - mostra il fumetto del messaggio di benvenuto su dispositivi mobili
- Delay (Ritardo) - numero di secondi dopo il caricamento della pagina prima di mostrare il fumetto (0-60 secondi)
Se hai configurato più messaggi di benvenuto, appariranno impilati sopra l'icona della chat.
L'inserimento vocale (il pulsante del microfono nell'area di testo della chat) si configura in Settings > Chat Conversation, non qui in Appearance.
Welcome Screen (Schermata di benvenuto)
Imposta nel widget un layout di apertura speciale che accoglie i nuovi visitatori con un grande messaggio di benvenuto e le domande suggerite disposte su una scheda bianca centrata. La schermata di benvenuto compare solo all'inizio di una nuova sessione e passa alla normale visualizzazione della chat non appena il visitatore invia il primo messaggio.
- Special Welcome Screen (Schermata di benvenuto speciale) - attiva o disattiva la modalità schermata di benvenuto (disattivata per impostazione predefinita)
- Suggested questions intro (Intro domande suggerite) - breve etichetta mostrata sopra la scheda delle domande suggerite nella schermata di benvenuto (ad esempio, "Seleziona un'opzione o scrivi un messaggio"). Lascia vuoto per nascondere l'etichetta. Richiede la configurazione delle domande suggerite in Settings > Chat Conversation.
- Hide Human Contact Form (Nascondi modulo di contatto umano) - nasconde l'azione del modulo di contatto nell'intestazione mentre è visibile la schermata di benvenuto
- Hide Live Chat (Nascondi Live Chat) - nasconde l'azione della chat dal vivo nell'intestazione mentre è visibile la schermata di benvenuto
La schermata di benvenuto si integra anche con Lead Collection (Raccolta lead) e il Privacy Policy consent (Consenso all'informativa sulla privacy): se uno dei due è richiesto all'inizio della conversazione, il modulo o la richiesta di consenso viene mostrato sulla scheda di benvenuto al posto delle domande suggerite.
Per tutti i dettagli, le varianti di layout e le schermate lato visitatore, consulta Schermata di benvenuto.
Header Actions (Azioni intestazione)
Controlla come vengono presentati Live Chat e il Human Contact Form (Modulo di contatto umano) nell'intestazione del widget di chat.
- Separate icons (Icone separate) - ogni azione riceve la propria icona nell'intestazione, accanto al pulsante di chiusura
- Menu (dropdown) (Menu a tendina) - entrambe le azioni vengono spostate nel menu dell'intestazione (l'icona con i tre puntini), insieme a voci come "Reset conversation" e al selettore della lingua quando abilitati
I nuovi chatbot utilizzano il menu, mantenendo l'intestazione ordinata man mano che vengono aggiunte più azioni. I chatbot creati prima del 2 settembre 2026 mantengono le icone separate, così nulla cambia per i loro visitatori. Puoi cambiare opzione in qualsiasi momento: l'impostazione influisce solo sulla presentazione grafica, non sul funzionamento delle azioni.
Typography (Tipografia)
Imposta il carattere e le dimensioni del testo utilizzati in tutto il widget: messaggi, domande suggerite, intestazione, moduli e didascalia del pulsante di avvio.
- Widget font (Carattere widget) - uno degli otto caratteri disponibili: System default (Predefinito di sistema), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif e JetBrains Mono
- Message font size (Dimensione carattere messaggi) - dimensione del testo dei messaggi (12-24 px)
- Suggested questions font size (Dimensione carattere domande suggerite) - dimensione dei pulsanti delle domande suggerite (12-24 px)
Inter è il valore predefinito e corrisponde all'aspetto grafico di ogni chatbot prima dell'introduzione di questa impostazione; pertanto, nulla cambierà finché non sceglierai un altro carattere.
System default non scarica alcun file: il widget utilizza il carattere già installato sul dispositivo del visitatore. È l'opzione più veloce e si integra perfettamente nei siti che impiegano a loro volta il carattere di sistema, anche se la chat avrà un aspetto leggermente diverso su Windows, macOS e Android. Gli altri sette sono Google Fonts, scaricati una sola volta dal browser del visitatore. Ognuno dispone di un fallback, garantendo che, qualora la rete di un visitatore blocchi Google Fonts, il testo rimanga leggibile e il layout non si alteri.
Il file del carattere viene caricato all'interno della finestra di chat. Viene aggiunto alla tua pagina solo quando il widget mostra testo al di fuori della finestra di chat: nel pulsante di avvio Icon with text, nella barra di chat compatta o nei fumetti del messaggio di benvenuto. Un chatbot che utilizza il semplice pulsante a icona non aggiunge alcuna richiesta aggiuntiva alla pagina.
Dimensioni del widget
Regola le dimensioni del widget di chat aperto su dispositivi desktop e mobili. Ogni cursore include il pulsante Default (Predefinito) che ripristina le dimensioni integrate.
- Desktop width (Larghezza desktop) - larghezza del widget sui browser desktop, in pixel (330-800, predefinito 448)
- Desktop height (Altezza desktop) - altezza del widget sui browser desktop, in pixel (300-770, predefinito 660)
- Mobile size (Dimensioni per dispositivi mobili) - dimensioni del widget sui dispositivi mobili, come percentuale dello schermo (60-100%, predefinito 100%)
Con il valore predefinito, il widget utilizza il dimensionamento reattivo integrato di ChatLab. Qualsiasi altro valore applica una dimensione fissa.
Sui dispositivi mobili, il valore predefinito (100%) fa sì che la chat aperta copra l'intero schermo. Selezionando una percentuale inferiore, il widget si riduce a quella porzione dello schermo e si centra nella schermata visualizzata, così i visitatori possono continuare a vedere la pagina intorno alla chat.
Accanto ai cursori troverai due pulsanti Save & Preview (Salva e visualizza anteprima, evidenziati sotto) - uno per le righe desktop e uno per la riga dei dispositivi mobili. Facendo clic su un pulsante, salvi le modifiche non ancora registrate e apri la chat in una finestra di anteprima con le impostazioni correnti:
- Il pulsante desktop apre una normale finestra del browser per mostrarti le dimensioni esatte su uno schermo desktop.
- Il pulsante per dispositivi mobili apre un popup compatto (400 x 700) per mostrare il widget nel suo layout mobile, utile quando regoli il cursore Mobile size da un computer desktop.
Pulsante Ingrandisci (Drawer Mode)
La modalità Drawer mode (Modalità cassetto) consente al visitatore di passare dalla finestra flottante della chat a un pannello a tutta altezza agganciato al bordo dello schermo, lasciando visibile la tua pagina a fianco. È ideale per le conversazioni che il visitatore segue mentre legge la pagina - risposte lunghe, confronti di prodotti, moduli o qualsiasi contenuto con molto testo.
Attiva Maximise button (Pulsante ingrandisci) in Widget Size (Dimensioni del widget) e comparirà un pulsante nell'intestazione della chat; il visitatore decide se utilizzarlo. La sua scelta viene memorizzata per il resto della sessione di navigazione.
- Il pannello occupa metà della larghezza della finestra del browser, fino a 720 px, ed è sempre a tutta altezza. Si aggancia allo stesso lato del tuo launcher, quindi un widget posizionato a sinistra aprirà un pannello a scomparsa a sinistra.
- Desktop width e Desktop height non si applicano in questo caso - regolano solo la normale finestra flottante.
- Il pulsante viene mostrato solo su schermi desktop larghi almeno 1.200 px, con un mouse. Su telefoni e tablet non appare mai, poiché la chat occupa già l'intero schermo. Se un visitatore riduce la larghezza del browser al di sotto di questo valore, il cassetto si richiude tornando alla finestra normale.
- Il launcher rimane nascosto mentre il cassetto è aperto; il visitatore può chiuderlo dall'intestazione o uscire dalla modalità drawer con lo stesso pulsante.
La modalità drawer è disattivata per impostazione predefinita, quindi non cambia nulla per i tuoi visitatori finché non decidi di attivarla.
Other Appearance Settings (Altre impostazioni di aspetto)
- Widget Shadow (Ombra widget) - abilita o disabilita l'ombra attorno al riquadro del widget di chat
- Open links in (Apri link in) - scegli se i link nei messaggi della chat devono aprirsi in una nuova scheda (new tab) o nella stessa scheda (same tab)
Su desktop, nell'intestazione della chat è presente anche un pulsante di chiusura (X), così i visitatori possono richiudere la chat riducendola al pulsante di avvio senza ricaricare la pagina. Il pulsante di chiusura rimane nascosto quando la chat è incorporata tramite iframe o in modalità a schermo intero.
Custom Chat Footer (Piè di pagina chat personalizzato)
Aggiungi un testo personalizzato da visualizzare nella parte inferiore del widget di chat (massimo 250 caratteri). Il formato Markdown è supportato per l'inserimento di link. Viene comunemente utilizzato per inserire collegamenti alla propria informativa sulla privacy o ai termini di servizio.
Esempio di Markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
Custom CSS (CSS personalizzato)
Aggiungi stili CSS personalizzati per adattare ulteriormente l'aspetto del tuo widget di chat (massimo 5.000 caratteri):
Articoli correlati
Le modifiche si salvano automaticamente. Attendi che compaia Saved (Salvato), quindi controlla Overview (Panoramica) e il widget incorporato su desktop e dispositivi mobili. L'anteprima delle impostazioni mostra la finestra di chat; la posizione del launcher e il comportamento di apertura automatica a livello di pagina devono essere verificati anche sul tuo chatbot incorporato nel sito web.
- Come creare il tuo primo chatbot
- Impostazioni di conversazione - scrivi il messaggio di benvenuto e le domande suggerite
- Schermata di benvenuto - il layout iniziale a schermo intero e le sue varianti visibili ai visitatori
- Moduli personalizzati - raccogli i dettagli dei visitatori all'interno della chat
- Raccolta di lead