Configuration du widget web - Lovi AI Documentation

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.

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 :

Votre CSS est enregistré avec la configuration du widget.
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.
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 :

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

Agrandir le texte des messages :

.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}

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

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

Donner plus d’air à la zone de saisie :

.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 ! 🚀

​🎛️ Vue d’ensemble de vos widgets

​🎨 Personnaliser votre widget (Le cours d’art)

​1. Les bases

​2. Message flottant (L’accroche 🪝)

​3. Apparence (L’habit fait le moine)

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

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

​🛠️ Ajustements supplémentaires et mise en page

​🎨 CSS personnalisé — Le guide du designer

​⚙️ Comment ça marche en coulisses

​🧩 Sélecteurs que vous pouvez utiliser

​💡 Exemples pratiques

​🧪 Essai routier (Playground)