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 fermante </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 un 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 comprennent :

• Titre du widget — Nom affiché dans l’en-tête du widget
• Texte de remplacement — Texte d’indication à l’intérieur de la zone de saisie du message
• Délai d’ouverture automatique — Ouvre automatiquement le widget après N secondes (facultatif)
• 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 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 un ballon d’appel à l’action invitant le visiteur à laisser ses coordonnées. Appuyer sur le ballon ouvre un formulaire de contact :

Champ	Requis	Notes
E-mail	Oui	Toujours requis pour le suivi
Téléphone	Non	Comprend un sélecteur de code pays avec 37 pays et des drapeaux emoji (par ex. 🇹🇭 +66, 🇺🇸 +1, 🇬🇧 +44, 🇯🇵 +81). La validation côté serveur garantit que les codes soumis sont valides.
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 un avis système et un bouton « Démarrer un nouveau chat ». En cliquant dessus :

1. L’historique de la conversation en cours est effacé
2. Une reconnexion s’établit avec une nouvelle session WebSocket
3. Le widget revient à son état initial

Cela permet aux visiteurs de démarrer une nouvelle conversation sans rafraîchir 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 saisit 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 entre 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é au lieu de texte brut. La mise en forme prise en charge comprend :

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

Tout le contenu markdown est assaini avec une liste d’autorisation 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 l’avatarUrl dans Paramètres → Canaux → Web → Personnaliseur ou transmettez-le en tant que config.theme.avatarUrl dans le code d’intégration.

• Seules les URLs https:// sont acceptées
• Si l’URL est invalide ou si l’image ne se charge pas, l’icône étincelle par défaut est affichée
• Recommandé : une image carrée (par 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 (par 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 meilleures pratiques de transparence.

Langue du message d’accueil

v1.6.2

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

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

En mode Correspondre au visiteur, toute locale sans message d’accueil configuré revient au texte d’accueil statique.

Voir Personnalisation du widget — Mode d’accueil pour une 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 :

• L’ensemble de la mise en page 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 de droite à gauche

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

Interface de secours en cas d’expiration du délai de montage

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 secours au lieu de laisser un espace vide. La solution de secours comprend un bouton de nouvelle tentative permettant au visiteur d’essayer de recharger le widget sans rafraîchir la page.

Cela protège l’expérience utilisateur lorsque des problèmes réseau, des bloqueurs de publicités ou des pannes de CDN empêchent le widget de se monter.

Refonte visuelle du widget

v1.6.8

Le widget a reçu une actualisation visuelle dans la v1.6.8 avec un aspect moderne et soigné :

• En-tête dégradé — L’en-tête du widget utilise un dégradé subtil basé sur la couleur de votre thème, avec un point de statut et un affichage d’avatar.
• Bulles de messages arrondies — Les bulles de chat utilisent un rayon de bordure plus grand (rounded-2xl) pour un aspect plus doux.
• Ouverture/fermeture animée — Le widget entre et sort avec des animations CSS fluides au lieu d’apparaître instantanément.
• Lanceur repensé — Le lanceur de bulles de chat est un squircle de 60px avec une ombre lumineuse aux couleurs de la marque et une animation d’entrée.
• Basculement du mode sombre — Un bouton de basculement dans l’en-tête du chat permet aux visiteurs de passer entre le mode clair et le mode sombre pendant leur session.
• Anneaux de focus thématiques — Les champs de saisie affichent des anneaux de focus aux couleurs de la marque pour l’accessibilité.
• Badge de notification — Un badge de messages non lus apparaît sur la bulle du lanceur.

Ces changements visuels s’appliquent automatiquement — aucune modification de configuration n’est nécessaire.

Puces de citation

v1.6.5

Lorsque le bot IA répond avec des informations provenant de votre base de connaissances, des puces de citation apparaissent sous le message. Chaque puce représente un document récupéré qui a contribué à la réponse.

Comportement	Description
Affichage des puces	Affiche jusqu’à 3 puces de titre de document. Si davantage de sources ont été utilisées, une puce « +N autres » indique des citations supplémentaires.
Cliquer pour développer	Cliquer sur une puce bascule un extrait en ligne affichant les 200 premiers caractères du contenu récupéré. Un seul extrait peut être ouvert à la fois.
Troncature du titre	Les titres de documents longs sont tronqués à 40 caractères avec une ellipse.
Thématisation	Les puces utilisent la couleur principale de votre widget comme teinte subtile, avec une prise en charge complète du mode sombre et du RTL.
Accessibilité	Les puces sont navigables au clavier avec des étiquettes ARIA appropriées (aria-expanded), des rôles de liste et une prise en charge des lecteurs d’écran.

Les puces de citation donnent aux visiteurs une transparence sur l’origine de la réponse du bot, renforçant la confiance dans les réponses de l’IA. Aucune configuration n’est requise — les citations apparaissent automatiquement lorsque le pipeline RAG récupère des documents pertinents.

Défilement automatique

v1.6.8

Le widget fait défiler automatiquement jusqu’au dernier message à chaque fois qu’un nouveau contenu arrive. Cela s’applique à :

• Les nouveaux messages du bot IA ou d’un agent humain
• Le contenu en streaming pendant que le bot génère une réponse en temps réel

Le défilement utilise une animation fluide pour que la transition paraisse naturelle. Aucune configuration n’est nécessaire — le défilement automatique est toujours actif.

Limites de canaux par forfait

Forfait	Canaux maximum
Free	1
Starter	2
Growth	5
Plus	6
Pro	15
Scale	30
Enterprise	50

Astuce

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.