Skip to main content

Overview

Adding your Chatbase agent to a Weebly website takes two things: the iFrame embed code from your Chatbase dashboard, and Weebly’s Embed Code widget. Once pasted, your agent appears on the page.

What you can do:

Put your AI agent in front of every visitor to your Weebly site, answering questions without them leaving the page.

Before you start

  • A Chatbase account with an agent. If you haven’t built one yet, follow Your first agent.
  • A Weebly website you can edit.

How to embed your agent

1

Copy your embed code

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

Open your Weebly site editor

Sign in to your Weebly account, head to the Edit site page, and select the page to edit.
3

Add the Embed Code widget

From the Basic toolbar on the left side of the editing page, locate the Embed Code widget.
The Embed Code widget in the Weebly Basic toolbar
Drag the Embed Code element to wherever you want your agent to appear on the page.
Dragging the Embed Code element onto a Weebly page
4

Paste the embed code

You’ll see a text element that says Click to set custom HTML where the widget was placed. Click the text, then click Edit Custom HTML, and paste your Chatbase embed code into the box.
Pasting the embed code into the Weebly custom HTML box
Click outside the element and confirm your agent appears on the page.
The Chatbase agent live on a Weebly website
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.