How to Embed a Chatbase Chat Widget on Your Website

Once a Chatbase agent is trained, you publish it as a floating chat bubble with a single script tag. The same snippet works on a hand-coded site, a CMS, or a no-code builder like Framer or Webflow. This guide covers getting the snippet, placing it correctly, and customizing the look.

What you need

• A trained Chatbase agent (see the training guide)
• Access to your site's HTML, theme editor, or a custom-code block
• Your agent's Chatbase ID, shown on the Connect tab

Step 1: Open the Connect tab

Inside your agent, open Connect, then Embed. Chatbase offers two modes: a floating bubble that sits bottom-right on every page, and an iframe you place inside a specific container. The bubble is right for support; the iframe is right for a dedicated help page.

Step 2: Copy the bubble snippet

Copy the script tag. It loads the Chatbase embed library and points it at your agent by ID. Paste it just before the closing body tag so it loads after your page content.

<script>
  window.chatbaseConfig = { chatbotId: "abc123XYZ" };
</script>
<script
  src="https://www.chatbase.co/embed.min.js"
  id="abc123XYZ"
  defer>
</script>

Step 3: Customize the bubble

Back in Chatbase, the Chat Interface settings let you set the accent color, the bubble icon, the initial greeting message, and the alignment. These are saved server-side, so changes apply without editing your embed code again.

Step 4: Publish and test live

Publish your site, then load it in a private window so caching does not hide the change. The bubble should appear bottom-right. Click it, ask a question, and confirm the greeting and color match your settings.

Result

Your bot is now live as a branded bubble on every page that includes the snippet. To restrict it to certain pages, add the script only to those page templates instead of the global footer.