Widget Web

Widget Web

Le Widget Web vous permet d’intégrer une fenêtre de chat en direct alimentée par votre bot IA directement sur n’importe quel site web. Personnalisez-le pour correspondre à votre marque et déployez-le en quelques minutes.

Installation

1. Accédez à Canaux → Widget Web dans le menu de gauche.

2. Cliquez sur Créer un widget et donnez-lui un nom.

3. Configurez les paramètres du widget (voir Personnalisation ci-dessous).

4. Copiez l’extrait de code d’intégration fourni.

5. Collez l’extrait dans le HTML de votre site web, juste avant la balise de fermeture </body>.

6. Enregistrez et publiez votre site — le widget apparaîtra immédiatement.

Code d’intégration

<!-- Clienta.ai Web Widget -->
<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
  };
</script>
<script
  src="https://api.clienta.ai/widget/YOUR_WIDGET_ID/loader.js"
  async
></script>

Remplacez YOUR_BOT_ID et YOUR_WIDGET_ID par les valeurs affichées dans votre tableau de bord.

Note

Le script du widget se charge de manière asynchrone et ne bloquera pas le chargement de votre page.

Personnalisation

Option	Description
Couleur du thème	Définissez la couleur principale pour correspondre à votre marque (code hexadécimal ou sélecteur de couleur)
Message de bienvenue	Le premier message affiché lorsqu’un utilisateur ouvre le widget
Position	Choisissez le placement en bas à droite ou en bas à gauche de l’écran
Avatar	Téléchargez une image d’avatar personnalisée pour le bot

Les options supplémentaires incluent :

• Titre du widget — Nom affiché dans l’en-tête du widget
• Texte d’espace réservé — Texte d’indication dans la zone de saisie des messages
• Délai d’ouverture automatique — Ouvrir automatiquement le widget après N secondes (optionnel)
• Masquer sur mobile — Activer/désactiver la visibilité du widget sur les appareils mobiles

Fonctionnement

1. L’utilisateur ouvre le widget — La fenêtre de chat s’ouvre en glissant depuis le coin de la page.

2. Message envoyé au bot — Le message de l’utilisateur est envoyé à Clienta.ai via une connexion WebSocket sécurisée.

3. L’IA traite et répond — Le bot récupère le contenu pertinent de la base de connaissances et génère une réponse.

4. Transfert à un humain si nécessaire — Si la confiance est faible ou si l’utilisateur demande un humain, la conversation est acheminée vers un agent disponible via la boîte de réception Conversations.

Formulaire de contact

v1.6.8

Lorsque le bot IA est hors ligne ou incapable de répondre, le widget affiche une bulle CTA invitant le visiteur à laisser ses coordonnées. Appuyer sur la bulle ouvre un formulaire de contact :

Champ	Requis	Notes
E-mail	Oui	Toujours requis pour le suivi
Téléphone	Non	Inclut un sélecteur d’indicatif pays (+66, +1, +81, +86)
Nom	Non	Nom du visiteur
Message	Non	Contexte supplémentaire

La soumission du formulaire de contact crée un ticket visible dans la page Tickets de l’administration, affichant l’e-mail et le téléphone lorsqu’ils sont fournis.

Nouveau chat après résolution

v1.6.8

Lorsqu’un agent résout une conversation, le widget affiche une notification système et un bouton « Démarrer un nouveau chat ». En cliquant dessus :

1. L’historique de la conversation actuelle est effacé
2. Une nouvelle session WebSocket est établie
3. Le widget revient à son état initial

Cela permet aux visiteurs de démarrer une nouvelle conversation sans actualiser la page.

WebSocket en temps réel

Le widget utilise une connexion WebSocket persistante pour une messagerie en temps réel à faible latence. Comportements clés :

• Reconnexion automatique — Le client se reconnecte automatiquement si la connexion est interrompue.
• Indicateur de frappe — Affiche une animation de frappe pendant que le bot génère une réponse.
• Indicateur de frappe de l’agent — v1.6.8 Lorsqu’un agent humain rédige une réponse, le widget affiche une animation de frappe au visiteur en temps réel.
• Historique des messages — L’historique des conversations est conservé au sein de la même session de navigateur.
• Synchronisation multi-onglets — Si l’utilisateur a plusieurs onglets ouverts, l’état de la conversation est synchronisé.

Réponses en Markdown

v1.6.4

Les messages de l’IA et des agents sont rendus en markdown formaté plutôt qu’en texte brut. La mise en forme prise en charge inclut :

• Gras, italique, barré
• Liens (s’ouvrent dans un nouvel onglet automatiquement)
• code en ligne et blocs de code délimités
• Listes ordonnées et non ordonnées
• Titres, citations en bloc et tableaux

Tout le contenu markdown est assaini avec une liste blanche stricte pour prévenir les attaques XSS. Aucune configuration n’est nécessaire — le rendu markdown est activé par défaut pour toutes les réponses de l’IA et des agents. Les messages des utilisateurs restent en texte brut.

Avatar de marque

v1.6.4

Affichez le logo de votre marque ou un avatar personnalisé dans l’en-tête du widget et sur l’écran d’accueil. Définissez avatarUrl dans Paramètres → Canaux → Web → Personnaliseur ou transmettez-le en tant que config.theme.avatarUrl dans le code d’intégration.

• Seules les URL https:// sont acceptées
• Si l’URL est invalide ou que l’image ne se charge pas, l’icône d’étincelle par défaut est affichée
• Recommandé : une image carrée (ex. 128 × 128 px) pour de meilleurs résultats

Voir Personnalisation du widget — Avatar pour plus de détails.

Étiquettes IA vs Humain

v1.6.4

Chaque message non utilisateur affiche une petite étiquette d’auteur identifiant l’expéditeur :

Type d’auteur	Étiquette affichée
Bot IA	« Assistant IA » (localisé)
Agent humain	Nom de l’agent (ex. « Sarah »)

Les étiquettes sont localisées dans les 15 langues prises en charge et accessibles aux lecteurs d’écran. Cela aide les visiteurs à distinguer clairement les réponses générées par l’IA des réponses humaines, favorisant les bonnes pratiques de transparence.

Langue du message de bienvenue

v1.6.2

Le message de bienvenue du widget prend en charge trois modes de langue, configurés dans Paramètres → Canaux → Web → Personnaliseur → Mode de bienvenue :

Mode	Comportement
Statique	Affiche le même message de bienvenue à chaque visiteur quelle que soit la langue
Correspondance visiteur	Affiche un message de bienvenue par langue — configurez un texte de bienvenue différent pour chacune des 15 locales
Langue principale de l’org	Affiche toujours le message de bienvenue dans la langue de réponse principale de l’organisation (définie dans Paramètres IA)

En mode Correspondance visiteur, toute locale sans message de bienvenue configuré revient au texte de bienvenue statique.

Voir Personnalisation du widget — Mode de bienvenue pour la configuration étape par étape.

Sélecteur de langue

v1.6.2

Le widget peut afficher une icône de globe dans l’en-tête permettant aux visiteurs de choisir explicitement leur langue préférée. Cette fonctionnalité est désactivée par défaut et doit être activée par widget dans Paramètres → Canaux → Web → Personnaliseur.

Lorsqu’elle est activée :

• Une icône de globe (🌐) apparaît dans l’en-tête du widget
• Les visiteurs peuvent choisir parmi jusqu’à 15 locales prises en charge
• La sélection d’une langue verrouille toutes les réponses de l’IA dans cette langue pour la session, remplaçant la détection automatique
• Le verrouillage persiste même si le visiteur saisit dans une autre langue

Note

Le verrouillage du sélecteur de langue a la priorité sur la détection automatique, mais peut être remplacé par le paramètre Forcer cette langue dans Paramètres IA. Si Forcer est activé, la langue de l’organisation l’emporte toujours quelle que soit la sélection du visiteur.

Prise en charge RTL (droite à gauche)

v1.6.2

Le widget et la page d’accueil prennent entièrement en charge les mises en page RTL pour l’arabe et l’hébreu. Lorsqu’un visiteur utilise une locale RTL :

• La mise en page entière se reflète (alignement du texte, navigation, éléments d’interface)
• L’attribut <html dir="rtl"> est défini automatiquement
• Les messages de chat et la zone de saisie s’alignent correctement pour la lecture RTL

Aucune configuration manuelle n’est nécessaire — le RTL s’active automatiquement en fonction de la locale sélectionnée.

Délai de chargement avec interface de repli

v1.6.5

Si le script du widget (widget.js) ne se charge pas dans les 10 secondes, l’intégration affiche une interface de repli au lieu de laisser un espace vide. L’interface de repli comprend un bouton de réessai pour que le visiteur puisse tenter de recharger le widget sans actualiser la page.

Cela protège l’expérience utilisateur en cas de problèmes réseau, de bloqueurs de publicités ou de pannes CDN empêchant le montage du widget.

Limites de canaux par forfait

Forfait	Canaux max
Gratuit	1
Starter	2
Growth	5
Plus	6
Pro	15
Scale	30
Entreprise	50

Astuce

Vous avez besoin du widget sur plusieurs domaines ? Chaque domaine nécessite sa propre configuration de widget. Créez un widget par domaine pour suivre les analyses séparément.