How to Add an AI Chatbot to Your Website: Chat Bubble, Iframe, or Plugin

Training the chatbot is the hard part. Putting it on your website is a two-minute job — once you pick the right deployment method.

There are three ways to embed an AI support agent like Chatbase on a site: a floating chat bubble script, an inline iframe, or a platform plugin that skips the code entirely. Here’s how each works, verified against Chatbase’s current documentation, and how to choose.

Option 1: The chat bubble (most websites)

A small floating button in the corner of every page — the pattern customers already know from Intercom and Crisp.

In Chatbase: open your agent, go to Channels → Chat Bubble → Manage → Deploy → Website widget, copy the script, and paste it into your site’s HTML before the closing </body> tag (or in the <head> if you want it available earlier — it loads asynchronously either way, so it won’t block your page).

<!-- before </body> on every page where chat should appear -->
<script>
  /* the embed snippet Chatbase gives you — one line loads it */
</script>

Best for: business sites, blogs, stores — anywhere you want help available without dedicating page space to it. The bubble stays out of the way until clicked and works well on mobile.

Option 2: The iframe (dedicated support section)

The full chat interface embedded inline in your page — always open, always visible:

<iframe
  id="chatbase-iframe"
  src="https://www.chatbase.co/chatbot-iframe/YOUR_AGENT_ID"
  width="100%"
  style="height: 100%; min-height: 700px"
  frameborder="0"
  referrerpolicy="no-referrer-when-downgrade"
  allow="microphone"
></iframe>

You’ll find the snippet in the same place: Channels → Chat Bubble → Deploy → Website iframe.

The iframe is also the escape hatch for restricted platforms — a site builder or CMS that strips third-party JavaScript will often still allow an iframe. It’s also how you embed inside a mobile app’s WebView.

Best for: a /support or /help page, a help center, a dashboard panel — anywhere chat should be the main event rather than a corner button. Under the hood, the chat bubble’s script actually creates this same iframe and talks to it via postMessage, so behaviour is identical; only the presentation differs.

Option 3: A platform plugin (no code at all)

If your site runs on a common platform, you may not touch HTML at all:

• WordPress — Chatbase has an official plugin; you paste your Agent ID and the bubble appears.
• Shopify — the integration adds the chat bubble to your store automatically.
• Other builders — check whether the platform supports “custom code injection” (WordPress.com, Squarespace, Wix and Webflow all do on certain plans); if it does, the bubble script works there too.

Best for: anyone who’d rather not edit theme files — and on Shopify, it’s genuinely the easiest path.

Which should you choose?

Situation	Pick
Standard website, want help on every page	Chat bubble
Dedicated support/help-center page	Iframe
WordPress or Shopify	Plugin/integration
Platform blocks <script> tags	Iframe
Mobile app	Iframe inside a WebView

Before you flip it live

Two things the deployment docs won’t tell you:

1. Test the answers first. A beautifully embedded bot that invents your return policy is worse than no bot. Run a fixed question set before enabling the agent — here’s the 18-question set we use.

2. Check the enabled/disabled state. In Chatbase, a disabled agent is only visible to your workspace members — embedding it shows nothing to visitors. Enable it in the dashboard once testing passes, not before.

And if you’re still at the stage where the bot answers badly no matter what you upload, the fix usually isn’t deployment — it’s the knowledge base. Here’s the document set that works.