How to Embed a Chatbot on Your Website (Step-by-Step, Any Platform)

TL;DR: To embed a chatbot on your website, paste one script tag before the closing body tag, or install a plugin on WordPress. The same snippet works on Shopify, Wix, Webflow, Squarespace, WooCommerce, and plain HTML, and the widget is live in about two minutes with no developer needed. Everything else, from colors to trigger rules, is configured in the dashboard afterwards.

Embedding a chatbot on your website sounds like a developer problem. It isn't. For every modern website platform - WordPress, Shopify, Wix, Webflow, Squarespace, WooCommerce, or plain HTML - the install is a single line of code (or a plugin click) and the chatbot is live in under two minutes.

This guide walks through the exact steps for every major platform, what the embed code actually does, how to troubleshoot when the widget doesn't appear, and how to customize placement, colors, and trigger behavior - all without touching your site's code beyond a single paste.

What "embedding a chatbot" actually means

A chatbot embed is a single JavaScript snippet that loads a chat widget onto your page when a visitor arrives. The snippet looks something like this:

<script src="https://chatonbo.com/widget/chatonbo-widget.js" data-bot-id="YOUR_BOT_ID"></script>

When the browser loads that line, three things happen:

1. The widget JavaScript downloads from our CDN (about 40KB gzipped)
2. It reads your bot ID and fetches your bot's configuration (avatar, welcome message, colors, trigger rules)
3. It injects a chat bubble into the bottom-right corner of every page

That's it. No server changes, no theme edits, no build step. The widget is fully self-contained and will not conflict with your site's CSS or JavaScript.

How to embed a chatbot on WordPress

WordPress is the easiest case because we publish a free plugin in the WordPress directory.

Option A - plugin (recommended):

1. In your WordPress admin, go to Plugins → Add New
2. Search for "Chatonbo"
3. Click Install Now, then Activate
4. Go to Settings → Chatonbo, paste your Bot ID from your Chatonbo dashboard
5. Save. The widget is live on every page.

Option B - script tag:

If you don't want a plugin, you can paste the script tag into your theme's footer. Go to Appearance → Theme File Editor, open footer.php, and paste the embed code just before .

How to embed a chatbot on Shopify

Shopify stores are almost as easy:

1. From your Shopify admin, go to Online Store → Themes
2. Click the three-dot menu on your active theme → Edit code
3. Under Layout, open theme.liquid
4. Scroll to the bottom and paste the embed code just before
5. Click Save

The widget is live immediately. You don't need to republish the theme or refresh caches.

For Shopify specifically, Chatonbo auto-detects your product catalog, so the bot can answer product questions, recommend related items, and display product cards with images and pricing - no extra setup.

How to embed a chatbot on Wix

Wix has its own way of handling third-party scripts:

1. In your Wix editor, open Settings → Custom Code
2. Click + Add Custom Code
3. Paste the embed code in the Code box
4. Under Add Code to Pages, select All pages
5. Under Place Code in, select Body - end
6. Click Apply

Publish your site. The widget will appear on every page.

How to embed a chatbot on Webflow

1. In your Webflow project, open Project Settings → Custom Code
2. Scroll to Footer Code
3. Paste the embed code
4. Click Save Changes, then publish your site

How to embed a chatbot on Squarespace

1. In your Squarespace admin, go to Settings → Advanced → Code Injection
2. Paste the embed code into the Footer field
3. Click Save

How to embed a chatbot on a plain HTML website

If you hand-coded your website (or your developer did), paste the embed code just before the closing tag on every page where you want the chatbot:

...
  <script src="https://chatonbo.com/widget/chatonbo-widget.js" data-bot-id="YOUR_BOT_ID"></script>
</body>
</html>

If your site uses an include or template system (a shared footer.html), put it in the shared file once and it will appear site-wide.

Customizing placement, colors, and triggers

After embedding, everything else is configured in your Chatonbo dashboard - no code edits required:

• Welcome message: what the bot says when the bubble opens
• Colors and avatar: match your brand palette and upload a logo
• Trigger behavior: auto-open after N seconds, on exit intent, on scroll depth, or on specific pages only
• Position: bottom-right, bottom-left, or centered
• Languages: auto-detect the visitor's browser language and respond in 48 supported languages

Changes save instantly - no need to redeploy your website or re-paste the embed code. The bot pulls the latest config on every page load.

Troubleshooting: the widget doesn't appear

If the chat bubble doesn't show up after embedding, check these in order:

1. Hard refresh the page. Press Cmd+Shift+R (Mac) or Ctrl+F5 (Windows) to bypass cache.
2. Check browser console. Right-click the page → Inspect → Console. If you see a 404 or CORS error, the embed code might have a typo.
3. Verify your Bot ID. Open your Chatonbo dashboard and confirm the Bot ID in your embed code matches. A mismatched ID silently fails.
4. Check your allowed domains. In your bot security settings, make sure the domain where you're testing is in the allowed list. The default is restrictive to prevent abuse.
5. Confirm the script loaded. In the browser's Network tab, filter for "chatonbo". You should see chatonbo-widget.js load with status 200.
6. Disable ad blockers temporarily. Some aggressive blockers treat chat widgets as tracking scripts.

If none of that resolves it, contact support and we'll install it for you free - including debugging your specific theme or platform.

Performance: does embedding a chatbot slow down my site?

The Chatonbo widget is ~40KB gzipped and loads asynchronously, meaning it does not block your page's critical rendering path. In Lighthouse tests on a typical WordPress site, the widget adds less than 50ms to Time to Interactive - well within Google's Core Web Vitals thresholds.

For comparison: Intercom's widget is around 330KB, Drift's is over 500KB, and a typical lead form library (like HubSpot's) is 180KB+. Chatonbo was built with performance as a primary constraint.

When should you embed a chatbot?

If your website gets any consistent traffic and you're relying on a contact form (or worse, just an email address) for inquiries, you're leaving leads on the table. Contact forms convert at 2-5%. A well-configured chatbot converts at 15-35% - because it answers questions first, captures contact details in the flow of conversation, and never sleeps.

The embed takes two minutes. The value compounds for years.

Next steps

• [Create a free chatbot](https://chatonbo.com/platform/register) - free trial
• [See all integrations](https://chatonbo.com/integrations) - WordPress, Shopify, Wix, and 20+ more
• [Browse the full setup guide](https://chatonbo.com/how-it-works) - if you want to see the whole flow end-to-end

Embedding a chatbot is one of those rare changes where the cost is five minutes and the benefit runs for years. Any website that takes inquiries, captures leads, or answers customer questions should have one.