> ## Documentation Index
> Fetch the complete documentation index at: https://docs.helloannie.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Website Chat Widget
> Add Annie's chat widget to your website so visitors can chat with your AI assistant directly.
## Get Your Widget ID
Every bot in Annie has a unique **Widget ID** used to connect the chat widget to your assistant.
Log in to your [Annie Portal](https://app.helloannie.co).
Navigate to **Settings** and set up your chat widget. Your Widget ID will be displayed here — copy it for use in the embed code below.
## Install the Widget
Add the following snippet to your website. Replace `YOUR_WIDGET_ID` with your actual Widget ID. You can also find this install script in the widget settings in your [Annie Portal](https://app.helloannie.co).
```html theme={null}
Your Website
```
The widget will appear as a floating chat bubble in the bottom-right corner of your page.
## Configuration
Most widget settings are managed from the **Settings** area of your [Annie Portal](https://app.helloannie.co). For per-page overrides, use the `` element instead of the query-string install. Drop the `widgetId` parameter from the script URL and add an `` element with your attributes:
```html theme={null}
```
Any attribute set on `` overrides the portal configuration for that page.
### Position
Control where the chat bubble appears on your page.
```html theme={null}
```
### Default State
Control how the widget appears when the page first loads.
```html theme={null}
```
You can set a different default state for mobile devices using `default-state-mobile`.
### Delay
Wait a number of seconds before showing the widget when the page first loads.
```html theme={null}
```
### Mobile Margins
Adjust how far the chat bubble sits from the edges of the screen on mobile. Useful when your page has a sticky footer or bottom navigation the bubble would otherwise cover.
```html theme={null}
```
Both `margin-bottom-mobile` and `margin-side-mobile` can also be set in the Annie Portal under the widget's **Advanced** section. The attribute values override whatever is configured in the portal, so you can adjust placement per-page.
## Inline Mode (Custom Position)
Instead of a floating bubble, you can embed the widget directly into your page layout. This is useful for landing pages, contact pages, or any place where you want the chat to be part of the page content.
Set `position="custom"` and the widget renders inline at its default size with no floating button.
```html theme={null}
```
### Custom Size
Override the default dimensions with `width` and `height` attributes.
```html theme={null}
```
In inline mode, the widget is always visible — there is no open/close button. Use the JavaScript API below if you need to show or hide it programmatically.
## JavaScript API
The widget exposes a global API at `window.__annie.widget` for programmatic control.
```javascript theme={null}
// Open the chat
window.__annie.widget.open()
// Close the chat
window.__annie.widget.close()
// Toggle open/closed
window.__annie.widget.toggle()
// Check if the chat is open
window.__annie.widget.isOpen() // true or false
```
## Full Example
Here's a complete example with common options configured:
```html theme={null}
```
## Attribute Reference
| Attribute | Type | Default | Description |
| ---------------------- | ------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| `widget-id` | `string` | *required* | Your bot's Widget ID |
| `position` | `"right"` \| `"left"` \| `"custom"` | `"right"` | Where the widget appears. `"custom"` enables inline mode. |
| `default-state` | `"open"` \| `"closed"` \| `"preview"` | `"preview"` | Initial state on desktop |
| `default-state-mobile` | `"open"` \| `"closed"` \| `"preview"` | `"closed"` | Initial state on mobile |
| `delay` | `number` | `0` | Seconds to wait before showing the widget |
| `margin-bottom-mobile` | `number` | `20` | Space in px between the chat bubble and the bottom of the screen on mobile. Overrides the value set in the Annie Portal. |
| `margin-side-mobile` | `number` | `20` | Space in px between the chat bubble and the side of the screen on mobile. Overrides the value set in the Annie Portal. |
| `width` | `string` | `"380px"` | Widget width (inline mode only) |
| `height` | `string` | `"612px"` | Widget height (inline mode only) |