> ## 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.

# Configuration du widget web

> Dans cette section, vous apprendrez comment intégrer et personnaliser le widget web de Lovi pour qu'il corresponde parfaitement au design et aux fonctionnalités de votre site 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" />

C'est le pont entre votre Agent intelligent et les visiteurs de votre site web.

Le **Widget Web** est cette petite bulle sympathique dans le coin de l'écran qui dit « Bonjour ! ». L'intégrer est un jeu d'enfant : vous ajoutez simplement un bout de code à votre site, et voilà ! Votre Agent IA est prêt à chatter 24h/24, 7j/7 sans que vous leviez le petit doigt.

### 🎛️ Vue d'ensemble de vos widgets

C'est votre centre de commande des widgets. Ici vous pouvez voir chaque bulle de chat que vous avez créée.

* **Pourquoi en avoir plus d'un ?** Vous pourriez vouloir un « Bot de vente » pour votre page tarifaire et un bot « Support technique » pour votre centre d'aide. Ici vous les gérez tous.
* **Actions clés par widget :**
  * **📋 Copier le script :** Récupérez le code magique à coller sur votre site web.
  * **⚙️ Configurer :** La partie amusante. Ajustez les couleurs, les messages et le comportement (nous y viendrons dans un instant).
  * **🗑️ Supprimer :** Mettez-le à la corbeille si vous n'en avez pas besoin.

***

### 🎨 Personnaliser votre widget (Le cours d'art)

Cliquez sur l'**icône engrenage ⚙️** pour entrer dans le laboratoire de configuration. Rendons ce widget vraiment vôtre.

#### 1. Les bases

* **Agent IA :** Quel cerveau alimente ce chat ? Sélectionnez l'un de vos agents dans la liste.
* **Langues :** Votre site parle anglais, espagnol et français ? Dites-le au widget pour qu'il ne fasse pas mauvaise figure.

#### 2. Message flottant (L'accroche 🪝)

Ne laissez pas votre bot se cacher ! Définissez un message accrocheur qui s'affiche au-dessus de l'icône.

* *Ennuyeux :* « Chattez ici. »
* *Mieux :* « Bonjour ! Besoin d'aide pour votre commande ? 👋 »

> **⚠️ Attention :** Ajoutez des traductions pour toutes vos langues. Vous ne voulez pas que les visiteurs francophones voient une bulle vide !

#### 3. Apparence (L'habit fait le moine)

* **En-tête :** Choisissez ce qui s'affiche en haut. Juste un titre ? Votre logo ? Un avatar de robot avec un monocle ? C'est à vous de décider.
* **Couleurs :** Utilisez l'outil pipette 🖊️ pour correspondre **exactement** à votre marque.
  * *Couleur principale :* Les bulles de message et le bouton d'envoi.
  * *Couleur du texte :* Assurez-vous qu'elle est lisible ! Du texte jaune sur fond blanc est un crime contre la vue.

#### 4. Le gardien : Formulaires de collecte de données 📝

Voulez-vous savoir à qui vous parlez *avant* qu'ils commencent à chatter ? Activez le **Formulaire**.

* Demandez le **nom, l'email ou le téléphone**.
* Rendez les champs « Obligatoires » si vous êtes strict, ou « Optionnels » si vous êtes souple.
* **RGPD / Confidentialité :** Ajoutez un lien vers votre politique pour rester en conformité. 👮‍♂️

#### 5. Collecte de données intelligente (Avancé 🤓)

C'est pour les magiciens de la technique. Le widget peut regarder dans les données de votre site web (`localStorage`) pour voir si l'utilisateur est déjà connecté.

* **En quoi ça aide :** S'il est connecté, le widget peut dire *« Bonjour, Jean ! »* au lieu de demander son nom à nouveau.
* **Configuration :** Vous nous indiquez la « Clé » (ex. `user_email`) et nous récupérons la valeur automatiquement.

***

### 🛠️ Ajustements supplémentaires et mise en page

Affinez l'expérience :

* **Position :** Gauche ou droite ? (Droite est standard, gauche est pour les rebelles).
* **Plein écran :** Vous voulez que le chat occupe tout l'écran mobile ? Activez cette option.
* **Intégration (Élément DOM) :** Au lieu d'une bulle flottante, intégrez le chat de manière permanente dans un `<div>` de votre page. Idéal pour les pages « Contactez-nous ».
* **CSS personnalisé :** Si vous connaissez le code, vous pouvez écrire vos propres styles ici pour remplacer les nôtres. Le ciel est la limite.

***

### 🎨 CSS personnalisé — Le guide du designer

Les couleurs et options prédéfinies vous semblent trop limitées ? Le champ **CSS personnalisé** vous donne un contrôle total sur l'apparence du widget. Vous pouvez y écrire des règles CSS qui ajustent les styles, remplacent les classes par défaut ou ajoutent même des animations.

**Où le trouver :** Ouvrez la configuration du widget (icône ⚙️), dépliez la section **« CSS personnalisé »** et saisissez votre code dans la zone de texte.

#### ⚙️ Comment ça marche en coulisses

Ce que vous écrivez ici n'est pas de la magie — c'est assez prévisible une fois compris :

1. Votre CSS est enregistré avec la configuration du widget.
2. Lorsque le widget se charge sur le site du visiteur, votre CSS est injecté sous forme de balise `<style>` **à l'intérieur du widget lui-même**.
3. Il se charge **après** nos styles par défaut, donc vos règles ont le dernier mot (elles gagnent en cas d'égalité).

> **🎯 Important — Portée :** Le CSS personnalisé **n'affecte que l'intérieur du chat du widget**, pas le reste de votre page web. Vous ne pouvez pas l'utiliser pour redessiner votre site ; uniquement le widget. Et inversement : les styles de votre site ne se glissent pas dans le widget, vous partez donc d'une toile vierge.

> **💪 Ma règle ne s'applique pas ?** Comme nos styles de base sont spécifiques, votre règle « fait match nul » et ne l'emporte pas toujours. Si un changement n'a aucun effet, ajoutez `!important` à la fin de la propriété (ex. `border-radius: 0 !important;`) ou utilisez un sélecteur plus spécifique.

#### 🧩 Sélecteurs que vous pouvez utiliser

Voici les vraies « étiquettes » des éléments du widget. Ciblez-les avec votre CSS :

| Sélecteur                                           | Ce que c'est                                                                            |
| --------------------------------------------------- | --------------------------------------------------------------------------------------- |
| `.widget_chat`                                      | Le conteneur racine de tout le widget                                                   |
| `.widget_chat_window`                               | La fenêtre de chat lorsqu'elle est ouverte                                              |
| `.widget_chat_window_header`                        | L'en-tête supérieur (avatar, titre, boutons)                                            |
| `.widget_chat_window_body`                          | La zone où apparaissent les messages                                                    |
| `.widget_row_message`                               | Chaque ligne de message (utilisez `.widget_row_message_end` pour ceux de l'utilisateur) |
| `.widget_message_bot`                               | Les bulles de message de l'Agent                                                        |
| `.widget_message_content`                           | Le texte à l'intérieur de chaque bulle                                                  |
| `.widget_message_botones` / `.widget_message_boton` | Les boutons de réponse rapide                                                           |
| `.widget_chat_window_footer`                        | La barre inférieure où l'on écrit                                                       |
| `#inputMessage`                                     | Le champ de saisie du message                                                           |
| `.widget_form_submit`                               | Le bouton d'envoi                                                                       |
| `.widget_chat_formulario`                           | Le formulaire de collecte de données (nom, e-mail, etc.)                                |
| `.widget_chat_formulario_body_input_asterisk`       | L'astérisque rouge des champs obligatoires                                              |
| `.widget_chat_window_footer_legends`                | La signature « Generated by lovi.ai » du pied de page                                   |

#### 💡 Exemples pratiques

**Bulles du bot plus carrées avec une ombre :**

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

**Agrandir le texte des messages :**

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

**En-tête avec un dégradé de marque :**

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

**Donner plus d'air à la zone de saisie :**

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

> **🧪 Testez toujours dans le Playground** (voir ci-dessous) avant de publier. Un `}` oublié peut casser plusieurs styles d'un coup.

***

### 🧪 Essai routier (Playground)

Avant de coller le code sur votre site en production, faites un essai dans le **Playground**.

* Les couleurs jurent-elles ?
* L'Agent est-il poli ?
* Le formulaire fonctionne-t-il ?

**Une fois que vous êtes satisfait, copiez ce script et mettez en ligne ! 🚀**