Skip to main content

Adding Chat to Your Website

Put your AI agent on your website with a chat bubble that visitors can click to start conversations.

What you'll get​

A chat bubble appears on your website (usually in the bottom corner). When visitors click it, a chat window opens and they can talk to your agent.

How to set it up​

Step 1: Go to Channels​

  1. Go to Agents and select your agent
  2. Click Channels
  3. Click Chat Widget

Step 2: Customize the look​

Before getting your code, make it match your brand:

Agent icon Upload an image for the chat bubble and header. This could be your logo or a friendly avatar.

Colors Match your brand colors. You can usually customize:

  • Primary color (main buttons and header)
  • Text colors
  • Background colors

Welcome message What customers see when they open the chat. Something friendly like:

  • "Hi! How can I help you today?"
  • "Welcome! Ask me anything about our products."

Widget position Choose where the bubble appears:

  • Bottom-right (most common)
  • Bottom-left

Step 3: Get the embed code​

  1. Click the Embed tab
  2. Choose the embed type you want (see below)
  3. Copy the code snippet

Chat bubble — the floating bubble in the corner of your site. This is what most people want:

<script
  type="module"
  src="https://storage.theagentbuilder.ai/chat-bubble/embed.min.js"
  data-graph-id="GR-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  data-assistant-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  data-api="https://theagentbuilder.ai"
  data-position="bottom-right"
  defer
></script>

Inline chat (iframe) — embeds the chat directly into the page as a block, instead of a floating bubble. Good for a dedicated "Chat with us" or help page:

<iframe
  src="https://theagentbuilder.ai/chatbot-iframe/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  width="100%"
  style="height: 100%; min-height: 700px"
  frameborder="0"
></iframe>

Your own snippet contains IDs unique to your agent — always copy it from the Embed tab rather than retyping the examples above.

Step 4: Add to your website​

Paste the code into your website's HTML, just before the closing </body> tag.

Not sure how? Check our platform-specific guides:

Step 5: Test it​

  1. Visit your website
  2. Look for the chat bubble
  3. Click it and have a test conversation
  4. Make sure everything works and looks right

Customization options​

What you can change​

SettingWhat it does
IconThe image on the chat bubble
ColorsMatch your brand colors
Welcome messageFirst thing customers see
PositionWhere the bubble sits on the page
Watermark"Powered by" text (removable with a paid add-on)

Tips for customization​

Keep the icon simple It appears small. Use something recognizable at tiny sizes.

Match your brand Use your brand colors so the widget feels native to your site.

Write a warm welcome Your welcome message sets the tone. Make it inviting.

After deployment​

Verify it's working​

  • Check on different pages of your site
  • Test on mobile devices
  • Try different browsers
  • Have someone else test it too

Monitor conversations​

Go to Customers to see all customer chats. Look for:

  • Questions your agent handles well
  • Questions that need improvement
  • Common topics to add to training

Troubleshooting​

Widget not showing?

  • Check the code is in the right place
  • Clear your browser cache
  • Try a different browser
  • See Chat Widget Issues

Wrong colors or styling?

  • Go back to Channels and update settings
  • Make sure changes are saved
  • Hard refresh your page (Ctrl+Shift+R)

Agent not responding?

Removing the widget​

If you need to remove the chat:

  1. Delete the embed code from your website
  2. Optionally, disconnect in TAB by going to Channels

Next steps​