> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Configurazione Web Widget

> In questa sezione, imparerai come integrare e personalizzare il web widget di Lovi per adattarlo perfettamente al design e alla funzionalità del tuo sito web

<img src="https://mintcdn.com/lovi/O5wVbHgTE_jPQc6B/images/WidgetsList.png?fit=max&auto=format&n=O5wVbHgTE_jPQc6B&q=85&s=6975ebc2214376c1e59e012e4bf9a0ef" alt="Web Widget List" width="1682" height="479" data-path="images/WidgetsList.png" />

Questo è il ponte tra il tuo Agente intelligente e i visitatori del tuo sito web.

Il **Web Widget** è quella simpatica bolla nell'angolo dello schermo che dice "Ciao!". Integrarlo è semplicissimo: aggiungi uno snippet di codice al tuo sito, e voilà! Il tuo Agente AI è pronto a chattare 24/7 senza che tu debba muovere un dito.

### 🎛️ Panoramica dei tuoi Widget

Questo è il tuo centro di comando dei widget. Qui puoi vedere ogni bolla di chat che hai creato.

* **Perché averne più di uno?** Potresti volere un "Bot Vendite" per la tua pagina dei prezzi e un bot "Supporto Tecnico" per il tuo centro assistenza. Qui li gestisci tutti.
* **Azioni chiave per Widget:**
  * **📋 Copia Script:** Prendi il codice magico da incollare sul tuo sito web.
  * **⚙️ Configura:** La parte divertente. Modifica colori, messaggi e comportamento (ci arriviamo tra poco).
  * **🗑️ Elimina:** Cestinalo se non ti serve più.

***

### 🎨 Personalizzare il tuo Widget (La lezione d'arte)

Clicca sull'**icona dell'ingranaggio ⚙️** per entrare nel laboratorio di configurazione. Rendiamo questo widget davvero tuo.

#### 1. Le basi

* **Agente AI:** Quale cervello alimenta questa chat? Seleziona uno dei tuoi agenti dalla lista.
* **Lingue:** Il tuo sito parla italiano, inglese e francese? Dillo al widget così non fa brutte figure.

#### 2. Messaggio flottante (L'amo 🪝)

Non lasciare che il tuo bot si nasconda! Imposta un messaggio accattivante che appare sopra l'icona.

* *Noioso:* "Chatta qui."
* *Meglio:* "Ciao! Hai bisogno di aiuto con il tuo ordine? 👋"

> **⚠️ Attenzione:** Aggiungi le traduzioni per tutte le tue lingue. Non vuoi che i visitatori italiani vedano una bolla vuota!

#### 3. Aspetto e stile (Vestiti bene)

* **Header:** Scegli cosa mostrare in alto. Solo un titolo? Il tuo logo? Un avatar di un robot con il monocolo? Sta a te.
* **Colori:** Usa lo strumento contagocce 🖊️ per abbinare il tuo brand **esattamente**.
  * *Colore principale:* Le bolle dei messaggi e il pulsante di invio.
  * *Colore del testo:* Assicurati che sia leggibile! Testo giallo su sfondo bianco è un crimine contro la vista.

#### 4. Il guardiano: Moduli di raccolta dati 📝

Vuoi sapere con chi stai parlando *prima* che inizino a chattare? Abilita il **Modulo**.

* Chiedi **Nome, Email o Telefono**.
* Rendi i campi "Obbligatori" se sei rigoroso, o "Facoltativi" se sei rilassato.
* **GDPR / Privacy:** Aggiungi un link alla tua informativa per restare in regola. 👮‍♂️

#### 5. Raccolta dati intelligente (Avanzata 🤓)

Questo è per i maghi della tecnologia. Il widget può sbirciare nei dati del tuo sito web (`localStorage`) per vedere se l'utente è già loggato.

* **Come aiuta:** Se loggato, il widget può dire *"Ciao, Mario!"* invece di chiedere di nuovo il nome.
* **Configurazione:** Ci dici la "Chiave" (es. `user_email`) e noi prendiamo il valore automaticamente.

***

### 🛠️ Modifiche extra e layout

Perfeziona l'esperienza:

* **Posizione:** Sinistra o Destra? (Destra è standard, Sinistra è per i ribelli).
* **Schermo intero:** Vuoi che la chat occupi tutto lo schermo del cellulare? Attiva questo.
* **Embed (Elemento DOM):** Invece di una bolla flottante, fissa la chat permanentemente dentro un `<div>` sulla tua pagina. Ottimo per le pagine "Contattaci".
* **CSS personalizzato:** Se conosci il codice, puoi scrivere i tuoi stili qui per sovrascrivere i nostri. Il cielo è il limite.

***

### 🎨 CSS personalizzato — La guida del designer

I colori e le opzioni predefinite ti stanno stretti? Il campo **CSS personalizzato** ti dà il controllo totale sull'aspetto del widget. Qui puoi scrivere regole CSS che modificano gli stili, sovrascrivono le classi predefinite o aggiungono persino animazioni.

**Dove trovarlo:** Apri la configurazione del widget (icona ⚙️), espandi la sezione **"CSS personalizzato"** e scrivi il tuo codice nell'area di testo.

#### ⚙️ Come funziona sotto il cofano

Quello che scrivi qui non è magia — è abbastanza prevedibile una volta capito:

1. Il tuo CSS viene salvato insieme alla configurazione del widget.
2. Quando il widget si carica sul sito del visitatore, il tuo CSS viene iniettato come tag `<style>` **dentro il widget stesso**.
3. Si carica **dopo** i nostri stili predefiniti, quindi le tue regole hanno l'ultima parola (vincono in caso di parità).

> **🎯 Importante — Ambito:** Il CSS personalizzato **influisce solo sull'interno della chat del widget**, non sul resto della tua pagina web. Non puoi usarlo per ridisegnare il tuo sito; solo il widget. E viceversa: gli stili del tuo sito non si infiltrano nel widget, quindi parti da una tela pulita.

> **💪 La mia regola non si applica?** Poiché i nostri stili di base sono specifici, a volte la tua regola "pareggia" e non vince. Se una modifica non ha effetto, aggiungi `!important` alla fine della proprietà (es. `border-radius: 0 !important;`) o usa un selettore più specifico.

#### 🧩 Selettori che puoi usare

Queste sono le vere "etichette" delle parti del widget. Puntale con il tuo CSS:

| Selettore                                           | Cos'è                                                                         |
| --------------------------------------------------- | ----------------------------------------------------------------------------- |
| `.widget_chat`                                      | Il contenitore radice di tutto il widget                                      |
| `.widget_chat_window`                               | La finestra della chat quando è aperta                                        |
| `.widget_chat_window_header`                        | L'intestazione superiore (avatar, titolo, pulsanti)                           |
| `.widget_chat_window_body`                          | L'area dove appaiono i messaggi                                               |
| `.widget_row_message`                               | Ogni riga di messaggio (usa `.widget_row_message_end` per quelli dell'utente) |
| `.widget_message_bot`                               | Le bolle dei messaggi dell'Agente                                             |
| `.widget_message_content`                           | Il testo dentro ogni bolla                                                    |
| `.widget_message_botones` / `.widget_message_boton` | I pulsanti di risposta rapida                                                 |
| `.widget_chat_window_footer`                        | La barra inferiore dove si scrive                                             |
| `#inputMessage`                                     | Il campo di testo per scrivere il messaggio                                   |
| `.widget_form_submit`                               | Il pulsante di invio                                                          |
| `.widget_chat_formulario`                           | Il modulo di raccolta dati (nome, email, ecc.)                                |
| `.widget_chat_formulario_body_input_asterisk`       | L'asterisco rosso dei campi obbligatori                                       |
| `.widget_chat_window_footer_legends`                | La firma "Generated by lovi.ai" del piè di pagina                             |

#### 💡 Esempi pratici

**Bolle del bot più squadrate con un'ombra:**

```css theme={null}
.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
```

**Ingrandire il testo dei messaggi:**

```css theme={null}
.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}
```

**Intestazione con un gradiente di marca:**

```css theme={null}
.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}
```

**Dare più respiro all'area di scrittura:**

```css theme={null}
.widget_chat_window_footer {
  padding: 14px !important;
}
```

> **🧪 Provalo sempre nel Playground** (vedi sotto) prima di pubblicare. Una `}` dimenticata può rompere più stili in una volta.

***

### 🧪 Test drive (Playground)

Prima di incollare il codice sul tuo sito live, provalo nel **Playground**.

* I colori stonano?
* L'Agente è educato?
* Il modulo funziona?

**Una volta soddisfatto, copia quello script e vai live! 🚀**