Installation - Decimal

Embed Code

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

<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.

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.	`floating`
`data-primary-color`	Launcher button and accent color. Overridden by `Decimal.theme()`.	`#18181B`
`data-hide-button`	Present (no value) to hide the launcher button. See Hiding the Launcher Button.	off
`data-disable-autoboot`	Present (no value) to skip auto-boot so you can call `Decimal.boot()` 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

<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>

By default the widget boots automatically once the page loads. Set data-disable-autoboot and call Decimal.boot() when you need to pass a user_token or metadata — for example after your app knows who the signed-in user is.

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.

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:

s.setAttribute('data-hide-button', '');

When the button is hidden, use Decimal.show() and Decimal.hide() to control visibility. Useful for custom trigger buttons or embedding in iframes.

Customization

Customize colors, position, sizing, and content with Decimal.theme(). Can be called before or after the widget loads.

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

See the full list of theme options.

​Embed Code

​Content Security Policy (CSP)

​Data Attributes

​Display Modes

​Hiding the Launcher Button

​Customization

Embed Code

Content Security Policy (CSP)

Data Attributes

Display Modes

Hiding the Launcher Button

Customization