Personalizzare l'aspetto del widget di chat
Imposta tema, font, colori, angoli, avatar, bolla, messaggi di benvenuto e piè di pagina del widget, aprilo in automatico o importa logo e colori dal sito.
Nella scheda Appearance (Aspetto) decidi come appare il widget di chat e cosa dice prima che il visitatore scriva. Il tuo sito carica queste impostazioni da intoCHAT a ogni visualizzazione di pagina, quindi non devi mai modificare il codice di incorporamento per cambiarle.
Dove trovarla
Apri il tuo agente e seleziona la scheda Appearance. La Live preview (anteprima dal vivo) accanto ai controlli mostra il widget come apparirà, con la bolla sul lato scelto. Sugli schermi più piccoli tocca invece il pulsante Preview.
Le modifiche vanno online solo quando clicchi Save changes in alto nella pagina. Poi ricarica il tuo sito per vederle.
Abbinare il tuo sito
In Match your website inserisci il tuo dominio e clicca Detect branding. intoCHAT legge la tua home page e propone un logo e quattro colori. Non cambia nulla finché non applichi la proposta:
- Apply colours & logo imposta tutti e quattro i colori e usa il logo come avatar dell'agente.
- Colours only imposta solo i colori e mantiene l'avatar attuale.
Se il colore del tuo brand è troppo chiaro per un testo bianco, l'importazione lo scurisce. Il logo viene ritagliato in un cerchio, quindi un simbolo quadrato funziona meglio di un logotipo largo. L'icona della bolla non viene mai modificata. Una ricerca non consuma crediti di crawl.
Testi
| Campo | Cosa fa |
|---|---|
| Welcome message (benvenuto) | Il primo messaggio dell'agente in ogni nuova chat, fino a 500 caratteri. Se vuoto: Hello! How can I help you today? Con Add another message ne aggiungi fino ad altri 3 della stessa lunghezza. Ognuno compare come fumetto a sé dopo il primo. |
| Suggested questions (domande suggerite) | Fino a 6 domande di massimo 120 caratteri, mostrate come pulsanti sopra la casella di testo finché il visitatore non invia il primo messaggio. Un clic invia la domanda. |
| Launcher tooltip | L'etichetta accanto alla bolla. Compare un secondo dopo il caricamento della pagina, sparisce dopo tre secondi e riappare al passaggio del mouse. Se vuoto: "Chat with" seguito dal nome dell'agente, per esempio "Chat with Example Bikes". |
| Input placeholder (segnaposto) | Il testo di suggerimento nella casella di testo. Se vuoto: Type your message... |
| Footer text (piè di pagina) | Una nota in piccolo sotto la casella di testo, per esempio un avviso sulla privacy, fino a 300 caratteri. Gli indirizzi web che iniziano con http:// o https:// diventano link che si aprono in una nuova scheda. Si trova sopra la dicitura "Powered by intoCHAT". |
I testi predefiniti sono in inglese. Se il tuo sito è in italiano, inserisci i tuoi testi. L'agente risponde nella lingua del visitatore, ma questi testi appaiono esattamente come li scrivi. Su un sito multilingue tienili brevi e nella tua lingua principale.
Immagini
- Agent avatar compare accanto a ogni messaggio dell'agente, non nell'intestazione. Senza avatar, i messaggi mostrano "AI". Usa un'immagine quadrata di almeno 64 × 64 pixel.
- Launcher icon sostituisce l'icona predefinita con le scintille. Un'icona personalizzata riempie l'intera bolla di 56 pixel, quindi il colore della bolla non si vede più.
Entrambe accettano PNG, JPG, GIF o WebP fino a 5 MB.
Stile
In Style (stile) imposti il tema, il font e gli angoli della finestra di chat.
| Tema | Cosa vedono i visitatori |
|---|---|
| Light (chiaro) | Una finestra bianca, come il widget è sempre stato. È l'impostazione predefinita. |
| Dark (scuro) | Una finestra scura. |
| Auto | Chiaro o scuro, secondo l'impostazione del dispositivo di ogni visitatore. La finestra cambia se il visitatore modifica l'impostazione mentre la chat è aperta. |
Con il tema scuro, i colori di intestazione, messaggi del visitatore e bolla restano come li hai impostati. I messaggi dell'agente diventano grigio scuro solo finché usano ancora il grigio chiaro predefinito; un colore scelto da te resta. Con Auto, la Live preview ha i pulsanti Light e Dark per controllare entrambe le varianti.
Font vale per tutto ciò che sta nella finestra di chat: System default, Inter, Roboto, Open Sans, Lato, Poppins o Serif (Georgia). System default e Serif usano font già presenti sul dispositivo del visitatore. I web font sono forniti da intoCHAT, e i visitatori scaricano solo quello che scegli. Il tooltip e il pop-up di benvenuto sulla tua pagina mantengono il font di sistema.
Corners (angoli) stabilisce quanto sono arrotondati i fumetti dei messaggi, la casella di testo, il pulsante di invio, le domande suggerite e i pulsanti personalizzati: Sharp (netti), Soft (morbidi) o Rounded (arrotondati). Soft è l'impostazione predefinita e corrisponde all'aspetto che il widget aveva prima di questa opzione.
Colori
Parti da uno dei modelli in Colours (Ink, Ocean, Forest, Plum, Ember), poi regola ogni campo con il selettore o con un valore esadecimale.
| Colore | Dove si usa |
|---|---|
| Header | La barra in alto della chat, con il nome dell'agente |
| Launcher bubble | La bolla rotonda e il pulsante di invio |
| Visitor messages | Lo sfondo dei messaggi del visitatore |
| Agent messages | Lo sfondo dei messaggi dell'agente |
Posizione
In Placement imposta Side of the screen su sinistra (left) o destra (right). La bolla si trova a 20 pixel da quell'angolo in basso. Su desktop la chat si apre sopra di essa in una finestra di 380 × 600 pixel. Sugli schermi larghi fino a 768 pixel la chat occupa tutto lo schermo. La finestra della chat ha un pulsante di chiusura nell'intestazione, e anche un nuovo clic sulla bolla la chiude.
Rimuovere "Powered by intoCHAT"
L'interruttore Show "Powered by intoCHAT" controlla la piccola dicitura sotto la casella di testo. Nel piano Free l'interruttore è bloccato su attivo, e il link Remove the intoCHAT credit on any paid plan (rimuovi la dicitura con un piano a pagamento) sotto di esso apre le impostazioni di fatturazione. Con qualsiasi piano a pagamento puoi disattivarlo. Vedi i prezzi.
Comportamento della bolla
In Launcher behaviour (comportamento della bolla) trovi due inviti facoltativi che portano i visitatori nella chat senza aspettare un clic. Ognuno ha un interruttore e un ritardo da 0 a 300 secondi sulla pagina.
- Show the welcome message above the launcher mostra i tuoi messaggi di benvenuto come piccoli fumetti accanto alla bolla, dopo 5 secondi se non cambi il ritardo. Il tuo avatar compare accanto al primo, e i messaggi lunghi vengono tagliati dopo quattro righe. Un clic su un fumetto apre la chat. Il pulsante × li chiude.
- Open the chat automatically apre da sola la finestra di chat, dopo 10 secondi se non cambi il ritardo. Non avviene sugli schermi larghi fino a 768 pixel, dove la chat coprirebbe tutto lo schermo.
Una visita dura finché il visitatore non chiude la scheda del browser. L'apertura automatica avviene al massimo una volta per visita. Il pop-up ricompare a ogni nuova pagina finché il visitatore non lo chiude. Nessuno dei due compare più per il resto della visita una volta che il visitatore ha aperto o chiuso la chat, ha chiuso il pop-up, oppure la chat si è aperta in automatico. Se sono attivi entrambi, arriva prima quello con il ritardo più breve, e aprire la chat toglie un pop-up visibile.
Problemi comuni
- Le modifiche non compaiono sul sito. Clicca Save changes, poi ricarica la pagina. Il widget carica le impostazioni da capo a ogni caricamento di pagina.
- Il colore della bolla non cambia. È impostata un'icona della bolla che copre il colore. Rimuovila per usare di nuovo il colore.
- "Logo could not be imported". I colori sono stati applicati comunque. Carica tu un logo in Agent avatar.
- Il pop-up o l'apertura automatica non compaiono. Entrambi si fermano per il resto della visita dopo che la chat è stata aperta, chiusa o il pop-up chiuso, e l'apertura automatica anche dopo essere avvenuta una volta. Per provare di nuovo, apri il sito in una nuova scheda. L'apertura automatica non avviene mai sugli schermi larghi fino a 768 pixel.
Poi installa il widget con un tag script oppure guarda le altre piattaforme.