Intégration et paramètres du Chat intégré
Inline Chat
Le Chat intégré (<web-chat-agent-inline>) s'affiche directement dans la mise en page de votre page au lieu de flotter au-dessus. Utilisez-le pour un centre d'aide, un conseiller produit, un portail interne ou un assistant en pleine page.
Ouvrez Tableau de bord → votre assistant → Canaux → Chat intégré. Ce canal dispose de son propre code d'installation, de ses paramètres et de son aperçu en direct. Il peut fonctionner sur le même site que le Widget de chat flottant avec un titre, un contenu de bienvenue, une hauteur, des suggestions et un style différents.
Installer le chat intégré
Dépliez Afficher les détails d’installation et copiez le code prérempli. Le format manuel est le suivant :
<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
Placez l'élément exactement là où le chat doit apparaître et chargez le script une seule fois par page. L'élément remplit son conteneur parent, votre mise en page contrôle donc la largeur :
<div style="max-width: 720px; margin: 0 auto;">
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
</div>
Utilisez la version copiée depuis le tableau de bord pour éviter toute faute de frappe dans l'Identifiant du chatbot. Le panneau d'installation permet également de vérifier si cet assistant se charge sur un domaine autorisé.
Apparence
| Paramètre | Ce qu'il modifie |
|---|---|
| Titre | En-tête sur l'écran de début. Laissez vide pour masquer l'en-tête. |
| Couleur principale | Couleur d'accent pour les boutons et les messages des visiteurs. |
| Famille de polices | Police du Widget. Recherchez dans Google Fonts ou ajoutez un nom de police personnalisé. |
| Hauteur | Hauteur du conteneur de chat sous forme de longueur CSS telle que 600px, 80vh ou 100%. |
| Message de bienvenue | Contenu affiché avant le premier message du visiteur. |
L'aperçu en direct s'actualise avec ces paramètres. Envoyer un message dans l'aperçu fait appel au véritable assistant et consomme le quota normal de messages.
Images
Ajoutez une Image de bienvenue facultatif par importation ou par URL. Elle s'affiche sur l'écran de début, au-dessus du message de bienvenue. Utilisez un logo ou une bannière optimisés et vérifiez le rendu sur la largeur de conteneur la plus étroite utilisée sur votre site.
Contenu et comportement
| Paramètre | Ce qu'il modifie |
|---|---|
| Message de bienvenue | Introduction en texte enrichi au-dessus du champ de saisie avant le premier message. |
| Afficher les sources | Ajoute les références de sources disponibles aux réponses. |
| Mention IA sous les réponses du bot | Indique que chaque réponse de l'assistant est générée par l'IA. Cette option est toujours actif. |
| Traduction automatique | Traduit les étiquettes de l'interface dans la langue détectée du visiteur. |
| Téléchargement de fichiers | Permet aux visiteurs de joindre des fichiers lorsque le forfait le permet. |
| Boutons de suggestion | Questions d'amorce sur l'écran de début, également appelées questions suggérées ou amorces de conversation. Chaque élément comporte un titre visible et un message envoyé à l'assistant. Jusqu'à 10 éléments. |
Les Boutons de suggestion peuvent être rédigés avec l'IA ou ajoutés manuellement. Conservez une liste courte et utilisez des questions qui démontrent les réelles connaissances de l'assistant.
Paramètres avancés
| Paramètre | Ce qu'il modifie |
|---|---|
| Source de détection de langue | Utilise soit la langue du navigateur, soit l'attribut <html lang> de la page pour la traduction automatique. |
| Masquer la marque | Supprime le lien « Powered by » lorsque le forfait le permet. |
| CSS personnalisé | Injecte du CSS dans le Widget intégré à l'aide des sélecteurs stables documentés. |
L'éditeur CSS comprend des préconfigurations de départ, une référence de sélecteurs stables, un compteur de caractères et un aperçu en direct. Consultez CSS personnalisé.
Attributs de contexte facultatifs
L'élément intégré accepte tracking-consent et context-data en plus de chatbot-id. Les données de contexte permettent de transmettre des informations de session non confidentielles issues de la page hôte :
<web-chat-agent-inline
chatbot-id="YOUR_CHATBOT_ID"
context-data="Customer=Jane Doe;OrderID=A-1023"
></web-chat-agent-inline>
L'IA peut utiliser ces valeurs dans ses réponses et lors d'appels d'outils autorisés. Ne placez pas de secrets, d'identifiants ou d'informations auxquelles le visiteur actuel n'est pas autorisé à accéder dans les attributs HTML. Consultez Données de contexte de session pour les formats, les limites et l'événement d'exécution.
Flottant vs intégré
| Widget de chat | Chat intégré | |
|---|---|---|
| Emplacement | Bouton flottant fixe et superposition | Intégré dans la mise en page |
| Élément | <web-chat-agent> | <web-chat-agent-inline> |
| Script | /widget/web-chat-agent.js | /widget/chat-widget-inline.js |
| Bulle de message et déclencheurs proactifs | Oui | Non |
| Action Bar et formulaires | Oui | Non |
| Reprise en Chat en direct | Oui | Non |
| Paramètres | Canaux → Widget de chat | Canaux → Chat intégré |
Tester avant de publier
- Enregistrez les paramètres intégrés.
- Envoyez une question documentée dans l'aperçu en direct.
- Ouvrez la page réelle et vérifiez la hauteur, le défilement, le chargement des polices, les sources et les boutons de suggestion.
- Testez sur le plus petit conteneur mobile.
- Si les deux types de widgets sont installés, confirmez qu'ils utilisent bien leurs paramètres indépendants prévus.