{"id":33,"date":"2026-09-09T04:25:48","date_gmt":"2026-09-09T04:25:48","guid":{"rendered":"https:\/\/nirohelp.com\/docs\/33\/embedding-the-chatbot\/"},"modified":"2026-09-17T12:00:34","modified_gmt":"2026-09-17T06:00:34","slug":"embedding-the-chatbot","status":"publish","type":"nirohelp_doc","link":"https:\/\/nirohelp.com\/docs\/ai-assistance\/embedding-the-chatbot\/","title":{"rendered":"Putting the chatbot on a website"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The chatbot is one small piece of code you paste into a website. It works on any site &#8211; WordPress, plain HTML, anything and the widget appears in the corner by itself.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Get your snippet<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"774\" src=\"https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/AI-chatbot.webp\" alt=\"AI chatbot\" class=\"has-border-color has-ast-global-color-0-border-color wp-image-178\" style=\"border-width:2px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px\" srcset=\"https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/AI-chatbot.webp 1160w, https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/AI-chatbot-300x200.webp 300w, https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/AI-chatbot-1024x683.webp 1024w, https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/AI-chatbot-768x512.webp 768w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">1. Go to <strong>NiroHelp \u2192 AI \u2192 Chatbot<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Set the <strong>Agent name<\/strong>, <strong>Avatar<\/strong>, <strong>Primary colour<\/strong> and <strong>Launcher position<\/strong>, plus anything under <strong>Advanced<\/strong>. See <a href=\"https:\/\/nirohelp.com\/docs\/ai-assistance\/customizing-the-chatbot\/\" target=\"_blank\" rel=\"noopener\">Customizing the chatbot<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Click <strong>View Code<\/strong>. A dialog shows your snippet, already filled in with your site key and your settings.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1036\" height=\"659\" src=\"https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Copy-Code.webp\" alt=\"Copy Code\" class=\"has-border-color has-ast-global-color-0-border-color wp-image-177\" style=\"border-width:2px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px\" srcset=\"https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Copy-Code.webp 1036w, https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Copy-Code-300x191.webp 300w, https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Copy-Code-1024x651.webp 1024w, https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Copy-Code-768x489.webp 768w\" sizes=\"auto, (max-width: 1036px) 100vw, 1036px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">4. Click <strong>Copy to clipboard<\/strong>.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Paste it into the site<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The snippet goes just before the closing <code>&lt;\/body&gt;<\/code> tag. Three common ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Your WordPress theme:<\/strong> paste it into <code>footer.php<\/code> just before <code>&lt;\/body&gt;<\/code>. Use a child theme so a theme update does not wipe it.<\/li>\n\n\n\n<li><strong>A header-and-footer scripts plugin<\/strong> &#8211; Insert Headers and Footers, WPCode and the like: paste it into the <strong>Body<\/strong> section.<\/li>\n\n\n\n<li><strong>A site that is not WordPress:<\/strong> paste it into the page template just before <code>&lt;\/body&gt;<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">The easier route for a customer&#8217;s WordPress site<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1160\" height=\"774\" src=\"https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Download-AI-chatbot.webp\" alt=\"Download AI chatbot\" class=\"has-border-color has-ast-global-color-0-border-color wp-image-179\" style=\"border-width:2px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px\" srcset=\"https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Download-AI-chatbot.webp 1160w, https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Download-AI-chatbot-300x200.webp 300w, https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Download-AI-chatbot-1024x683.webp 1024w, https:\/\/nirohelp.com\/docs\/wp-content\/uploads\/2026\/09\/Download-AI-chatbot-768x512.webp 768w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Download Plugin<\/strong> button on the same screen wraps your snippet into a tiny WordPress plugin. Your customer installs and activates it like any other plugin and the chatbot appears &#8211; they never touch theme files. See <a href=\"https:\/\/nirohelp.com\/docs\/ai-assistance\/download-plugin-shortcut\/\" target=\"_blank\" rel=\"noopener\">The Download Plugin shortcut<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Check it before you ship it<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Preview<\/strong> to see the widget running on the Chatbot screen itself, using whatever is currently in the form. Preview, View Code and Download Plugin are all built the same way, so what you preview is what you get. Click again after a change and it refreshes immediately  no save, paste and reload loop.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What the visitor sees<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A round chat button in the corner in your primary colour. Clicking it slides up the chat panel. The first message is your welcome line, with your suggested questions above the input if you set any. The visitor types a question and the answer arrives in the panel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The conversation is kept only for that browser tab. Closing the tab clears it &#8211; see <a href=\"https:\/\/nirohelp.com\/docs\/ai-assistance\/chatbot-conversation-storage\/\" target=\"_blank\" rel=\"noopener\">Where chatbot conversations are kept<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">About the site key in the snippet<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The snippet carries your site key, and that is fine &#8211; <strong>it is a public key<\/strong>, in the same way a Google Maps key is public. Anyone can read it out of your page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If it is ever abused, click <strong>Disconnect<\/strong> on <strong>NiroHelp \u2192 AI<\/strong> and register again. The old key stops working immediately, and you paste a fresh snippet.<\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"nirohelp_product":[],"nirohelp_topic":[9],"class_list":["post-33","nirohelp_doc","type-nirohelp_doc","status-publish","hentry","nirohelp_topic-ai-assistance"],"_links":{"self":[{"href":"https:\/\/nirohelp.com\/docs\/wp-json\/wp\/v2\/nirohelp_doc\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nirohelp.com\/docs\/wp-json\/wp\/v2\/nirohelp_doc"}],"about":[{"href":"https:\/\/nirohelp.com\/docs\/wp-json\/wp\/v2\/types\/nirohelp_doc"}],"author":[{"embeddable":true,"href":"https:\/\/nirohelp.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/nirohelp.com\/docs\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"nirohelp_product","embeddable":true,"href":"https:\/\/nirohelp.com\/docs\/wp-json\/wp\/v2\/nirohelp_product?post=33"},{"taxonomy":"nirohelp_topic","embeddable":true,"href":"https:\/\/nirohelp.com\/docs\/wp-json\/wp\/v2\/nirohelp_topic?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}