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

​
Install

<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

<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

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