Advanced Features
Embed Chatbots On Websites
Put your AI agent on any website as a floating chat bubble or as a chat window inside a page. It takes three steps: allowlist your domain, copy the code, paste it on your site.
Before you start
- An AI agent that has finished training. New here? Start with the Quick start.
- Access to your site's HTML, or to your website builder's settings.
Where is your site?
| Your site | How to add the AI agent | Where the code goes | Guide |
|---|---|---|---|
| Shopify | Deploy to Shopify storefront button. No code; your store domain is allowlisted for you. | Whole storefront (theme app embed) | Shopify |
| WordPress | Chat Data plugin | Every page | WordPress |
| Wix | Widget Bubble code | Custom Code; you choose the pages | Wix |
| Squarespace | Widget Bubble code | Code Injection > header (whole site) | Squarespace |
| Webflow | Iframe code | Embed element on one page | Webflow |
| Framer | Widget Bubble code | Page Settings > Custom Code (one page) | Framer |
| Bubble | Widget Bubble code | HTML component on a page | Bubble |
| Weebly | Iframe code | Embed Code element on a page | Weebly |
| Your own HTML | Widget Bubble or Iframe code | See Paste the code below | This page |
On any platform except Shopify, follow the three steps below first. The platform guides then show exactly where to paste.
Allowlist your domain
Your AI agent only loads on domains you allow. On any other domain the chat window shows an error instead.
- Open your AI agent and go to Settings > Security.
- Under Visibility, choose public. (private means only you can use the AI agent.)
- Turn on Embedding On Websites.
- In Allowed Embedding Domains, enter your site's domain, one per line, for example
example.com. Subdomains such aswww.example.comare covered by the same entry. - Optional: in Disallowed Urls, list pages where the AI agent should not appear. Any URL that starts with an entry is excluded.
- Save your changes.
Allow All Domains
The Allow All Domains toggle lets anyone embed your AI agent on any website. Leave it off unless you have a reason; untrusted sites could embed your agent.
Shortcut: if your AI agent is still private when you open Embed on site, it shows Public Access Required. Click Enable Public Access & Embedding to set it to public and turn on embedding. You still need to add your domain as above.
Copy the embed code
- In your AI agent's sidebar, click Embed on site.
- Pick a tab: Widget Bubble, Iframe or SDK (see the table below).
- Click Copy Code.
| Widget Bubble | Iframe | SDK | |
|---|---|---|---|
| Looks like | A chat bubble in the bottom-left or bottom-right corner that opens a chat window | A chat window placed inside your page content | Not a new look: lets your site's code send data to and receive events from the embedded AI agent |
| Where it goes | In your site's HTML, usually in <head> or your builder's site-wide code area | In the page body, exactly where the chat should show | In your site's HTML |
| Best for | Most websites: the AI agent is one click away on every page | A dedicated help or contact page | Developers who need advanced customization. See Chat Data SDK. |
Always copy the code from Embed on site. It contains your own chatbot ID. The widget code looks like this:
<script
src="https://www.chat-data.com/embed.min.js?chatbotId=YOUR_CHATBOT_ID"
defer>
</script>
Paste the code on your site
- Widget Bubble: paste the script into the
<head>of your pages. Most builders have a site-wide "custom code" or "header code" field for this, so you paste it once. - Iframe: paste the
<iframe>code into the page body where the chat window should appear. By default it is full width and at least 600px tall. - Platform guides: see the table above for Shopify, WordPress and website builders.
Publish or save your site after pasting.
Check that it worked
Open your live site (not only the builder's preview) and look for the chat bubble or chat window. Send a test question.
| What you see | Fix |
|---|---|
| "Domain: … is not in the allowlisted domains of this chatbot" | Add the domain named in the message to Allowed Embedding Domains. Builder previews often run on the builder's own domain, so test on your published site. |
| "Iframe Embedding is disabled for this chatbot" | Turn on Embedding On Websites in Settings > Security. |
| Nothing appears | Check that Visibility is public, the code is on the page you opened, the site is published, and the page isn't listed in Disallowed Urls. |
Next step: change the bubble and chat window to match your brand in Customize the Chatbot Interface. Want to show someone how the agent will look on a site before you install it? Use the Website Embedding Simulator.
Frequently Asked Questions
How do I embed a Chat Data chatbot on a website?
The guide says the website setup starts by allowlisting your domain and making the chatbot public, then choosing one of two embed approaches: an iframe embed placed directly in the page HTML or a floating widget script that shows the chatbot as a bubble.
Why do I need to allowlist my website domain before embedding?
The main domain must be allowlisted so the chatbot is permitted to run on the production site. It also notes that you can block specific URL paths in the security settings if there are pages where you do not want the chatbot to appear.
What is the difference between the iframe embed and the widget embed?
According to the guide, the iframe script is used when you want to place the chatbot directly inside the HTML of a webpage as part of the page layout. The widget script is the alternative option for showing the chatbot as a floating bubble at the bottom of the website.
Where do I get the website embed code for my chatbot?
Click `Embed on site` in your chatbot's sidebar, pick the `Widget Bubble` or `Iframe` tab, and click `Copy Code`. The chatbot must be set to `public` visibility with embedding turned on for the code to work on your website.