# 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. Anche il tooltip della bolla e il pop-up di benvenuto seguono il tema: bianchi con testo scuro, oppure grigio scuro con testo chiaro.

**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 della bolla e il pop-up di benvenuto stanno sulla tua pagina, fuori dalla finestra di chat, quindi intoCHAT non può caricare font per loro. Chiedono il font scelto per nome e lo usano se la tua pagina o il dispositivo del visitatore lo hanno; altrimenti usano il font di sistema del dispositivo. Con Serif usano Georgia o un altro font con grazie.

**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](/it/docs/custom-buttons): **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 |

> I colori del testo si adattano automaticamente. Su intestazione, messaggi del visitatore e dell'agente, icona della bolla e pulsante di invio, intoCHAT usa il bianco o un nero quasi pieno (`#111827`), a seconda di quale si legge meglio sul colore scelto. Nella **Live preview** il testo dei messaggi segue la stessa regola.

## 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](/it/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.

> Questo vale solo per la bolla della chat: il [tag script](/it/docs/script-tag), il plugin WordPress e lo snippet Shopify. L'[iframe incorporato e il link diretto](/it/docs/iframe-and-link) non mostrano nessuno dei due inviti.

## 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](/it/docs/script-tag) oppure guarda le [altre piattaforme](/it/docs/other-platforms).