Skip to main content

Get Your Widget ID

Every bot in Annie has a unique Widget ID used to connect the chat widget to your assistant.
1

Open the Annie Portal

Log in to your Annie Portal.
2

Go to Settings

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.
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. For per-page overrides, use the <annie-widget> element instead of the query-string install. Drop the widgetId parameter from the script URL and add an <annie-widget> element with your attributes:
Any attribute set on <annie-widget> overrides the portal configuration for that page.

Position

Control where the chat bubble appears on your page.

Default State

Control how the widget appears when the page first loads.
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.

Margins

Adjust how far the chat bubble sits from the edges of the screen. Desktop and mobile are set separately, so you can clear a sticky footer or bottom navigation on mobile without moving the bubble on desktop (or the other way around). The default is 20 px on every side.
margin-bottom-desktop, margin-side-desktop, 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. The side margin applies to whichever side the widget is positioned on.

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.

Custom Size

Override the default dimensions with width and height attributes.
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.

Full Example

Here’s a complete example with common options configured:

Attribute Reference