Personalizzazione del Widget
Faccia corrispondere il widget di chat al suo brand e faccia in modo che si comporti esattamente come desidera. Tutte le personalizzazioni avvengono nella sua dashboard — le modifiche si applicano automaticamente al suo sito web, senza toccare il codice di embed.
Troverà le impostazioni in Dashboard → Chatbots → selezioni il suo chatbot:
- La scheda Widget controlla l'aspetto (posizione, colori, dimensioni, testi)
- La scheda Behavior controlla come il widget interagisce con i visitatori
Clicchi Save Changes in cima alla pagina per applicare le modifiche.
Scheda Widget: Aspetto
Posizione
Scegli dove appare il widget sul suo sito web:
| Position | Description |
|---|---|
| Bottom Right | Floating chat bubble in the bottom-right corner (default) |
| Bottom Left | Floating chat bubble in the bottom-left corner |
| Inline (Embedded) | Widget is embedded directly on the page instead of floating |
With the Inline position, the chat is embedded at the spot where the embed script is placed and is always open — no bubble, no close button. Ideal for dedicated chat or support pages. See Widget Embedding for details.
Tema Colore
Scegli uno dei tre preset di colore:
| Preset | Description |
|---|---|
| Default | The standard ChatReact color scheme |
| Brand | Your company's brand colors from Company Settings |
| Custom | Pick your own colors |
The Brand preset is only available once brand colors are set. Go to your Company Settings to extract colors from your website.
Con Custom selezionato, può impostare quattro colori di base:
- Primary — bubble, header gradient, buttons, and visitor messages
- Secondary — second color of the header gradient
- Background — chat window background
- Text — message text color
Impostazioni Colore Avanzate
Serve più controllo? Con il preset Custom selezionato, espanda Advanced Color Settings per sovrascrivere i colori calcolati automaticamente:
- Visitor Messages — background and text color of visitor message bubbles
- Bot Messages — background and text color of bot message bubbles
- Header Text Color — color of the title and subtitle in the widget header
Tutto ciò che lascia intatto viene calcolato automaticamente per garantire un buon contrasto. Ogni sovrascrittura ha un pulsante Reset to automatic per tornare al colore calcolato.
Dimensioni e Stile
| Setting | Range | Default |
|---|---|---|
| Border Radius | 0–32 px | 24 px |
| Width | 300–500 px | 380 px |
| Height | 400–700 px | 600 px |
Su schermi mobili piccoli il widget passa automaticamente a un layout a tutta larghezza, indipendentemente da queste dimensioni.
Logo
Attivi Use company logo in widget header per mostrare il logo della sua azienda nell'intestazione della chat. Il logo viene caricato nelle Company Settings — consigliato: quadrato, almeno 200×200 px (JPG, PNG, GIF, WebP o SVG, max. 5 MB).
Questa opzione è disponibile nel piano Professional e superiori, e in tutti i piani Agency.
Titolo Header, Sottotitolo & Testo della Bubble
| Field | Description | Default |
|---|---|---|
| Header Title | Title shown in the chat window header | "Chat with us" |
| Header Subtitle | Smaller line below the title | "We typically reply within minutes" |
| Bubble Text | Text displayed next to the chat bubble when the widget is closed | None |
Se non imposta mai un titolo o un sottotitolo, il widget mostra il testo predefinito — localizzato automaticamente nella lingua di ciascun visitatore.
How the header subtitle works: As long as you haven't configured a subtitle, the widget shows the localized default, and the settings form pre-fills this default so you can see and edit what visitors get. To hide the subtitle entirely, clear the field and save — an intentionally emptied subtitle stays hidden.
Il testo della bubble appare come una piccola etichetta accanto alla bubble chiusa (es. "Got questions?"). Lasci il campo vuoto per mostrare soltanto la bubble rotonda.
Traduzioni del Widget
Se il suo chatbot supporta più lingue, una scheda Widget Translations appare sotto le impostazioni dell'aspetto. Lì può tradurre il messaggio di benvenuto, il messaggio di fallback, il titolo dell'header, il sottotitolo dell'header e il testo della bubble per ciascuna lingua abilitata.
The welcome and fallback messages themselves are configured in the Persona tab of your chatbot settings.
Anteprima Live
La colonna di destra della scheda Widget mostra una Live Preview del suo widget che si aggiorna mentre modifica le impostazioni. È interattiva: chiuda la finestra di chat con la X per vedere la bubble chiusa (incluso il suo testo della bubble), e clicchi la bubble per riaprirla.
Scheda Behavior: Interazione
Impostazioni di Comportamento
| Setting | Description | Default |
|---|---|---|
| Proactive Greeting | Bot greets visitors automatically after a delay (1–10 seconds) | On, 3 s |
| Auto-Open | Widget opens automatically for visitors after a delay (1–15 seconds) | Off, 5 s |
| Sound Enabled | Play sounds for notifications | On |
| Typing Indicator | Show an animation while the bot is typing | On |
| Pre-Chat Form | Capture visitor info before the chat starts | Off |
| Show on Mobile | Display the widget on mobile devices | On |
Lunghezza Massima del Messaggio
Limiti il numero di caratteri che i visitatori possono inserire per messaggio (100–10.000 caratteri, predefinito 2.000). Questo aiuta a prevenire un uso eccessivo dovuto a input molto lunghi. Svuoti il campo o clicchi Remove limit per consentire messaggi di qualsiasi lunghezza.
Pre-Chat Form
Quando il pre-chat form è abilitato, i visitatori compilano un breve modulo prima che la conversazione inizi. Lei configura i campi:
- Field types: Text, Email, Phone, Textarea
- Ogni campo ha un label, un placeholder opzionale e un toggle required
- Riordini i campi con i pulsanti muovi su/giù, o li rimuova
Se il suo chatbot supporta più lingue, sotto l'editor dei campi appare una sezione traduzioni. Inserisca manualmente le traduzioni per ciascuna lingua, o clicchi Translate with AI per tradurre automaticamente tutte le etichette e i placeholder.
Live Chat
La scheda Behavior contiene anche la card Live Chat Settings. Abiliti il live chat per permettere ai visitatori di parlare con i suoi operatori umani, e scelga una modalità:
| Mode | Description |
|---|---|
| Handoff Only | Live chat only when the bot can't help |
| Standalone | Visitors can chat directly with agents |
| Both | Handoff and direct live chat available |
Live Chat è disponibile nel piano Professional e superiori, e in tutti i piani Agency. Veda Live Chat per gestire le conversazioni in arrivo.
Branding
Nei piani che includono white-label, una card Branding appare in fondo alla scheda Behavior. Il branding ChatReact è nascosto per impostazione predefinita in questi piani — abiliti Show "Powered by ChatReact" se desidera visualizzarlo comunque nel footer del widget.
Fase di Apprendimento
Quando un nuovo chatbot è nella sua fase di apprendimento, può controllare quanto cautamente risponde — Cautious, Balanced (consigliato) o Confident — nella scheda Confidence della stessa pagina delle impostazioni. Questa scheda appare nei piani che includono l'Improvement Agent. Veda la guida Improvement Agent per i dettagli.