> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usesimple.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Widget

> Embed the Simple AI chat widget and control it with JavaScript

Use the web widget to add chat to your website and route messages to your configured widget agents.

## Install

```html theme={null}
<script src="https://cdn.usesimple.ai/widget.js"></script>
<script>
  const widget = new window.SimpleWidget({
    widgetToken: 'YOUR_WIDGET_TOKEN'
  });

  widget.init();
</script>
```

You can find the widget token in Dashboard -> Widgets -> your widget -> Embed.

## Layout Modes

Set layout in Dashboard -> Widgets -> Appearance -> Layout, or pass `layout` in the script.

* `bubble`: Default floating launcher bubble.
* `tab`: Vertical side tab launcher.
* If `layout` is not provided, it defaults to `bubble`.

## Constructor Options

* `widgetToken` (required): Widget token from Dashboard.
* `layout` (optional): `bubble` or `tab` (default: `bubble`).
* `bottomSpacing` (optional): Distance in pixels from the page bottom (default: `28`).

### Bottom Spacing Example

```html theme={null}
<script src="https://cdn.usesimple.ai/widget.js"></script>
<script>
  const widget = new window.SimpleWidget({
    widgetToken: 'YOUR_WIDGET_TOKEN',
    bottomSpacing: 32
  });

  widget.init();
</script>
```

## JavaScript API

After creating a widget instance, you can control it programmatically:

* `widget.init()`: Initialize the widget and load config from your widget token.
* `widget.open()`: Open chat UI (also makes a hidden widget visible).
* `widget.close()`: Close chat UI.
* `widget.toggle()`: Toggle between open and closed.
* `widget.show()`: Show widget UI if hidden.
* `widget.hide()`: Hide widget UI.
* `widget.destroy()`: Remove widget DOM and event listeners.

## Tab Layout Example

```html theme={null}
<script src="https://cdn.usesimple.ai/widget.js"></script>
<script>
  const widget = new window.SimpleWidget({
    widgetToken: 'YOUR_WIDGET_TOKEN',
    layout: 'tab',
    bottomSpacing: 24
  });

  widget.init();
</script>
```