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

# Installation

> Add the Decimal chat widget to your website with a simple script tag.

## Embed Code

Add this snippet before the closing `</body>` tag of your website:

```html theme={null}
<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://app.getdecimal.ai/widget/v1/widget.js';
    s.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
    s.setAttribute('data-public-config', 'YOUR_CONFIG_TOKEN');
    s.async = true;
    document.head.appendChild(s);
  })();
</script>
```

Replace `YOUR_WIDGET_ID` and `YOUR_CONFIG_TOKEN` with the values from the widget configuration page. The exact snippet with pre-filled tokens is available under **Chat Widgets > Installation**.

For authenticated users, see [Identity Verification](/chat-widgets/identity-verification).

## Content Security Policy (CSP)

If your site uses a Content Security Policy, add the following directives to allow the widget:

```
script-src https://app.getdecimal.ai
frame-src https://app.getdecimal.ai
```

* **script-src** — allows loading the widget script.
* **frame-src** — allows the widget iframe to load.

## Data Attributes

Configure the widget declaratively by setting attributes on the script tag. Everything except the widget ID is optional.

| Attribute                | Description                                                                                                                                                            | Default        |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `data-widget-id`         | **Required.** The widget's ID from the configuration page.                                                                                                             | —              |
| `data-public-config`     | Signed config token from the configuration page.                                                                                                                       | —              |
| `data-display-mode`      | `floating`, `push-sidebar`, or `overlay-sidebar`. See [Display Modes](#display-modes).                                                                                 | `floating`     |
| `data-primary-color`     | Launcher button and accent color. Overridden by [`Decimal.theme()`](/chat-widgets/api-reference#decimalthemeoptions).                                                  | `#18181B`      |
| `data-hide-button`       | Present (no value) to hide the launcher button. See [Hiding the Launcher Button](#hiding-the-launcher-button).                                                         | off            |
| `data-disable-autoboot`  | Present (no value) to skip auto-boot so you can call [`Decimal.boot()`](/chat-widgets/api-reference#decimalbootoptions) yourself. Required for authenticated sessions. | off            |
| `data-header-title`      | Title shown in the widget header.                                                                                                                                      | Widget default |
| `data-header-subtitle`   | Subtitle under the header title.                                                                                                                                       | Widget default |
| `data-greeting`          | Greeting headline on the empty conversation screen.                                                                                                                    | Widget default |
| `data-greeting-subtitle` | Text under the greeting headline.                                                                                                                                      | Widget default |

```html theme={null}
<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://app.getdecimal.ai/widget/v1/widget.js';
    s.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
    s.setAttribute('data-public-config', 'YOUR_CONFIG_TOKEN');
    s.setAttribute('data-header-title', 'Acme Support');
    s.setAttribute('data-greeting', 'Hi there 👋');
    s.async = true;
    document.head.appendChild(s);
  })();
</script>
```

<Note>
  By default the widget boots automatically once the page loads. Set `data-disable-autoboot` and call [`Decimal.boot()`](/chat-widgets/api-reference#decimalbootoptions) when you need to pass a `user_token` or `metadata` — for example after your app knows who the signed-in user is.
</Note>

## Display Modes

Control how the widget appears using the `data-display-mode` attribute:

| Mode                 | Description                                                  |
| -------------------- | ------------------------------------------------------------ |
| `floating` (default) | Chat popup in the corner of the screen.                      |
| `push-sidebar`       | Full-height sidebar that pushes page content to the left.    |
| `overlay-sidebar`    | Full-height sidebar on the right that overlays page content. |

```js theme={null}
s.setAttribute('data-display-mode', 'push-sidebar');
```

Sidebar modes show a vertical "Ask AI" tab on the right edge that opens the chat when clicked. The sidebar is resizable by dragging its left edge.

## Hiding the Launcher Button

Hide the default launcher button with `data-hide-button`:

```js theme={null}
s.setAttribute('data-hide-button', '');
```

When the button is hidden, use [`Decimal.show()`](/chat-widgets/api-reference#decimalshowoptions) and [`Decimal.hide()`](/chat-widgets/api-reference#decimalhide) to control visibility. Useful for custom trigger buttons or embedding in iframes.

## Customization

Customize colors, position, sizing, and content with [`Decimal.theme()`](/chat-widgets/api-reference#decimalthemeoptions). Can be called before or after the widget loads.

```js theme={null}
Decimal.theme({
  colorScheme: 'dark',
  primaryColor: '#3B82F6',
  backgroundColor: '#18181B',
  textColor: '#FAFAFA',
  headerTitle: 'Acme Support',
});
```

See the [full list of theme options](/chat-widgets/api-reference#decimalthemeoptions).