# Personalizzazione avanzata dell'interfaccia utente

{% hint style="danger" %}
Questa sezione è riservata agli utenti più esperti della piattaforma.
{% endhint %}

L'interfaccia utente del tuo Agente AIsuru è altamente personalizzabile e ti permette di creare un'esperienza su misura per i tuoi utenti.

### Accesso alle opzioni di personalizzazione

Per iniziare a personalizzare l'interfaccia del tuo Agente, segui questi semplici passaggi:

1. Accedi alla piattaforma;
2. Seleziona l'Agente desiderato;
3. Clicca su "Condividimi" nel menu laterale;
4. Individua l'icona <img src="/files/dvJBrYoEardViq9Jko12" alt="" data-size="line"> nei layout creati e cliccaci sopra per aprire il menu di configurazione del widget.

### Configurazione del layout

In questa sezione, puoi definire l'aspetto generale del tuo Agente:

* **Layout**: scegli tra diverse opzioni disponibili:

  1. **TOTEM**: Un layout specializzato che richiede configurazioni specifiche per posizionamento messaggi e altri elementi, ideale per installazioni fisiche interattive;
  2. **FULLPAGE**: Occupa l'intera pagina web per un'esperienza immersiva dell'utente;
  3. **CHAT**: Un'interfaccia classica in stile chat per interazioni testuali;
  4. **WEBSITE\_ASSISTANT**: Si presenta come un'icona cliccabile in basso a destra del sito, ideale per assistenza web discreta;
  5. **HIDDEN\_CHAT**: Una chat laterale che rimane nascosta fino all'attivazione, progettata per non sovrapporsi con il contenuto principale del sito;
  6. **ZOOMED\_FULL\_BODY**: Questo layout mostra l'avatar a schermo intero ed è particolarmente efficace su dispositivi mobili, offrendo un'esperienza simile al TOTEM ma senza richiedere configurazioni complesse di posizionamento.

  Nota: **WEBSITE\_ASSISTANT e HIDDEN\_CHAT** sono dei layout disponibili solo attraverso l'icona <img src="/files/dvJBrYoEardViq9Jko12" alt="" data-size="line">.
* **Multilingue**: attiva questa opzione per permettere agli utenti di interagire con l'Agente in diverse lingue 🌍;
* **Contesto iniziale**: imposta il contesto di partenza della conversazione;
* **Domanda iniziale**: definisci la prima domanda che l'Agente porrà all'utente;
* **Ruolo**: seleziona il ruolo che l'utente impersonerà all'inizio dell'interazione.

### Personalizzazione della toolbar

Puoi scegliere quali elementi mostrare nella toolbar del widget:

* Mostra Login;
* **Mostra Condividi**: abilita il pulsante di condivisione che permette agli utenti di:
  * Condividere il link dell'Agente su diverse piattaforme social (Facebook, Twitter, LinkedIn, WhatsApp, Telegram);
  * **Condividere la chat corrente** con un link specifico alla conversazione in corso;
  * Inviare il link tramite email o copiarlo negli appunti;
  * Scaricare un QR code per la condivisione rapida.
* Abilita audio;
* Mostra Impostazioni.

### Configurazione delle azioni chat

Personalizza le azioni disponibili durante la conversazione:

* Mostra il tasto cancella chat;
* Mostra solo ultimi messaggi;
* Mostra testo di caricamento;
* Mostra copia messaggio;
* Mostra testo traduzione originale.

### Impostazioni linguistiche

Definisci le preferenze linguistiche per il tuo Agente:

* **Lingua predefinita**: Imposta la lingua con cui l'Agente comunicherà (default: Italiano);
* **Lingua dell'interfaccia**: Scegli la lingua per l'interfaccia utente (default: IT).

### Codice di embed e anteprima

Dopo aver configurato tutte le opzioni, potrai visualizzare e copiare il codice di embed generato. Questo codice ti permetterà di integrare facilmente l'Agente nel tuo sito web o applicazione.

Se il tuo Agente è impostato come privato, agli utenti sarà sempre richiesta la password di accesso. Trovi la password nella sezione Condividimi (sotto il link privato) e nelle Impostazioni dell'Agente.

### Suggerimento tecnico

Per evitare lo zoom automatico su input touch, aggiungi questo meta tag nel `<head>` della tua pagina:

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
```

La personalizzazione avanzata dell'interfaccia utente ti permette di creare un'esperienza unica e su misura per i tuoi utenti. Sfrutta queste opzioni per adattare il tuo Agente AIsuru alle esigenze specifiche del tuo progetto, migliorando l'engagement e l'efficacia della tua soluzione IA. 🚀


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aisuru.com/condivisione/condivisione-sezione-avanzata/personalizzazione-avanzata-dellinterfaccia-utente.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
