Skip to content
ChatbotIQ

How to Embed the Widget on Your Website

Adding ChatbotIQ to your website takes about two minutes. You copy a code snippet from the dashboard and paste it into your site’s HTML. No build tools, no dependencies, no frameworks required.

Before you start

Section titled “Before you start”

Make sure:

  • Your bot is set to Public mode (Bot Settings → Privacy → Public). Private bots only work in the dashboard.
  • Your bot is Active (toggle in bot settings).
  • If you’ve set Allowed Domains, your website’s domain is in the list.

Get the embed code

Section titled “Get the embed code”
  1. Open your bot in the dashboard.
  2. Click “Design & Deploy” to open the Playground.
  3. Switch to the Embed tab.
  4. Click “Copy Code” — the snippet includes your bot’s unique ID automatically.

Add it to your website

Section titled “Add it to your website”

Paste the embed code before the closing </body> tag on every page where you want the widget to appear:

<script>
(function(){
  if(document.getElementById("chatbotiq-widget"))return;
  if(document.querySelector('script[data-bot-id="YOUR-BOT-ID"]'))return;
  var t=function(){};t.q=[];
  window.chatbotiq=new Proxy(t,{
    get(target,prop){
      if(prop==="q")return target.q;
      return function(){target.q.push([prop].concat(Array.prototype.slice.call(arguments)))}
    },
    apply(target,_,args){target.q.push(args)}
  });
  var onLoad=function(){
    var s=document.createElement("script");
    s.src="https://www.chatbotiq.eu/embedded.js";
    s.async=true;
    s.dataset.botId="YOUR-BOT-ID";
    s.dataset.domain="www.chatbotiq.eu";
    s.dataset.apiBase="https://app.chatbotiq.eu";
    s.onerror=function(){console.warn("[ChatbotIQ] Failed to load widget script")};
    document.body.appendChild(s)
  };
  if(document.readyState!=="loading")onLoad();
  else document.addEventListener("DOMContentLoaded",onLoad)
})();
</script>

Note: When you copy from the Embed tab, YOUR-BOT-ID is already filled in. You don’t need to change anything.

Verify it’s working

Section titled “Verify it’s working”
  1. Visit your website (use a hard refresh: Ctrl+Shift+R or Cmd+Shift+R).
  2. The launcher button should appear in the bottom-right corner.
  3. Click it and test the chat.
  4. If it doesn’t appear, open the browser console (F12 → Console) and look for [ChatbotIQ] messages.

CMS-specific instructions

Section titled “CMS-specific instructions”

WordPress

Section titled “WordPress”

Option A (recommended): Use a plugin like Insert Headers and Footers or WPCode to add the snippet to your site’s footer section.

Option B: Edit your theme’s footer.php file directly and paste the code before </body>.

Shopify

Section titled “Shopify”

Go to Online Store → Themes → Edit Code → theme.liquid and paste the code just before </body>.

Wix

Section titled “Wix”

Go to Settings → Custom Code and add the embed code to the Body - end section.

Squarespace

Section titled “Squarespace”

Go to Settings → Advanced → Code Injection and paste the code into the Footer field.

Next.js / React

Section titled “Next.js / React”

Add the script to your root layout or use a useEffect hook to inject it on mount. The widget uses Shadow DOM, so it won’t conflict with your app’s styles.

Restrict access with allowed domains

Section titled “Restrict access with allowed domains”

To prevent someone from using your bot on an unauthorized website, set Allowed Domains in your bot settings:

  • Empty = any domain can load the widget (default).
  • Filled = only listed domains can use the bot.

Examples:

example.com
*.example.com
docs.example.com

Recommendation: For production, always set allowed domains to your own domain.

Section titled “Related”