Back to Guides
Getting Started5 min

Embedding on Your Website

Add your chatbot to any website with a simple code snippet. Works with WordPress, Shopify, React, and any HTML page.

What you'll learn

  • Enable embedding
  • Add allowed origins
  • Copy the embed code
  • Add to your website
  • Verify it works
1

Enable embedding

Go to the 'Deploy' section in your chatbot settings. Toggle 'Enable Embedding' to allow your chatbot to appear on external websites.

Embed Status

Enable Embedding

Allow your chatbot on external websites

Embedding is enabled. Your chatbot can now be added to external websites.

2

Add allowed origins

For security, specify which domains can embed your chatbot. Add your website's URL (e.g., https://yoursite.com). Use wildcards for subdomains (e.g., *.yoursite.com to allow blog.yoursite.com, shop.yoursite.com, etc.).

Allowed Origins

Specify which domains can embed your chatbot

https://example.com
https://acme.com
*.acme.com

Tip: Use *.domain.com to allow all subdomains

💡Pro Tip

  • You can add multiple origins for different environments like staging and production.
3

Copy the embed code

Once embedding is enabled, you'll see a code snippet. Click the copy button to copy it to your clipboard. The code is a small JavaScript snippet that loads your chatbot widget.

Embed Code

Copy this code and paste it into your website

<script
  src="https://chattlebot.com/embed.js"
  data-chatbot-id="abc123"
  async
></script>
Click to copy to clipboard
4

Add to your website

Paste the embed code into your website's HTML, just before the closing </body> tag. This ensures the chatbot loads after your page content. The chat bubble will appear in the corner of your website.

Add to Your Website

Paste the embed code just before the closing </body> tag

index.html
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your content -->

  <!-- Chattlebot Widget -->
  <script
    src="https://chattlebot.com/embed.js"
    data-chatbot-id="abc123"
    async
  ></script>
</body>
</html>

Works everywhere: WordPress, Shopify, Webflow, Next.js, React, or any HTML website.

💡Pro Tip

  • For WordPress, use a plugin like 'Insert Headers and Footers' to add the code. For Shopify, add it to your theme.liquid file.
5

Verify it works

Visit your website and look for the chat bubble. Click it to open the chatbot and test that everything works correctly. If the bubble doesn't appear, check that your domain is in the allowed origins list.

Ready to get started?

Create your free account and start building your chatbot today.

Start Free Trial