Adding the Chat Widget to Your Website

This guide shows you how to add the TAB chat bubble to any website or web app.

Get your embed code

Before you start, grab your personal embed code:

1. Go to your agent in TAB
2. Click Channels → Chat Widget
3. Click the Embed tab
4. Copy the script — it will look like this:

<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>

Your data-graph-id and data-assistant-id will be unique to your agent. Use your actual values in all the examples below.

---

Plain HTML

Paste the script just before the closing </body> tag in your HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body>

    <!-- Your page content here -->

    <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>
  </body>
</html>

If you have multiple pages, add it to every page you want the chat bubble to appear on, or add it to a shared layout/template file so it loads everywhere automatically.

---

Next.js

App Router (Next.js 13+)

Add the script to your root layout file at app/layout.tsx (or layout.js):

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}

        <Script
          src="https://storage.theagentbuilder.ai/chat-bubble/embed.min.js"
          strategy="afterInteractive"
          type="module"
          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"
        />
      </body>
    </html>
  );
}

Pages Router (Next.js 12 and below)

Add the script to pages/_app.tsx (or _app.js):

import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />

      <Script
        src="https://storage.theagentbuilder.ai/chat-bubble/embed.min.js"
        strategy="afterInteractive"
        type="module"
        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"
      />
    </>
  );
}

---

React (Vite / Create React App)

Add the script to your index.html file in the public/ folder, just before </body>:

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>

    <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>
  </body>
</html>

---

Vue.js / Nuxt

Vue.js (Vite)

Same as React — add the script to index.html before </body>:

<!-- index.html -->
<body>
  <div id="app"></div>

  <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>
</body>

Nuxt 3

Add the script in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      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: true,
        },
      ],
    },
  },
});

---

Webflow

1. Open your Webflow project
2. Go to Project Settings → Custom Code
3. Paste the script into the Footer Code section
4. Click Save
5. Publish your site

---

WordPress

1. Install a plugin like Insert Headers and Footers (or use your theme's footer)
2. Go to Settings → Insert Headers and Footers
3. Paste the script into the Scripts in Footer box
4. Save

Alternatively, if you're editing your theme directly, add it to footer.php just before </body>.

---

Verify it's working

After adding the script:

1. Visit your website — you should see the chat bubble in the bottom-right corner
2. Click it and send a test message
3. Check the Conversations section in TAB to confirm the message came through

If the bubble doesn't appear, right-click the page → Inspect → Console and look for any errors.

---

Troubleshooting

Chat bubble doesn't appear

• Make sure the script is placed before </body>, not inside <head>
• View the page source and search for theagentbuilder to confirm the script is present
• Try a hard refresh (Ctrl+Shift+R / Cmd+Shift+R)

Script loads but chat doesn't work

• Verify your agent is active and has credits
• Test the agent in the Playground first to rule out an agent issue

Content Security Policy (CSP) errors If your site uses a strict CSP, add this to allow the widget:

script-src 'self' https://storage.theagentbuilder.ai;
connect-src 'self' https://theagentbuilder.ai;

Need help?

If you're stuck, contact our support team with:

• What platform or framework you're using
• What you've tried
• Any error messages from the browser console