Skip to main content

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

​
Display Modes

Control how the widget appears using the data-display-mode attribute:
ModeDescription
floating (default)Chat popup in the corner of the screen.
push-sidebarFull-height sidebar that pushes page content to the left.
overlay-sidebarFull-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, and sizing with Decimal.theme(). Can be called before or after the widget loads. 
Decimal.theme({
  colorScheme: 'dark',
  primaryColor: '#3B82F6',
  backgroundColor: '#18181B',
  textColor: '#FAFAFA',
});
See the full list of theme options.