Comment personnaliser un widget chatbot IA et l'intégrer

Ouvrez votre assistant et accédez à Widget Integration → Appearance. Définissez d'abord Widget Width et éventuellement Height, puis sélectionnez Theme, Font Family et Chat Title. Tutorial Lab utilise le thème Modern et le titre “Tutorial Lab” ; laisser la hauteur vide permet au widget d'adopter son comportement responsive par défaut.

Attribuez les couleurs par rôle : arrière-plan et texte de l'en-tête, bulle et texte du bot, bulle et texte du visiteur, arrière-plan et icône du lanceur. L'exemple utilise un en-tête bleu marine avec texte blanc et une bulle visiteur d'un bleu soutenu. Contrôlez chaque paire premier plan/arrière-plan dans l'aperçu affiché, pas uniquement dans le sélecteur de couleur. Le texte normal doit respecter un contraste d'au moins 4.5:1.

Ouvrez Images. Avatar Image s'affiche à côté des messages de l'assistant, Chat Button Image remplace l'icône du lanceur et Welcome Image habille le premier écran avant le début de l'échange. Évitez d'importer un logo horizontal générique partout ; cadrez un visuel adapté à chaque usage.

Utilisez des fichiers PNG ou WebP optimisés avec une silhouette nette. Conservez un format carré pour l'avatar et le lanceur, testez la transparence sur fond clair et sombre, et évitez le texte dans les petites icônes. L'exemple illustré laisse volontairement les visuels optionnels vides, ce qui est parfaitement adapté lorsque l'icône intégrée WebChatAgent s'avère plus lisible qu'un visuel personnalisé mal adapté.

Ouvrez Content & Behavior. Déterminez si le widget est désactivé sur le site, ouvert par défaut, masqué sur mobile ou autorisé à afficher les sources. Vérifiez ensuite les paramètres de microphone, de traduction automatique, de bulle d'accroche et d'exclusion d'URL. Modifiez un réglage à la fois et contrôlez le rendu visuel.

Rédigez un message d'accueil court qui clarifie le rôle de l'assistant. Les boutons d'invite ne se trouvent pas dans cet onglet : ils sont situés sous Buttons & forms, dans la section Quick actions. Ajoutez-y deux ou trois suggestions orientées vers l'action. “Which plan is right for me?” apporte un contexte plus utile que “Learn more.”. Évitez d'ouvrir automatiquement un grand panneau sur toutes les pages ; n'utilisez Triggers qu'après avoir testé le délai, le ciblage des pages, la fermeture et la fréquence dans une session propre.

Ouvrez Positioning. Desktop Offsets et Mobile Offsets définissent des distances indépendantes par rapport au coin sélectionné. Tutorial Lab applique 20 pixels depuis la droite et le bas sur les deux configurations comme base neutre.

Ne testez pas uniquement le lanceur. Ouvrez le widget complet sur la largeur d'écran minimale supportée, avec le bandeau de cookies affiché, l'interface du navigateur mobile déployée et toute barre de navigation, bouton de panier ou de commande fixe visible. Augmentez le décalage approprié jusqu'à ce que le lanceur et le panneau restent accessibles sans masquer les actions principales.

Cliquez sur Test Your Chatbot pour ouvrir l'aperçu visiteur authentifié. Validez le titre, la bulle visiteur bleue, la lisibilité de la bulle assistant, le comportement des invites, le champ de saisie, le bouton de fermeture et la cohérence de la marque. Testez la navigation à la souris puis au clavier ; l'indicateur de focus doit rester visible et se repositionner logiquement après la fermeture du dialogue.

L'exemple vérifié pose la question “What are the support hours?”. Le widget réel répond que les horaires de support de Northstar Services sont du lundi au vendredi, de 8:00 AM à 6:00 PM (de 8 h à 18 h) (heure d'Europe centrale). Ce test valide à la fois la mise en page enregistrée et la pertinence de la réponse issue des sources. Répétez l'opération avec une question volontairement hors périmètre pour vérifier que le design conserve une bonne lisibilité avec un texte de repli plus long.

Faites défiler jusqu'au bloc de code dans Widget Integration et copiez l'intégralité du code HTML, pas seulement l'identifiant du chatbot. Ce bloc charge le script WebChatAgent de manière asynchrone et initialise l'élément personnalisé `web-chat-agent` avec l'identifiant de cet assistant. Collez-le une seule fois avant la balise fermante `body` ou dans la section de code personnalisé global de votre CMS.

Renseignez les noms d'hôte exacts de préproduction et de production dans Allowed Websites avant de tester. Si votre politique de gestion des consentements bloque les widgets tiers non essentiels, ne chargez le script qu'après validation de la catégorie de consentement requise ; si le widget est qualifié d'outil de support nécessaire, documentez cette décision ainsi que le flux de données. Vérifiez l'absence de scripts en double, d'erreurs en console ou de blocages liés à la Content Security Policy.

Les modifications de configuration enregistrées sont récupérées directement par l'élément existant. Il n'est pas nécessaire de remplacer le code d'intégration après avoir modifié les couleurs, les invites ou les décalages. Ne le remplacez que si vous changez délibérément d'identifiant de chatbot ou de mode d'intégration.