Install the AI chat widget

The loader is under 6 KB. It renders a chat button and lazy-loads the chat on the first click or when the browser is idle. The widget runs in a Shadow DOM, so your CSS and the widget’s CSS don’t affect each other.

Find your bot id in Dashboard → Bot → Install.

Plain HTML

Paste before </body>:

<script src="https://w.feedbotai.com/v1/feedbot.js" data-bot-id="YOUR_BOT_ID" async></script>

Next.js (App Router)

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://w.feedbotai.com/v1/feedbot.js"
          data-bot-id="YOUR_BOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

To pass the signed-in user, see Identify users.

Options

Appearance comes from the dashboard. You can override it with data-* attributes on the script tag:

Attribute	Values	Description
`data-bot-id`	uuid	Required. Your bot id.
`data-open`	`"true"`	Open the chat on page load.
`data-position`	`bottom-right`, `bottom-left`	Button position.
`data-primary-color`	CSS color	Brand color.
`data-mode`	`inline`	Render inside a container instead of a floating button.
`data-container`	CSS selector	Container for inline mode, e.g. `#chat`.
`data-api-url`	URL	Custom API base URL (self-hosting and testing).

Inline mode

<div id="chat" style="height: 560px"></div>
<script
  src="https://w.feedbotai.com/v1/feedbot.js"
  data-bot-id="YOUR_BOT_ID"
  data-mode="inline"
  data-container="#chat"
  async
></script>

Allowed domains

In Bot → Settings → Allowed domains, list the domains where the widget may run. Requests from other origins are rejected, so nobody can use your bot and quota on their site.

Legacy widgets

Widgets installed with feedbot-0.0.x.js and FeedbotWidget.renderApp(...) keep working. You don’t need to change anything, but the new loader adds streaming, buttons, identify and the JS API.