Skip to main content

​
Overview

Adding your Chatbase agent to a Webflow site takes the iFrame embed code from your Chatbase dashboard plus a container on your page. The container matters: without one, the widget stretches the full width of the page.

What you can do:

Put your AI agent in front of every visitor to your Webflow site, sized and placed exactly where you want it.

​
Before you start

  • A Chatbase account with an agent. If you haven’t built one yet, follow Your first agent.
  • A Webflow site you can edit in the Designer.

​
How to embed your agent

1

Copy your embed code

  1. Go to the dashboard of your Chatbase account.
  2. Click the agent you wish to integrate into your Webflow website.
  3. Click Channels in the left sidebar, then click Manage on the Chat bubble card (or Setup, if you haven’t configured it yet).
  4. Click Deploy and select the Website iFrame embed type. Click Copy to copy the provided HTML code.
The Deploy step in the Chatbase dashboard
Copying the iFrame embed code
2

Open your site in the Webflow Designer

Log into Webflow and go to your dashboard. Hover over the site you want to add the agent to and click Open Designer.
Opening a Webflow site in the Designer
Click the file icon (Pages) in the top-left corner and select the page you want to embed the agent on.
Selecting a page in the Webflow Designer
3

Build a container for the widget

A container keeps the widget from spanning the entire width of the page.
  1. Click the plus button (Add elements) in the top-left corner of the Designer.
  2. Drag a Section element to the part of the page where you want the agent.
  3. Drag a Container element onto the Section.
  4. Drag a Div element onto the Container, and set its size so the agent stays contained.
Building a Section, Container, and Div in the Webflow Designer
4

Add the Embed element and paste your code

Scroll down the list of elements and drag the Embed element onto the Div you just added.
Dragging the Embed element onto the Div in Webflow
Double-click the Embed element to open the HTML editor, paste your Chatbase embed code, and click Save & Close.
Pasting the embed code into the Webflow HTML editor
You should see a preview of the agent on the live preview of your Webflow site, right inside the Designer.
The Chatbase agent previewing inside the Webflow Designer

​
Troubleshooting

Possible cause: Webflow’s layout components take some getting used to, and the Embed element inherits its size from the Div you placed it in.Solution: adjust the size of the Div that wraps the Embed element. Webflow’s official documentation on the Embed element covers embedding third-party tools in more detail.
You can customize the appearance and colors of your agent on your Chatbase dashboard. Go to your dashboard, choose an agent, click Channels in the left sidebar, click Manage on the Chat bubble card, then open the Display tab to edit Content, Capabilities, Colors, Floating bubble, and Localization.

​
Next steps

Customize the chat bubble

Match the widget to your brand colors, position, and copy.