{"id":2993,"date":"2023-01-23T16:31:35","date_gmt":"2023-01-23T15:31:35","guid":{"rendered":"https:\/\/botnation.ai\/?p=2993"},"modified":"2026-01-06T18:58:51","modified_gmt":"2026-01-06T17:58:51","slug":"faire-interagir-votre-chatbot-avec-votre-site-web","status":"publish","type":"support","link":"https:\/\/botnation.ai\/fr\/support\/faire-interagir-votre-chatbot-avec-votre-site-web\/","title":{"rendered":"Faire Interagir votre Chatbot avec votre site Web"},"content":{"rendered":"

Transmettre des \u00e9v\u00e9nement (javascript events) et actions \u00e0 votre site<\/p>\n\n\n\n\n\n

Votre chatbot Web Botnation peut interagir avec le site web sur lequel il est install\u00e9 en transmettant des \u00e9v\u00e8nements (events) Javascript au navigateur. Le chatbot web peut alors communiquer avec votre site via ces \u00e9v\u00e8nements que vous devez intercepter pour, par exemple, directement ajouter un produit au panier, changer de page sans ouvrir un nouveau site etc\u2026<\/p>\n\n\n\n

\n

Attention<\/strong> : <\/em>
Cette documentation n\u2019est pas couverte par le support Botnation. Botnation ne fait qu\u2019envoyer des \u00e9v\u00e8nements Javascript au navigateur affichant votre site. Toute interpr\u00e9tation ou action li\u00e9e \u00e0 ces \u00e9v\u00e8nements Javascrip<\/a>t ne concerne plus Botnation. De plus ces d\u00e9veloppements \u00ab\u00a0web\u00a0\u00bb de votre c\u00f4t\u00e9 (c\u00f4t\u00e9 site) interagissent certainement avec d\u2019autres applications (analytics, panier, paiement, chargement de page\u2026) pour lesquelles nous ne pouvons pas assurer le support. En cas de difficult\u00e9 nous vous recommandons donc de vous rapprocher d\u2019un d\u00e9veloppeur Javascript<\/strong>, l\u2019\u00e9criture de ce code Javascript concernant votre site et non le chatbot c\u00f4t\u00e9 Botnation, tout comme le logo de vote site d\u00e9pendra d\u2019un infographiste et non du support Botnation.<\/em><\/p>\n<\/blockquote>\n\n\n\n

1. Communiquer des informations en direct \u00e0 votre site web en provenance du chatbot<\/h3>\n\n\n\n

Sur l\u2019interface de votre chatbot Botnation il vous suffit d\u2019activer la fonction \u00ab\u00a0\u00c9v\u00e8nement Javascript\u00a0\u00bb<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

puis d\u2019indiquer le nom de \u00e9v\u00e8nement, qui sera intercept\u00e9 via ce nom sur votre site, et \u00e9ventuellement d\u2019ajouter des param\u00e8tres compl\u00e9mentaires qui seront r\u00e9cup\u00e9r\u00e9s sous la forme cl\u00e9\/valeur sur votre site. Ces param\u00e8tres peuvent \u00eatre compos\u00e9s de variables Botnation.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ces param\u00e8tres sont par exemple utiles pour configurer un \u00e9v\u00e8nement d\u2019ajout au panier en communiquant un identifiant de client et une r\u00e9f\u00e9rence d\u2019article.<\/p>\n\n\n\n

Vous pouvez ajouter autant d\u2019\u00e9v\u00e8nements depuis n\u2019importe qu\u2019elle section de votre chatbot<\/a> de type \u00e9v\u00e9nement et g\u00e9n\u00e9ralement un seul script suffit c\u00f4t\u00e9 site pour les intercepter.<\/p>\n\n\n\n

2. C\u00f4t\u00e9 site\u2026<\/h3>\n\n\n\n

C\u00f4t\u00e9 site, Il vous faut alors d\u2019intercepter ces \u00e9v\u00e8nement en ajoutant un \u00ab\u00a0onEvents\u00a0\u00bb \u00e0 l\u2019int\u00e9rieur \u2013 je r\u00e9p\u00e8te \u00ab\u00a0\u00e0 l\u2019int\u00e9rieur\u00a0\u00bb \u2013 du tag javascript Botnation d\u2019affichage de votre chatbot.<\/p>\n\n\n\n

Exemple :<\/p>\n\n\n\n

window.chatboxSettings = {
   onEvents: function(eventName, eventArgs) {
      \/\/ votre action 
      \/\/ eventName = \"le nom de l'\u00e9v\u00e8nement\"
      \/\/ eventArgs = {arg1: \"val1\", arg2: \"val2\"}
   }
}<\/code><\/pre>\n\n\n\n
Par exemple pour que le chatbot communique un changement de page au navigateur de l\u2019utilisateur de votre chatbot :<\/p>\n\n\n\n
onEvents: function (eventName, eventArgs) {
  switch (eventName) {
    case 'redirection':
      \/\/ verify that we received an url
      if (eventArgs.hasOwnProperty('url')) {
        \/\/ redirect to the url
        window.location.href = eventArgs.url;
      }
      break;
    default:
      break;
  }
}<\/code><\/pre>\n\n\n\n
Vous pouvez \u00e9galement rediriger l\u2019utilisateur vers un site externe en stipulant une adresse compl\u00e8te ex: https:\/\/www.example.com\/ma-page-de-redirection ou vers une autre page du site courant en stipulant une url relative ex: \/ma-page-de-redirection.<\/p>\n\n\n\n
Les adresse vos pages (url relatives) doivent imp\u00e9rativement commencer par une barre oblique (\u2018\/\u2019).<\/p>\n\n\n\n
Une fois cette configuration effectu\u00e9e, vous pourrez lancer de nouvelles redirections \u00e0 l\u2019infini depuis n\u2019importe qu\u2019elle section de votre chatbot de type \u00e9v\u00e9nement sans modifier le script sur votre page. Il vous suffit simplement de r\u00e9p\u00e9ter les \u00e9tapes en respectant bien strictement le nom d\u2019\u00e9v\u00e9nement et le nom de param\u00e8tre.<\/p>\n\n\n\n
3. Encore plus \u00ab\u00a0simple\u00a0\u00bb\u2026<\/h3>\n\n\n\n
Si vous effectuez des actions uniquement sur le nom de l\u2019\u00e9v\u00e8nement et non sur les valeurs de l\u2019\u00e9v\u00e8nement il vous suffira de d\u00e9finir un \u00ab\u00a0case\u00a0\u00bb uniquement sur celui-ci.<\/p>\n\n\n\n
window.chatboxSettings = { \n\n\/\/ ensemble du tag Botnation\n\n\/\/ Communication Events\n\n  onEvents: function (eventName, eventArgs) {\n\n   switch (eventName) {\n\n    case 'riri':\n\n\/\/ votre action javascript \n\n       break;\n\n    case 'fifi':\n\n\/\/ votre action javascript \n\n        break;\n\n    case 'loulou':\n\n\/\/ votre action javascript \n\n        break;\n\n    default:\n\n      break;\n\n   }\n\n  }\n\n}<\/code><\/pre>\n\n\n\n
Cette fonction est sans limite et vous permet donc de piloter totalement le navigateur d\u2019un utilisateur et les autres applications Javascript incluses \u00e0 celui-ci.<\/p>\n\n\n\n
Si vous utilisez Google Tag Manager sur votre site ou un autre outil de Tag Management pour g\u00e9rer le tag Botnation cela devrait \u00eatre compatible.<\/p>\n\n\n\n
\n
Attention :<\/strong> 
Les \u00e9v\u00e8nements (Events) Javascript devant \u00eatre g\u00e9r\u00e9s du c\u00f4t\u00e9 de votre propre site Internet, ils ne pourront donc ne pas \u00eatre fonctionnels sur la page de test mis \u00e0 disposition par Botnation ou sur l\u2019h\u00e9bergement Chatbotnation<\/a> car vous n\u2019avez pas acc\u00e8s \u00e0 l\u2019\u00e9dition du code de ces sites.<\/em><\/p>\n<\/blockquote>\n\n\n\n
Pour rendre les \u00e9v\u00e8nements javascript fonctionnels il vous faut donc auparavant publier le chatbot sur votre propre site, y compris durant la phase de test.<\/strong>

N\u2019h\u00e9sitez pas \u00e0 nous communiquer vos meilleurs projets pour que nous puissions les mettre en avant.<\/p>\n\n\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"categorie-support":[183,185,189,171],"class_list":["post-2993","support","type-support","status-publish","hentry","categorie-support-chatbot-web","categorie-support-fonctionnalites","categorie-support-tutoriels","categorie-support-variables"],"acf":[],"_links":{"self":[{"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/support\/2993","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=2993"}],"wp:term":[{"taxonomy":"categorie-support","embeddable":true,"href":"https:\/\/botnation.ai\/fr\/wp-json\/wp\/v2\/categorie-support?post=2993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}