Paramètres et installation du Widget de chat

Widget de chat

Ouvrez Tableau de bord → votre assistant → Canaux → Widget de chat. C'est ici que vous installez et personnalisez le widget flottant pour site web. Il n'y a pas d'onglet Intégration ou Intégration du widget séparé.

Installer le widget

Dépliez Afficher les détails d’installation au-dessus de la zone de personnalisation. Le panneau contient :

• le code HTML prêt à l'emploi avec votre Identifiant du chatbot déjà inséré,
• les actions Copier le code et Ajouter au site web,
• Vérifier l’installation pour vérifier que le widget se charge sur un domaine autorisé,
• des guides de configuration pour WordPress, Shopify, Wix, Squarespace et Webflow.

Lorsque WebChatAgent détecte le widget, le panneau affiche le domaine sur lequel cet assistant se charge. Un test échoué signifie généralement que le code est manquant, que la page sert encore une ancienne version en cache, ou que le domaine est absent de Paramètres → Sites autorisés.

Consultez le guide d'intégration sur site web pour l'emplacement et le guide du widget pour développeurs pour les attributs HTML et les événements d'exécution.

Apparence et contenu

Cet onglet regroupe le design visuel, les images et le contenu affiché avant le début d'une conversation.

Paramètres de base

Couleurs

L'éditeur vérifie le contraste du texte et signale lorsqu'un couple premier plan/arrière-plan est inférieur au ratio WCAG recommandé. Résolvez ces avertissements avant de publier.

Images

Chaque image accepte un fichier importé ou une URL :

Les imports prennent en charge les formats PNG, JPG, WebP et GIF. Utilisez des images petites et optimisées, l'éditeur affiche les limites de taille actuelles à côté de chaque zone d'import.

Contenu

Le texte de bienvenue et de la bulle de message peut être rédigé avec Générer avec l'IA puis modifié. Gardez la bulle de message courte, placez les explications plus longues dans le message de bienvenue.

Comportement

Visibilité et interaction

Masquer sur des URL/chemins

Saisissez une règle par ligne. Le caractère générique * est pris en charge, vous pouvez donc masquer le widget sur des pages comme :

/checkout/*
/account/*
https://example.com/en/legal/*

Utilisez cette option pour les pages de paiement, de compte, de connexion ou d'autres pages où le widget flottant perturberait l'activité ou recouvrirait des commandes importantes.

Positionnement

Définissez des décalages horizontaux et verticaux indépendants pour ordinateur et mobile. Les valeurs définissent la distance par rapport aux bords droit et inférieur. Testez-les avec les bannières de cookies, la navigation fixe et les zones de sécurité mobiles visibles.

Prise de contact automatique

Activez Activer les déclencheurs proactifs lorsque le widget doit contacter les visiteurs selon le temps, la profondeur de défilement, l'intention de sortie, la page, l'inactivité, les visites récurrentes ou d'autres comportements.

Le panneau contient l'éditeur de déclencheurs, les contrôles globaux de fréquence, la planification et le ciblage facultatifs, les modèles et les données de performance. Il détaille également la connexion facultative au consentement. Le comportement proactif de base fonctionne de manière anonyme, la détection des visiteurs récurrents, les limites persistantes, les analyses et les messages d'accueil générés par l'IA nécessitent un signal de consentement accordé.

Consultez Déclencheurs proactifs pour tous les types de déclencheurs, modes de réponse, limites et comportements de confidentialité.

Boutons et formulaires

Actions rapides

Les boutons de suggestion (également appelés questions initiales, suggestions de questions ou amorces de conversation) sont des messages accessibles en un clic affichés avant que le visiteur ne tape quoi que ce soit. Ils se trouvent sous Canaux → Widget de chat → Boutons et formulaires → Actions rapides.

Utilisez Ajouter un bouton pour un nouvel élément, faites glisser la poignée sur la gauche pour réorganiser, puis cliquez sur Enregistrer les modifications. Générer avec l'IA prépare une sélection à partir des propres sources de données de l'assistant, l'interrupteur au-dessus maintient cette sélection à jour automatiquement.

Les boutons sont visibles tant que la conversation est vide. Dès que le visiteur envoie le premier message, ils se déplacent dans le menu des actions à côté du champ de saisie.

Deux points importants : une Action Bar active remplace les boutons de suggestion, utilisez donc l'un ou l'autre. De plus, le chat intégré conserve ses propres boutons sous Canaux → Chat intégré, ce paramètre ne s'y applique pas.

Action Bar

L'Action Bar affiche des actions permanentes au bas du chat. Lorsqu'elle est active, elle remplace les boutons de suggestion. Selon le type d'élément, elle peut ouvrir un lien, WhatsApp, une page Calendly intégrée ou un formulaire personnalisé.

Formulaires

Créez des formulaires, ajoutez et réorganisez des champs, définissez les valeurs obligatoires et personnalisez le bouton d'envoi ainsi que le message de succès. Les données envoyées sont stockées dans le tableau de bord Prospects.

Consultez Action Bar et Formulaires pour les types d'éléments, les types de champs, la traduction et l'association des prospects.

Avancé

Source de détection de langue

Choisissez comment la traduction automatique détecte la langue du visiteur :

• Langue du navigateur utilise la préférence Accept-Language du navigateur.
• Attribut HTML lang utilise la valeur <html lang="…"> de la page.

Utilisez l'option HTML lorsque chaque page localisée déclare correctement sa langue et doit contrôler la langue du widget. Utilisez la langue du navigateur lorsque la page elle-même n'est pas localisée de manière fiable.

Marque

Masquer la marque supprime l'attribution WebChatAgent lorsque le forfait actuel le permet. Le panneau indique clairement si la marque est actuellement visible ou masquée.

CSS personnalisé

Le CSS personnalisé est injecté dans le widget et prévaut sur les styles intégrés sans !important. L'éditeur fournit des préréglages de départ et une liste de sélecteurs .wca-* stables. Il affiche également la limite de caractères et applique les modifications directement dans l'aperçu.

Seuls les sélecteurs documentés constituent un contrat stable. Consultez CSS personnalisé pour le tableau des sélecteurs et des exemples.

Tester et publier

1. Utilisez Tester votre chatbot après toute modification de contenu ou de comportement.
2. Vérifiez l'état de bienvenue, une réponse réelle, les sources, les boutons de suggestion, les formulaires et le téléchargement de fichiers le cas échéant.
3. Cliquez sur Enregistrer les modifications.
4. Ouvrez le véritable site web sur ordinateur et mobile.
5. Utilisez Vérifier l’installation si le widget est non détecté.

L'aperçu du tableau de bord est utile, mais le site réel fait foi pour le z-index, les bannières de cookies, les décalages responsives, les polices et les règles de visibilité spécifiques à chaque page.