{"id":2969,"date":"2023-01-23T16:13:14","date_gmt":"2023-01-23T15:13:14","guid":{"rendered":"https:\/\/botnation.ai\/install-a-chatbot-on-your-website-with-google-tag-manager\/"},"modified":"2026-01-02T15:28:01","modified_gmt":"2026-01-02T14:28:01","slug":"install-a-chatbot-on-your-website-with-google-tag-manager","status":"publish","type":"support","link":"https:\/\/botnation.ai\/en\/support\/install-a-chatbot-on-your-website-with-google-tag-manager\/","title":{"rendered":"Install a Chatbot on your website with Google Tag Manager"},"content":{"rendered":"<p>An alternative to hard-coded JavaScript on your site<\/p>\n\n\n\n\n\n<p>Your web chatbot is finished, it\u2019s time to launch it and install it on your site! To do this, you have several choices:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Your site is deployed in WordPress, we have a <a href=\"https:\/\/botnation.ai\/en\/installation-and-configuration-of-the-wordpress-botnation-plugin\/\">plugin<\/a> for this purpose.<\/li>\n\n\n\n<li>Get the JavaScript code delivered by Botnation and embed it in your site. Follow <a href=\"https:\/\/botnation.ai\/en\/how-to-install-my-chatbot-on-my-website-2\/\">the guide<\/a>!<\/li>\n\n\n\n<li>A Google Tag Manager is already present on your site? Integrate Botnation\u2019s JavaScript code into your GTM configuration!<\/li>\n<\/ol>\n\n\n\n<p>This last point is the subject of the article \ud83d\ude09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_33350b4d87\">1. Recovery of the Javascript code<\/h3>\n\n\n\n<p>Start by getting the Javascript code to integrate. It is generated via the Botnation platform, you will find more details in the <a href=\"https:\/\/botnation.ai\/fr\/support\/comment-installer-mon-chatbot-sur-mon-site-web\/\">following documentation<\/a>.<\/p>\n\n\n\n<p>Once the Javascript code is retrieved, you will have to add it on Google Tag Manager to install your Chatbot on your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_c8e0c489c8\">2. Install Google Tag Manager on your website<\/h3>\n\n\n\n<p>To start, if you haven\u2019t already done so, install Google Tag Manager on your website. Here is the <a href=\"https:\/\/support.google.com\/tagmanager\/answer\/6103696?hl=fr\" target=\"_blank\" rel=\"noreferrer noopener\">procedure<\/a> as described by Google.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_287eb74457\">3. Creation of the tag<\/h3>\n\n\n\n<p>On Google Tag Manager, create a tag of type \u201cCustom HTML\u201d and then add the Javascript code you retrieved earlier.<\/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-197.png.webp\" alt=\"\" class=\"wp-image-6877\"><\/figure>\n\n\n\n<p>This code will be inserted into your website to display the Chatbot.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_5955fd9671\">4. Creating a trigger<\/h3>\n\n\n\n<p>You will now have to tell Google Tag Manager when to display the Chatbot, this is the role of the trigger.<\/p>\n\n\n\n<p>You will probably need the \u201cPage view\u201d trigger. By default, the Chatbot will display all the pages viewed but you can also filter them as in the example below:<\/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-199.png.webp\" alt=\"\" class=\"wp-image-6883\"><\/figure>\n\n\n\n<p>Here, the Chatbot is displayed only if the url contains the keyword botnation.ai. What we want here is to display the Chatbot only on the French version of the site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_1756071a0f\">5. Publication<\/h3>\n\n\n\n<p>All you have to do is save your work and publish your configuration on Google Tag Manager. Once published, changes may take a few minutes to take effect.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_35bc4e3f87\">6. Example of use<\/h3>\n\n\n\n<p>Google Tag Manager can be very useful in the context of a multilingual chatbot. If your site is available in 4 versions, you will create 1 chatbot per language, that is 4 chatbots. All you have to do is distribute the Botnation chatbot via Google Tag Manager by positioning triggers only on the targeted languages based on your addresses including \/en\/ or \/fr\/. So you can easily get a different chatbot tag for each language.<\/p>\n\n\n\n<p><strong>Plus:<\/strong><br>\u2013 <a href=\"https:\/\/botnation.ai\/en\/how-to-install-my-chatbot-on-my-website-2\/\">How to publish my web chatbot?<\/a><br>\u2013 <a href=\"https:\/\/botnation.ai\/en\/installation-and-configuration-of-the-wordpress-botnation-plugin\/\">How do I publish my chatbot on my WordPress site?<\/a><\/p>\n\n\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"categorie-support":[198,221],"class_list":["post-2969","support","type-support","status-publish","hentry","categorie-support-tutorials","categorie-support-web-chatbot-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/support\/2969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/support"}],"about":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/types\/support"}],"wp:attachment":[{"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/media?parent=2969"}],"wp:term":[{"taxonomy":"categorie-support","embeddable":true,"href":"https:\/\/botnation.ai\/en\/wp-json\/wp\/v2\/categorie-support?post=2969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}