> For the complete documentation index, see [llms.txt](https://docs.aisuru.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aisuru.com/condivisione/crea-e-gestisci-i-layout-di-condivisione.md). # Crea e gestisci i layout di condivisione AIsuru offre potenti strumenti di personalizzazione attraverso i layout, che ti permettono di adattare l'aspetto e il comportamento del tuo Agente IA a diversi contesti e piattaforme. Questa funzionalità è essenziale per **creare esperienze utente su misura** e migliorare l'efficacia del tuo assistente virtuale. ### Cos'è un layout? I layout di condivisione sono dei modelli predefiniti che ti permettono di integrare facilmente il tuo Agente in diverse piattaforme o siti web. Sono come **dei template che puoi utilizzare per mostrare il tuo Agente in vari modi**. Ogni layout ha il suo link individuale. ### Creazione di un nuovo layout Per iniziare a personalizzare l'esperienza del tuo Agente IA: 1. **Accedi alla sezione "Condividimi"** del tuo Agente; 2. Clicca su "**Aggiungi layout**" in alto a destra. ### Configurazione base del layout #### Informazioni di base 1. Assegna un **nome** al tuo layout; 2. Scegli il **tipo di layout**: * FULLPAGE: per esperienze immersive a pagina intera; * CHAT: formato compatto per integrazioni in siti web; * ZOOMED\_FULL\_BODY: ideale per vedere l'avatar 3d e la chat con l'agente; * TOTEM: ottimizzato per dispositivi touchscreen. {% hint style="info" %} Sono disponibili anche il layout WEBSITE\_ASSISTANT e HIDDEN CHAT, sono dei formati ad hoc per gli [Agenti incorporati in altri siti web](/condivisione/condividi-i-tuoi-agenti/siti-web-embed.md). Se vuoi selezionare questi tipi di layout, accedi alla [guida avanzata](/condivisione/condivisione-sezione-avanzata/personalizzazione-avanzata-dellinterfaccia-utente.md). {% endhint %} #### Anteprima del layout Durante la configurazione, puoi visualizzare un'**anteprima in tempo reale** di come apparirà il tuo layout nella sezione "Anteprima" sulla destra della schermata. Questa anteprima ti permette di: * Vedere immediatamente l'aspetto del layout selezionato * Verificare come si presenta il tuo Agente con le personalizzazioni applicate * Controllare l'effetto delle modifiche prima di salvare {% hint style="info" %} 💡 L'anteprima si aggiorna automaticamente quando modifichi le impostazioni del layout, permettendoti di perfezionare l'aspetto del tuo Agente in tempo reale. {% endhint %} #### Personalizzazioni estetiche Tra le varie impostazioni del tuo nuovo layout, puoi: 1. Caricare uno **sfondo personalizzato** (PNG, JPG, JPEG, GIF, massimo 2MB); 2. Applicare un **effetto sfocato** allo sfondo per migliorare la leggibilità; 3. Selezionare il **tema interno** (chiaro o scuro) per l'interfaccia di chat. 4. Configurare il tuo **Avatar**; puoi scegliere se avere: 1. Un avatar predefinito (*blob*); 2. Un avatar personalizzato; 3. Un modello 3D custom; 4. Un'immagine di profilo animata. 5. **Colori**: scegli quali colori devono caratterizzare il tuo Agente (testo e pulsanti) utilizzando l'apposito selettore. 💡 Un avatar personalizzato può rendere il tuo Agente più memorabile. Sfruttalo al meglio! #### Personalizzare l'interfaccia È anche possibile personalizzare gli elementi presenti nell'interfaccia con le apposite caselle: 1. **Audio**: puoi attivare o disattivare l'audio del tuo Agente; 2. **Indicatore IA**: se attivo, le risposte generate da IA saranno contrassegnate dall'icona ![](/files/5htxoYnahb6c3BCGbvyD); 3. "**Perché questa risposta?**": se attivo, ogni risposta avrà un pulsante , che, se premuto, mostra i contenuti che hanno aiutato AIsuru a rispondere; 4. **Mostra il ragionamento**: se utilizzi un modello con capacità di reasoning puoi decidere di mostrare il ragionamento con l'utente finale durante la conversazione. Per impostazione predefinita, il ragionamento è visibile solo nella scheda "Conversazioni" per chi gestisce l'Agente, poiché può contenere informazioni sensibili o logiche interne; 5. **Condividi**: abilita le opzioni di condivisione direttamente dal widget, permettendo agli utenti di: * Condividere l'Agente tramite link diretto; * Condividere la conversazione corrente con un link specifico; * Utilizzare piattaforme social integrate (Facebook, Twitter, LinkedIn, WhatsApp, Telegram, Email); * Generare e scaricare QR code per la condivisione. 6. **Caricamento file**: se attivo, l'utente potrà caricare contenuti durante la conversazione cliccando sull'apposito pulsante. Quando attivato, l'utente può scegliere tra: * **Carica documento**: per file testuali (PDF, DOC, TXT) che verranno analizzati dall'Agente * **Carica immagine**: per immagini (JPG, PNG, GIF) che verranno analizzate dall'IA per fornire descrizioni o risposte basate sul contenuto visivo {% hint style="info" %} **Il caricamento di immagini richiede un modello che supporti la visione artificiale.** {% endhint %} #### Multilingua All'interno del layout è possibile attivare o disattivare il multilingua, la funzionalità di traduzione automatica delle domande e delle risposte. L'opzione Multilingua è particolarmente importante per: * **Agenti che utilizzano i contenuti** -> la traduzione automatica permette all'Agente di: * Tradurre le domande degli utenti nella lingua dei contenuti, migliorando la ricerca delle risposte pertinenti; * Tradurre le risposte nella lingua dell'utente. * **Amministratori che devono** [**monitorare le conversazioni**](/analisi-ottimizzazione/analisi-e-ottimizzazione-dellagente/conversazioni.md) -> tutte le conversazioni verranno tradotte nella lingua dell'Agente, indipendentemente da quella usata dall'utente. Il multilingua supporta: italiano, inglese, tedesco, spagnolo, francese, portoghese, ucraino, russo, polacco, finlandese, greco, arabo, cinese e giapponese. {% hint style="info" %} **L'IA generativa può rispondere in qualsiasi lingua** anche senza attivare il multilingua. {% endhint %} ### Configurazione avanzata del layout Se sei un utente più esperto, puoi applicare delle personalizzazioni molto più importanti ai tuoi layout. Vediamo le ultime tre sezioni 👇 ### Codice di embed Dopo aver configurato il layout, AIsuru genererà automaticamente un [codice di embed](/condivisione/codice-di-embed.md). Troverai questo codice nella sezione "Codice di embed". Usalo per [condividere il tuo Agente in altri siti web](/condivisione/condividi-i-tuoi-agenti/siti-web-embed.md)! #### Ottimizzazione SEO (per Google, Bing e tutti i motori di ricerca) In questa sezione puoi personalizzare: * Titolo della pagina (*title*); * Descrizione della pagina (*meta description*); * URL canonico; * Immagine di anteprima per social media. Una volta personalizzati questi elementi, **aggiungi il codice alla tua pagina web**. #### Parametri avanzati Nei parametri avanzati puoi personalizzare: * Il **contesto iniziale** -> se configurato, ogni volta che l'utente comincia una chat sarà impostato uno specifico [contesto](/istruzione-gestione-contenuti-agenti/istruzione-sezione-avanzata/personalizzazione-dei-contenuti/contesto-argomenti-ed-etichette.md); * La **domanda iniziale**: è nascosta all'utente; se impostata, l'utente vedrà la risposta dell'IA come primo messaggio di benvenuto; * Il [**timeout**](/istruzione-gestione-contenuti-agenti/istruzione-sezione-avanzata/personalizzazione-dei-contenuti/utilizzo-del-timeout.md) (in secondi); * Il [**Ruolo**](/istruzione-gestione-contenuti-agenti/istruzione-sezione-avanzata/personalizzazione-dei-contenuti/come-attribuire-contenuti-a-ruoli-specifici.md): chiunque accederà al nostro link sarà automaticamente identificato con il ruolo selezionato; * **Lingua predefinita** e **lingua dell'interfaccia**. Ti ricordiamo che **tutte le impostazioni applicate finora saranno valide per questo specifico layout**, che avrà un link specifico. ### Gestione dei layout multipli La gestione di diversi layout per lo stesso Agente permette di: * Adattare l'esperienza a diversi canali (web, mobile, totem); * Personalizzare l'interazione per i vari segmenti di utenti; * Testare diverse configurazioni per ottimizzare l'engagement. **Layout predefinito (default)** Puoi impostare un layout come predefinito selezionando l'apposita casella nella tabella dei layout. **Importante**: * **Può esserci solo un layout di default per Agente** * Il layout predefinito viene utilizzato automaticamente in due casi: 1. Quando qualcuno accede al link principale del tuo Agente senza specificare un layout particolare 2. **Quando usi il tasto "Prova"** nella barra laterale di gestione dell'Agente Se non imposti nessun layout come default: * Il link principale mostrerà una versione base dell'Agente * Il tasto "Prova" aprirà una chat semplice con l'avatar blob predefinito {% hint style="info" %} 💡 **Consiglio**\ **I**mposta sempre un layout come default per garantire un'esperienza coerente sia per i test che per gli utenti che accedono al tuo Agente. {% endhint %} ### Consigli per un utilizzo efficace * **Sfrutta al massimo la personalizzazione visiva** per creare Agenti coinvolgenti e memorabili; * **Utilizza diversi layout** per testare quale configurazione funziona meglio per il tuo pubblico; * **Aggiorna regolarmente i tuoi layout** in base ai feedback degli utenti. La creazione e gestione attenta dei layout **è fondamentale per offrire un'esperienza IA personalizzata e coinvolgente**. Sperimentare con diverse configurazioni ti aiuterà a trovare la combinazione perfetta per massimizzare l'efficacia del tuo Agente IA: esplora tutte le opzioni disponibili per creare un'esperienza utente davvero unica!