Chatbot de site web
Tutoriel Vidéo
Website Chatbot
Voir sur la page Tutoriels →
Le chatbot de site web place votre assistant IA sur n'importe quel site sous la forme d'une petite bulle de discussion que les visiteurs peuvent ouvrir. Vous le configurez entièrement dans QAnswer, puis vous collez un seul extrait de code dans votre site.
Ouvrez l'assistant, allez dans l'onglet Exposer et sélectionnez la carte « Chatbot de site web ». La page qui s'ouvre est un guide d'installation en cinq étapes ; suivez-les de haut en bas.
Étape 1 — Personnaliser
La première étape est divisée en deux : la carte « Paramètres du widget » à gauche contient les options, et l'« Aperçu du widget » à droite montre le résultat en direct à mesure que vous les modifiez.
La moitié supérieure de la carte de paramètres définit l'apparence et le comportement du widget :
- Titre du widget — l'en-tête affiché en haut du widget ouvert. Laissé vide, le nom de l'assistant est utilisé.
- Message initial — le message d'accueil de l'assistant, avant que le visiteur ne saisisse quoi que ce soit.
- Thème — Auto, Clair ou Sombre. Auto suit le réglage système du visiteur.
- Lors de la première visite, le widget sera… — « Réduit » n'affiche que la bulle ; « Ouvert » déploie la discussion immédiatement.
- Position à l'écran — le coin dans lequel le widget se place — en bas à droite, en bas à gauche, en haut à droite ou en haut à gauche.
- Autoriser l'export des conversations — ajoute une commande permettant aux visiteurs de télécharger leur conversation.
Plus bas dans la même carte se trouvent les options de style plus fines :
- Marge de position — la distance en pixels, en X et en Y, entre le widget et les bords de l'écran — utile lorsque le widget masquerait autrement un élément de votre site.
- Couleur d'accentuation — les couleurs primaire et secondaire du widget, pour qu'il corresponde à votre charte graphique.
- Afficher le texte « Powered by » — décochez la case pour retirer la mention QAnswer au bas du widget.
- Propriété CSS « font » — une option avancée qui vous permet de transmettre une déclaration CSS de police brute, pour que le widget corresponde à la typographie de votre site.
Étape 2 — Tester
Avant de toucher à votre site réel, vous pouvez voir le widget par-dessus celui-ci. Saisissez l'adresse de la page sur laquelle vous souhaitez l'essayer :
- « Ouvrir la démo » ouvre cette page dans un nouvel onglet, avec votre widget superposé.
- « Copier » copie le lien de démonstration, pour que vous puissiez l'envoyer à un collègue.
Étape 3 — Choisir votre accès
Un widget sur un site web public doit être accessible à des personnes qui ne sont pas connectées à QAnswer. Cette étape détermine qui elles sont. Deux cartes sont proposées, et vous utilisez l'une ou l'autre :
Accès ouvert
Rend l'assistant accessible publiquement, sans aucun identifiant :
- Accessible à tous — toute personne qui charge votre site peut utiliser le widget. C'est le choix habituel pour un site public.
- Non accessible — personne en dehors de QAnswer ne peut y accéder. Le widget ne fonctionnera pas tant que cette option est sélectionnée.
Accès protégé
Plutôt que d'ouvrir l'assistant, vous pouvez générer une clé d'API que l'intégration envoie à chaque requête :
- Donnez un nom à la clé et cliquez sur « Générer la clé ». Copiez-la dès qu'elle apparaît — c'est votre seule occasion de la voir.
- « Stocker la clé d'API uniquement dans le stockage local du navigateur (avancé) » garde la clé hors du code source de la page et la place dans le stockage du navigateur du visiteur.
Étape 4 — Exporter
La dernière étape obligatoire vous fournit le code à coller dans votre site. Trois variantes de la même intégration sont disponibles ; choisissez celle qui correspond à la façon dont votre site est construit.
- Script — une simple balise '<script>' qui charge le widget depuis QAnswer. L'option la plus simple, et la bonne pour presque tous les sites.
- Script Content — le corps en ligne de ce script, pour les plateformes qui autorisent l'ajout de JavaScript mais pas d'une balise script avec un attribut src.
- IFrame — une intégration par '<iframe>', pour les environnements où les scripts externes sont bloqués par une politique de sécurité du contenu.
Étape 5 — Personnaliser les données supplémentaires (facultatif)
Votre site web connaît souvent des informations sur le visiteur que l'assistant ignore — qui il est, quelle formule il a souscrite, quelle page il consulte. Les données supplémentaires vous permettent de les transmettre à l'assistant sous forme de paires clé/valeur. Saisissez un nom de champ et une valeur d'exemple, puis utilisez le bouton + pour ajouter d'autres lignes.
Ajouter une paire modifie l'extrait de l'étape 4 : copiez donc à nouveau le code après toute modification ici. Les valeurs d'exemple que vous saisissez ne servent qu'à construire l'extrait — remplacez-les par de vraies valeurs issues de votre site au moment de le coller.