---
doc_version: "1.0.0"
last_updated: "2026-07-14T15:00:57.718Z"
title: "How to Embed the Widget on Your Website"
description: "Add the ChatbotIQ chat widget to your website with a single code snippet. Includes instructions for WordPress, Shopify, Wix, and Squarespace."
keywords: [embed widget, install chatbot, script tag, WordPress, Shopify, Wix, website integration]
---

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

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

1. Open your bot in the dashboard.
2. Click **"Design & Deploy"** to open the Playground.
3. Switch to the **Deploy** tab and select the **Website Widget** tile.
4. Click **"Copy Code"** - the snippet includes your bot's unique ID automatically.

---

## Add it to your website

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

```html
<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

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

### 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

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

### Wix

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

### Squarespace

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

### 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

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.

---

## Related

- [Customize Widget Appearance](/how-to/customize-widget-appearance/) - colors, fonts, position, and branding
- [Control the Widget with JavaScript](/how-to/control-widget-with-javascript/) - open, close, and control the widget programmatically
- [How the Widget Loads](/explanation/how-the-widget-loads/) - understand the async loading process
- [Troubleshooting](/troubleshooting/) - widget not showing? Start here

## Sitemap

Full documentation index: [sitemap.md](/sitemap.md) and [llms.txt](/llms.txt).