> ## Documentation Index
> Fetch the complete documentation index at: https://docs.boostgpt.co/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation
> Add a floating chat widget to any website
## Quick Start
Add this script tag to any page where you want the chat widget to appear:
```html theme={null}
```
That's it. A floating chat bubble will appear in the bottom-right corner of your page, styled with your AI teammate's branding.
## Find Your Bot ID
1. Open your AI teammate
2. Open **Settings**, then **Overview** under Channels
3. Your Bot ID is shown in the embed code snippet. You can also copy it with **Copy AI teammate ID**
## Data Attributes
You can configure the widget directly via data attributes on the script tag:
| Attribute | Description | Default |
| - | - | - |
| `data-bot-id` | **(Required)** Your AI teammate's UUID | — |
| `data-position` | Bubble position: `bottom-right` or `bottom-left` | `bottom-right` |
| `data-open-style` | Chat open behavior: `normal` or `dock` | `normal` |
| `data-dock-width` | Desktop dock width in pixels | `720` |
```html theme={null}
```
## Dock layout
Use dock mode when you want the widget to feel like the hosted chat input: a centered prompt bar at the bottom of the page that expands into a wider chat panel.
```html theme={null}
```
Dock mode uses your placeholder text and conversation starters when available.
## Framework Setup
```html HTML theme={null}
```
```jsx Next.js theme={null}
// app/layout.tsx (or pages/_app.tsx)
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
```js Nuxt.js theme={null}
// plugins/boostgpt.js
export default () => {
(function() {
var d = document;
var s = d.createElement('script');
s.src = 'https://embed.boostgpt.co/widget.js';
s.setAttribute('data-bot-id', 'YOUR_BOT_UUID');
s.async = 1;
d.getElementsByTagName('head')[0].appendChild(s);
})();
};
// nuxt.config.js
plugins: [
{ src: '~/plugins/boostgpt.js', mode: 'client' }
]
```
```jsx React theme={null}
// App.jsx (or any root component)
import { useEffect } from 'react';
function App() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://embed.boostgpt.co/widget.js';
script.setAttribute('data-bot-id', 'YOUR_BOT_UUID');
script.async = true;
document.head.appendChild(script);
return () => script.remove();
}, []);
return {/* your app */}
;
}
```
```vue Vue theme={null}
```
```svelte SvelteKit theme={null}
```
## Programmatic Initialization
For more control, initialize the widget via JavaScript:
```html theme={null}
```
## How It Works
1. The script fetches your AI teammate's branding (accent color, avatar, greeting messages) from the BoostGPT API
2. It injects a floating bubble button styled with your AI teammate's accent color and avatar
3. Greeting messages from your branding settings appear as stacked chat bubbles above the button
4. When clicked, an iframe opens with your AI teammate's full chat experience
5. The chat supports all features: streaming, tools, file uploads, workspaces, and custom interfaces
## Enable the Widget
Before the embed code appears, enable the widget in your AI teammate's settings:
1. Go to **Branding** → **Design** tab
2. Scroll to the **Chat Widget** section
3. Toggle **Enable Widget** on
4. Configure position and auto-open behavior
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.