> For the complete documentation index, see [llms.txt](https://smartypilot.gitbook.io/smartypilot/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smartypilot.gitbook.io/smartypilot/chatbot-ai/layout.md).

# Layout

In questa sezione puoi personalizzare l'aspetto del chatbot: i colori della finestra di chat, il pulsante che appare sul sito e, per gli utenti più avanzati, il codice di stile aggiuntivo.

<figure><img src="/files/H6pCMq4vqLQPzTJ2AbZg" alt=""><figcaption><p>La pagina Layout del chatbot</p></figcaption></figure>

{% hint style="warning" %}
Ogni modifica effettuata in questa sezione non avrà effetto finché non svuoti la cache del chatbot. Vai alla sezione [Clear cache](/smartypilot/ricerca/clear-cache.md) e svuota la cache del chatbot dopo ogni salvataggio.
{% endhint %}

## Colori

Puoi impostare tre colori principali per la finestra di chat:

* **Primario**: il colore principale dell'interfaccia, usato per l'intestazione della chat e gli elementi in primo piano.
* **Secondario**: un colore di supporto usato per i dettagli grafici.
* **Testo**: il colore del testo all'interno della finestra di chat.

Per modificare un colore:

1. Clicca sul riquadro del colore che vuoi cambiare.
2. Usa il selettore per scegliere il colore desiderato.
3. Clicca su **Salva** nel selettore per confermare la scelta.
4. Clicca sul pulsante **Salva** della pagina per salvare tutte le impostazioni.

## Pulsante di apertura del chatbot

Il pulsante è l'elemento visibile sul tuo sito che i clienti cliccano per aprire la chat. Puoi personalizzarlo in diversi modi.

### Dimensione

Scegli la dimensione del pulsante tra tre opzioni:

* **Piccolo**
* **Medio**
* **Grande**

### Elemento grafico

Puoi scegliere cosa mostrare all'interno del pulsante:

* **Solo testo, nessuna icona o immagine**: il pulsante mostra solo il testo.
* **Icona "Robot"**: un'icona a tema robot.
* **Icona "Messaggio"**: un'icona a tema messaggio/chat.
* **Icona "Chatbot"**: un'icona stilizzata da chatbot.
* **Upload immagine personalizzata**: puoi caricare una tua immagine (JPG, PNG o GIF, dimensioni consigliate 80×80 px, massime 150×150 px, peso massimo 450 KB).

### Testo del pulsante

Puoi scegliere se mostrare un testo accanto all'icona. Se attivi l'opzione, inserisci il testo desiderato nel campo apposito (massimo 50 caratteri). Se lasci il campo vuoto, verrà usato il nome del chatbot.

Se il tuo chatbot parla più di una lingua, sopra al campo compare la tendina **Lingua del testo**:

1. Scegli la lingua dalla tendina.
2. Scrivi il testo del pulsante in quella lingua.
3. Ripeti per le altre lingue che vuoi personalizzare.
4. Clicca su **Salva**: un unico salvataggio scrive tutte le lingue.

Le lingue che lasci vuote usano il testo della lingua predefinita, quella che imposti nelle [Impostazioni generali](/smartypilot/chatbot-ai/impostazioni.md).

Nella stessa pagina trovi un'anteprima dal vivo del pulsante, che si aggiorna man mano che modifichi le impostazioni.

## Stili aggiuntivi (CSS)

In fondo alla pagina c'è un editor per il **codice di stile aggiuntivo del chatbot**. Serve a ritoccare l'aspetto della finestra di chat oltre a quello che permettono i campi qui sopra: è pensato per chi sa scrivere CSS. Se non ti serve, lascialo vuoto.

## Codice Chatbot

L'ultima card contiene lo **snippet da incollare nel tuo sito**, con un pulsante per copiarlo. Va inserito prima del tag di chiusura `</body>` di ogni pagina in cui vuoi il chatbot.

{% hint style="info" %}
Se usi uno dei plugin ufficiali Smartypilot ([WordPress](/smartypilot/cms-supportati/cms-supportati/wordpress.md), [PrestaShop](/smartypilot/cms-supportati/cms-supportati/prestashop.md), [OpenCart](/smartypilot/cms-supportati/cms-supportati/opencart.md)) non devi copiare niente: al codice ci pensa il plugin.
{% endhint %}

## Come salvare le modifiche

1. Configura i colori e il pulsante come desiderato.
2. Clicca su **Salva**.
3. Vai alla sezione [Clear cache](/smartypilot/ricerca/clear-cache.md) e svuota la cache del chatbot per rendere visibili le modifiche sul tuo sito.