{"id":2924,"date":"2023-01-23T15:43:03","date_gmt":"2023-01-23T14:43:03","guid":{"rendered":"https:\/\/botnation.ai\/?p=2924"},"modified":"2026-01-02T16:34:05","modified_gmt":"2026-01-02T15:34:05","slug":"comment-installer-mon-chatbot-sur-mon-site-web","status":"publish","type":"support","link":"https:\/\/botnation.ai\/fr\/support\/comment-installer-mon-chatbot-sur-mon-site-web\/","title":{"rendered":"Comment installer mon chatbot sur mon site web"},"content":{"rendered":"<p>Cet article va vous permettre d\u2019installer et de configurer notre module web afin de publier votre bot.<\/p>\n\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cration-du-projet-web\">1. Cr\u00e9ation du projet web<\/h3>\n\n\n\n<p>Avant toute chose, il vous faut cr\u00e9er un projet Web. Pour cela :<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2023\/06\/image-16.png.webp\" alt=\"\" class=\"wp-image-4620\" style=\"width:348px;height:189px\"><\/figure>\n<\/div>\n\n\n<ol class=\"wp-block-list\">\n<li>Cliquez en haut \u00e0 droite de l\u2019interface de votre chatbot sur le bouton <strong>Activer<\/strong>. \u00a0La liste de vos sites web va alors appara\u00eetre. Pour le moment, cette liste est vide.<br><\/li>\n\n\n\n<li>Cliquez ensuite sur le bouton <strong>Ajouter un site web.<\/strong><br><\/li>\n\n\n\n<li>Dans la fen\u00eatre qui appara\u00eet, vous devez renseigner :<\/li>\n<\/ol>\n\n\n\n<p><strong>Nom du site web<\/strong> : Renseignez un nom assez explicite pour que vous retrouviez facilement votre site web dans la liste.<\/p>\n\n\n\n<p><strong>Url du site web <\/strong>: Renseignez l\u2019adresse compl\u00e8te de votre site web. Par exemple <em>http:\/\/monsiteweb.com. Ce champ est important car v<\/em>otre chatbot <strong>ne fonctionnera que sur cette adresse<\/strong>.<br><em>N.B : Si votre site est accessible en http ET en https, ne vous inqui\u00e9tez pas, le chatbot fonctionnera sur les deux adresses.<\/em><\/p>\n\n\n\n<p><strong>Autoriser les sous-domaines (option facultative)<\/strong> : Vous pouvez activer cette option si vous souhaitez que votre chatbot soit accessible sur plusieurs sous domaines.<br>Par exemple, si votre site est accessible aux adresses http:\/\/monsiteweb.com et http:\/\/www.monsiteweb.com vous devrez renseigner http:\/\/monsiteweb.com dans le champ <strong><em>Nom du site web<\/em><\/strong> et cocher la case <strong><em>Autoriser les sous-domaines<\/em><\/strong>.<\/p>\n\n\n\n<p>Validez enfin le formulaire en cliquant sur le bouton \u00ab\u00a0<strong>Enregister\u00a0\u00bb<\/strong>.<\/p>\n\n\n\n<p>N.B : Vous pourrez \u00e0 tout moment modifier ces champs en cliquant sur l\u2019ic\u00f4ne \u00ab\u00a0engrenage\u00a0\u00bb dans la liste de vos projets web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2023\/06\/image-10.png.webp\" alt=\"\" class=\"wp-image-4604\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"intgration-du-code-javascript-sur-votre-site-web\">2. Int\u00e9gration du code javascript sur votre site web<\/h3>\n\n\n\n<p><em>Si vous utilisez un <a href=\"https:\/\/botnation.ai\/installation-et-configuration-du-plugin-wordpress-botnation\/\">site wordpress<\/a>, vous pouvez vous r\u00e9f\u00e9rer \u00e0 cette <a href=\"https:\/\/botnation.ai\/installation-et-configuration-du-plugin-wordpress-botnation\/\">documentation<\/a>.<\/em><\/p>\n\n\n\n<p>Cliquez sur le bouton \u00ab\u00a0<strong>G\u00e9n\u00e9rer le code embarqu\u00e9<\/strong>\u00ab\u00a0<br>Dans la fen\u00eatre de configuration de votre site web, r\u00e9cup\u00e9rez le code javascript \u00e0 int\u00e9grer :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2023\/06\/image-11.png.webp\" alt=\"\" class=\"wp-image-4606\"><\/figure>\n\n\n\n<p>Copiez ce code en fin de balise <strong>&lt;body&gt;<\/strong> sur votre site web.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script type=\"text\/javascript\"&gt;\n\twindow.chatboxSettings = {\n\t\tappKey: 'XXXXXXXX',\n\t\twebsiteId: 'XXXXXX',\n\t\tlanguage: 'fr',\n\t\t\/\/ Component behaviour\n\t\t\/\/ autoStart: true | false \/\/ Open and start automatically the conversation (default : false)\n\t\t\/\/ User datas\n\t\t\/\/ userId: 'UNIQUE USER ID',\n\t\t\/\/ firstName: 'USER FIRSTNAME',\n\t\t\/\/ lastName: 'USER LASTNAME',\n\t\t\/\/ gender: 'M | F',\n\t\t\/\/ You can specify a target sequence here :\n\t\t\/\/ ref: '&lt;sequence id&gt; OR \"restart\" to restart the welcome sequence',\n\t};\n\t(function (d, s, id) {\n\t\tvar js, fjs = d.getElementsByTagName(s)[0];\n\t\tif (d.getElementById(id)) {\n\t\t\treturn;\n\t\t}\n\t\tjs = d.createElement(s);\n\t\tjs.id = id;\n\t\tjs.src = 'https:\/\/cbassets.botnation.ai\/js\/widget.js';\n\t\tjs.async = true;\n\t\tfjs.parentNode.insertBefore(js, fjs);\n\t}(document, 'script', 'chatbox-jssdk'));\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>La configuration du plugin se fait dans l\u2019objet <strong>window.chatboxSettings<\/strong>. Voici la liste des param\u00e8tres disponibles :\u00a0<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Param\u00e8tres obligatoires (ne pas modifier)<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>appKey (obligatoire) <\/strong>: Ne pas modifier la valeur qui est fix\u00e9e dans le code \u00e0 int\u00e9grer.<\/li>\n\n\n\n<li><strong>websiteId (obligatoire)<\/strong> : Ne pas modifier la valeur qui est fix\u00e9e dans le code \u00e0 int\u00e9grer.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Param\u00e8tres de personnalisation du visiteur de votre site<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>language<\/strong> : Le code langue (sur 2 caract\u00e8res).<\/li>\n\n\n\n<li><strong>userId<\/strong> : Un identifiant unique de l\u2019utilisateur de votre site web. Si le visiteur revient plus tard sur votre site, il retrouvera la conversation qu\u2019il a eu avec le chatbot et toutes les variables associ\u00e9es. Cette valeur pourra \u00eatre utilis\u00e9e dans le chatbot via la variable <strong><em>{{USERID}}<\/em><\/strong>.<\/li>\n\n\n\n<li><strong>firstName<\/strong> : Le pr\u00e9nom du visiteur. Cette valeur pourra \u00eatre utilis\u00e9e dans le chatbot via la variable <strong><em>{{FIRSTNAME}}.<\/em><\/strong><\/li>\n\n\n\n<li><strong>lastName<\/strong> : Le nom de famille du visiteur. Cette valeur pourra \u00eatre utilis\u00e9e dans le chatbot via la variable <strong><em>{{LASTNAME}}<\/em>.<\/strong><\/li>\n\n\n\n<li><strong>gender<\/strong> : Le sexe (genre) du visiteur (valeurs possibles : \u2018<strong>M\u2019<\/strong> ou \u2018<strong>F\u2019<\/strong>). Cette valeur pourra \u00eatre utilis\u00e9e dans le chatbot via la variable <strong><em>{{GENDER}}<\/em>.<\/strong><\/li>\n\n\n\n<li><strong>externalDatas<\/strong>: Un objet contenant des variables personnalis\u00e9es. Vous pourrez retrouver ces variables dans le chatbot via les variables externes.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>externalDatas: {\n   maVariable1: 'mavaleur',\n   maVariable2: 2\n}<\/code><\/pre>\n\n\n\n<p>Il vous suffit ensuite de les d\u00e9clarer dans votre Chatbot sous Param\u00e8tres &gt; Param\u00e8tres avanc\u00e9s &gt; Variables externes<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2023\/01\/image-179.png.webp\" alt=\"\" class=\"wp-image-6821\"><\/figure>\n\n\n\n<p>Vous pourrez alors injecter ces variables dans vos textes \/ conditions.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Param\u00e8tres de d\u00e9marrage du chatbot<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>autoStart<\/strong> : Permet au module de s\u2019ouvrir automatiquement pour les nouveaux visiteurs. Valeurs possibles : <strong>true<\/strong> (oui) ou <strong>false <\/strong>(non)<\/li>\n\n\n\n<li><strong>ref <\/strong>: Permet de d\u00e9marrer le chatbot sur une s\u00e9quence particuli\u00e8re ou sur la s\u00e9quence par d\u00e9faut \u00e0 chaque fois qu\u2019un visiteur arrive sur une page de votre site. Pour d\u00e9marrer sur la s\u00e9quence par d\u00e9faut, renseignez ce param\u00e8tre avec <strong>\u2018restart\u2019. <\/strong>Pour d\u00e9marrer sur une s\u00e9quence sp\u00e9cifique, renseignez la valeur indiqu\u00e9e dans les <a href=\"https:\/\/botnation.ai\/les-parametres-dune-sequences-dans-un-chatbot-web\/\">param\u00e8tres de la s\u00e9quence<\/a> (sur l\u2019interface de votre bot)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/botnation.ai\/wp-content\/uploads\/2023\/01\/image-181.png.webp\" alt=\"\" class=\"wp-image-6828\"><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"paramtres-avancs-du-module-web\"><strong>Param\u00e8tres avanc\u00e9s du module web<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>messengerOnly <\/strong>: Permet de ne pas afficher la bulle d\u2019ouverture \/ fermeture du chat. Valeurs possibles : <strong>true<\/strong> (mode fullscreen) \u00a0\/ <strong>false<\/strong> (par d\u00e9faut).<\/li>\n\n\n\n<li><strong>hideLauncher<\/strong> : Identique \u00e0 <em>messengerOnly <\/em>(\u00e0 coupler avec<em> hideCloseButton<\/em>).<\/li>\n\n\n\n<li><strong>hideCloseButton<\/strong> : Permet de ne pas afficher la croix pour fermer le chat en mode fullscreen \/ mobile. Valeurs possibles : <strong>true<\/strong> \/ <strong>false<\/strong>.<\/li>\n\n\n\n<li><strong>containerId<\/strong>: Permet d\u2019afficher le module dans une balise existante. Doit correspondre \u00e0 un id d\u2019\u00e9l\u00e9ment.<\/li>\n\n\n\n<li><strong>container<\/strong>: Permet d\u2019afficher le module dans une balise existante. Doit correspondre \u00e0 un \u00e9l\u00e9ment HTML, un \u00e9l\u00e9ment jQuery ou un s\u00e9lecteur jQuery.<\/li>\n\n\n\n<li><strong>fullscreen<\/strong>: Permet d\u2019activer le mode fullscreen. Valeurs possibles: <strong>true<\/strong> \/ <strong>false<\/strong>.<\/li>\n\n\n\n<li><strong>silentMode<\/strong>: Permet de passer en mode silencieux, c-a-d qu\u2019il vous faudra g\u00e9rer l\u2019ouverture et la fermeture du chat manuellement en JS.<\/li>\n\n\n\n<li><strong>onEvents<\/strong>: Cela vous permet d\u2019interagir avec votre site web ou SI en provenance de la fonction \u00ab\u00a0<a href=\"https:\/\/botnation.ai\/faire-interagir-votre-chatbot-avec-votre-site-web-2\/\">Ev\u00e8nement Javascript<\/a>\u00a0\u00bb du Messenger Web de Botnation. <a href=\"https:\/\/botnation.ai\/faire-interagir-votre-chatbot-avec-votre-site-web-2\/\">En savoir plus<\/a>.\u00a0<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>window.chatboxSettings = {\n   onEvents: function(eventName, eventArgs) {\n      \/\/ Les param\u00e8tres sont d\u00e9finis dans le bouton \u00e9v\u00e8nement de votre bot\n      \/\/ eventName = \"le nom de l'\u00e9v\u00e8nement\"\n      \/\/ eventArgs = {arg1: \"val1\", arg2: \"val2\"}\n   }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"interagir-avec-le-messenger\">3. Interagir avec le messenger<\/h3>\n\n\n\n<p>Vous pouvez interagir avec le messenger web pour :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ouvrir \/ fermer le chat<\/li>\n\n\n\n<li>mettre \u00e0 jour des variables utilisateur<\/li>\n\n\n\n<li>rediriger l\u2019utilisateur vers une s\u00e9quence de votre chatbot<\/li>\n<\/ul>\n\n\n\n<p>Pour cela il vous faut d\u2019abord r\u00e9cup\u00e9rer le widget une fois que celui ci est pr\u00eat :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script type=\"text\/javascript\"&gt;<br><br>\u00a0 \u00a0 \/\/ On d\u00e9clare la variable<br>\u00a0 \u00a0 var botnationWidget;<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 window.document.addEventListener('botnation.widget.ready', function() {<br>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Lorsque le widget est pr\u00eat, on le r\u00e9cup\u00e8re dans notre variable<br>\u00a0 \u00a0 \u00a0 \u00a0 console.log(\"widget is ready\");<br>\u00a0 \u00a0 \u00a0 \u00a0 botnationWidget = window.BNAI; \/\/ save botnation widget instance<br>\u00a0 \u00a0 });<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <br>&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Vous pouvez ensuite appeler les fonctions ad\u00e9quats sur l\u2019objet <strong>botnationWidget<\/strong> :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script type=\"text\/javascript\"&gt;<br>\u00a0 \u00a0 \/\/ On ouvre le chat<br>\u00a0 \u00a0 botnationWidget.openChat();<br><br>\u00a0 \u00a0 \/\/ On ferme le chat<br>\u00a0 \u00a0 botnationWidget.closeChat();<br><br>\u00a0 \u00a0 \/\/ On met \u00e0 jour une variable utilisateur<br>\u00a0 \u00a0 botnationWidget.setUserVariable(\"ma_variable\", \"la valeur\", function callback(result) {<br>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Une fonction appel\u00e9e lorsque la mise \u00e0 jour a \u00e9t\u00e9 effectu\u00e9e<br>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Le param\u00e8tre result est \u00e0 true si la mise \u00e0 jour a \u00e9t\u00e9 effectu\u00e9e, \u00e0 false sinon.<br>});<br><br>\u00a0 \u00a0 \/\/ On redirige l'utilisateur vers une s\u00e9quence du chatbot<br>\u00a0 \u00a0 \/\/ Le param\u00e8tre blockId correspond \u00e0 un ID de bloc (que vous trouverez dans le titre de votre s\u00e9quence, comme pour le param\u00e8tre de d\u00e9marrage 'ref')<br>\u00a0 \u00a0 botnationWidget.sendRedirectToBlock(\"blockid\", function callback(result) {<br>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Une fonction appel\u00e9e lorsque la redirection a \u00e9t\u00e9 effectu\u00e9e<br>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Le param\u00e8tre result est \u00e0 true si la redirection a \u00e9t\u00e9 effectu\u00e9e, \u00e0 false sinon.<br>});<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 \/\/ On redirige l'utilisateur vers un terme d\u00e9clenchant une r\u00e8gle AI<br>\u00a0 \u00a0 botnationWidget.sendRedirectToAiRule(\"keyword\", function callback(result) {<br>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Une fonction appel\u00e9e lorsque la redirection a \u00e9t\u00e9 effectu\u00e9e<br>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Le param\u00e8tre result est \u00e0 true si la redirection a \u00e9t\u00e9 effectu\u00e9e, \u00e0 false sinon.<br>}); \u00a0<br>&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"exemple-du-mode-silencieux\">4. Exemple du mode silencieux<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;<br>\u00a0 \u00a0 &lt;head&gt;<br>\u00a0 \u00a0 \u00a0 \u00a0 &lt;meta charset=\"UTF-8\"&gt;<br>\u00a0 \u00a0 \u00a0 \u00a0 &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<br>\u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 \u00a0 \u00a0 &lt;script type=\"text\/javascript\"&gt;<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var botnationWidget;<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 function openChat() {<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (!botnationWidget) return console.error(\"botnation widget is not ready\");<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"BNAI is ready\", botnationWidget);<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 botnationWidget.openChat(document.getElementById(\"container\"));<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 function closeChat() {<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (!botnationWidget) return console.error(\"botnation widget is not ready\");<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"BNAI is ready\", botnationWidget);<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 botnationWidget.closeChat();<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 window.document.addEventListener('botnation.widget.ready', function() {<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"widget is ready\");<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 botnationWidget = window.BNAI; \/\/ save botnation widget instance<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 window.document.addEventListener('botnation.chat.opened', function() {<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"le chat est ouvert\");<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 window.document.addEventListener('botnation.chat.ready', function() {<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"le chat est pr\u00eat\");<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 window.document.addEventListener('botnation.chat.closed', function() {<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"le chat est ferm\u00e9\");<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 })<br>\u00a0 \u00a0 window.chatboxSettings = {<br>\u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 \u00a0 \u00a0 appKey: 'XXX',<br>\u00a0 \u00a0 \u00a0 \u00a0 websiteId: 'XXX',<br>\u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 \u00a0 \u00a0 silentMode: true,<br>\u00a0 \u00a0 \u00a0 \u00a0 hideCloseButton: true,<br>\u00a0 \u00a0 };<br>\u00a0 \u00a0 (function (d, s, id) {<br>\u00a0 \u00a0 \u00a0 \u00a0 var js, fjs = d.getElementsByTagName(s)[0];<br>\u00a0 \u00a0 \u00a0 \u00a0 if (d.getElementById(id)) {<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return;<br>\u00a0 \u00a0 \u00a0 \u00a0 }<br>\u00a0 \u00a0 \u00a0 \u00a0 js = d.createElement(s);<br>\u00a0 \u00a0 \u00a0 \u00a0 js.id = id;<br>\u00a0 \u00a0 \u00a0 \u00a0 js.src = 'https:\/\/cbassets.botnation.ai\/js\/widget.js';<br>\u00a0 \u00a0 \u00a0 \u00a0 js.async = true;<br>\u00a0 \u00a0 \u00a0 \u00a0 fjs.parentNode.insertBefore(js, fjs);<br>\u00a0 \u00a0 }(document, 'script', 'chatbox-jssdk'));<br>&lt;\/script&gt;<br>\u00a0 <br>\u00a0 \u00a0 \u00a0 \u00a0 &lt;style type=\"text\/css\"&gt;<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 #container {<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 position: absolute;<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 400px;<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 600px;<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 bottom: 50px;<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 left: 50px;<br>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<br>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/style&gt;<br>\u00a0 \u00a0 &lt;\/head&gt;<br>\u00a0 \u00a0 &lt;body&gt;<br>\u00a0 \u00a0 \u00a0 \u00a0 &lt;button onclick=\"openChat()\"&gt;Open chat&lt;\/button&gt;<br>\u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 \u00a0 \u00a0 &lt;button onclick=\"closeChat()\"&gt;Close chat&lt;\/button&gt;<br>\u00a0 \u00a0 \u00a0 \u00a0 <br>\u00a0 \u00a0 \u00a0 \u00a0 &lt;div id=\"container\"&gt;<br>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<br>\u00a0 \u00a0 &lt;\/body&gt;<br>&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"foire-aux-questions-faq\">5. Foire aux questions (FAQ)<\/h3>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"le-module-web-ne-sadapte-pas-sur-mobile-que-faire-\">Le module web ne s\u2019adapte pas sur mobile, que faire ?<\/h5>\n\n\n\n<p>N\u2019oubliez pas d\u2019ajouter une balise viewport dans le <strong>&lt;head&gt;<\/strong>, de fa\u00e7on \u00e0 ce que les proportions soient gard\u00e9es sur mobile.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"le-widget-saffiche-bien-mais-mon-bot-ne-rpond-pas-\">Le widget s\u2019affiche bien mais mon bot ne r\u00e9pond pas ?<\/h5>\n\n\n\n<p>Il se peut que votre bot ne soit pas activ\u00e9 ou alors que la configuration de votre projet web ne soit pas bonne. Dans un premier temps, v\u00e9rifiez la bonne activation de votre bot ainsi que l\u2019URL de votre site web. Si le probl\u00e8me persiste, consultez les logs de la console javascript dans votre navigateur.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"le-chat-ne-souvre-pas-automatiquement-alors-que-jai-configur-autostart--true-\">Le chat ne s\u2019ouvre pas automatiquement alors que j\u2019ai configur\u00e9 autoStart \u00e0 true ?<\/h5>\n\n\n\n<p>Lorsqu\u2019un visiteur arrive sur votre site pour la premi\u00e8re fois, le param\u00e8tre autoStart est pris en compte. Si il revient sur votre site ou qu\u2019il change de page, nous regardons en priorit\u00e9 s\u2019il n\u2019avait pas ferm\u00e9 le chat et, le cas \u00e9ch\u00e9ant, nous laissons le chat ferm\u00e9 volontairement.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Je souhaite afficher le chat en plein \u00e9cran<\/h5>\n\n\n\n<p>Vous pouvez positionner l\u2019option <strong>fullscreen : true<\/strong> pour cela. Le header du chat ne sera pas affich\u00e9 (nom \/ description du chatbot) et la bulle d\u2019invitation \u00e0 discuter non plus.<br>Par d\u00e9faut, le chat s\u2019affichera sur la totalit\u00e9 de la page. Si vous souhaitez l\u2019int\u00e9grer \u00e0 l\u2019int\u00e9rieur de votre page web afin d\u2019y conserver des \u00e9l\u00e9ments essentiels tels que votre header \/ footer, vous pouvez pour cela coupler l\u2019option <strong>fullscreen<\/strong> avec l\u2019option <strong>container<\/strong> ou <strong>containerId<\/strong> de mani\u00e8re \u00e0 ce que le chat s\u2019int\u00e8gre dans un \u00e9l\u00e9ment de votre site que vous pourrez dimensionner \u00e0 votre contenance.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Comment afficher le chatbot sur une seule page seulement de mon site ?<\/h5>\n\n\n\n<p>Pour cela, installez le tag seulement sur la page concern\u00e9e (comme une image en somme). Le tag ne doit pas n\u00e9cessairement \u00eatre sur toutes vos pages. Dans le cas o\u00f9 vous utilisez Google Tag Manager par exemple, ajoutez une r\u00e8gle sur l\u2019identifiant de la page, tout simplement.<\/p>\n\n\n\n<p>Pour en savoir plus sur les personnalisations graphiques de votre chatbot web, comme la couleur du th\u00e8me, les textes de pr\u00e9sentation ou l\u2019avatar veuillez consulter l\u2019article suivant :<br><a href=\"https:\/\/botnation.ai\/comment-personnaliser-mon-chatbot-web\/\">Comment personnaliser son Chatbot Web<\/a><\/p>\n\n\n\n<p><strong>En plus:<\/strong><br>\u2013 <a href=\"https:\/\/botnation.ai\/installation-et-configuration-du-plugin-wordpress-botnation\/\">Comment installer un chatbot sur WordPress<\/a><br>\u2013 <a href=\"https:\/\/botnation.ai\/puis-je-installer-un-chatbot-sur-prestashop\/\">Comment installer un chatbot sur Prestashop<\/a><br>\u2013 <a href=\"https:\/\/botnation.ai\/comment-installer-un-chabot-sur-shopify\/\">Comment installer un chatbot sur Shopify<\/a><br>\u2013 <a href=\"https:\/\/botnation.ai\/installer-son-chatbot-sur-son-site-web-avec-google-tag-manager\/\">Comment installer un chatbot web avec Google Tag Manager<\/a><br>\u2013 <a href=\"https:\/\/botnation.ai\/chatbotnation-hebergement-de-chatbot\/\">Chatbotnation : H\u00e9bergement de ChatBot<\/a><\/p>\n\n\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"categorie-support":[183,189],"class_list":["post-2924","support","type-support","status-publish","hentry","categorie-support-chatbot-web","categorie-support-tutoriels"],"acf":[],"_links":{"self":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/support\/2924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/support"}],"about":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/types\/support"}],"wp:attachment":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/media?parent=2924"}],"wp:term":[{"taxonomy":"categorie-support","embeddable":true,"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/categorie-support?post=2924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}