Docs

Add the flowidget chat widget to your site. Copy the code below and paste it before the closing </body> tag. For Next.js/React, use the Widget component in your layout.

How to embed

Choose HTML or Next.js/React. For HTML, paste the script tag. For Next.js, add the Widget component and create components/widget.tsx.

HTML

1<script
2src=="https://widget-bot-ui.vercel.app/widget.js"
3user=="YOUR_USER_ID"
4preset=="retro"
5bubble=="outline"
6bubbleSize=="sm"
7avatar=="https://example.com/avatar.png"
8></script>

Next.js / React

Import the Widget in your layout and pass attrs. Create the component file below.

1. Layout (app/layout.tsx)

1import Widget from "@/components/widget";
2
3export default function RootLayout({ children }) {
4  return (
5    <html lang"en">
6      <body>
7        <Widget attrs{{
8          "src": "https://widget-bot-ui.vercel.app/widget.js",
9          "user": "YOUR_USER_ID",
10          "preset": "retro",
11          "bubble": "outline",
12          "bubbleSize": "sm",
13          "avatar": "https://example.com/avatar.png",
14        }} />
15        <main>{children}</main>
16      </body>
17    </html>
18  );
19}

2. Component (components/widget.tsx)

1"use client";
2
3import { useEffect } from "react";
4
5type WidgetAttrs = Record<string, string>;
6
7export default function Widget({ attrs = {} }: { attrs?: WidgetAttrs }) {
8  useEffect(() => {
9    const filtered = Object.fromEntries(
10      Object.entries(attrs).filter(([, v]) => v != null && v !== "")
11    );
12    const script = document.createElement("script");
13    Object.entries(filtered).forEach(([key, value]) => {
14      script.setAttribute(key, String(value));
15    });
16    script.async = true;
17    document.body.appendChild(script);
18    return () => {
19      if (document.body.contains(script)) document.body.removeChild(script);
20    };
21  }, [JSON.stringify(attrs)]);
22
23  return null;
24}

Anatomy

The Widget is a client component that injects a script tag. Add it inside your body, typically in the root layout. It accepts an attrs object with src, user, and data-* attributes.

1<body>
2  <Widget attrs{{ "src": "...", "user": "...", "preset": "retro", "bubble": "outline", "bubbleSize": "sm", "avatar": "https://example.com/avatar.png" }} />
3  <main>{children}</main>
4</body>
  • •Widget renders nothing—it only mounts the script.
  • •Pass attrs with src, user, and any data-* options.
  • •Replace YOUR_USER_ID with your ID from the dashboard.

Attributes

All attributes are passed as key-value pairs in the attrs object (React) or as script attributes (HTML).

userrequiredstring

Your flowidget user ID from the dashboard.

presetretro | neutral | 8bit

Visual style of the chat widget.

bubbleoutline | soft | (empty)

Message bubble style. Empty = default filled.

bubbleSizesm | md | lg

Size of message bubbles.

avatarURL

Image URL for the launcher button icon.

positionbottom-right | bottom-left | top-right | top-left

Where the launcher appears on screen.

Back to home