Getting Started

Add the chat widget to your website in 3 steps

Prerequisites

Before you begin, you'll need the following from your dashboard:

Client ID — from your organization's API keys
Assistant ID — the ID of the assistant you want to embed
Config ID — the widget configuration ID from the Customize page

Get your credentials

In the dashboard, go to Customize, select your widget config, and copy the Config ID. Find your Client ID and Assistant ID under Data Sources → Assistants.

Add the snippet

Choose your framework and paste the snippet into your app, replacing YOUR_CONFIG_ID with your actual Config ID.

<script
  src="https://widget.companin.tech/widget.js"
  data-client-id="YOUR_CLIENT_ID"
  data-assistant-id="YOUR_ASSISTANT_ID"
  data-config-id="YOUR_CONFIG_ID"
  data-locale="en">
</script>
<script>
  window.ChatWidgetConfig = {
    primaryColor: '#6366f1',
    position: 'bottom-right',
    greetingMessage: 'Hi! How can I help you today?',
  };
</script>

Done

The widget will appear on your page. It respects the position, colors, and behavior you configured in the dashboard.

Try the docs widget

The docs widget works the same way — load the script and call window.CompaninDocsWidget.open() to open it programmatically. Try it live:

<script
  src="https://widget.companin.tech/docs-widget.js"
  data-client-id="YOUR_CLIENT_ID"
  data-assistant-id="YOUR_ASSISTANT_ID"
  data-config-id="YOUR_CONFIG_ID"
  data-instance-id="docs-help"
  data-locale="en">
</script>

<button onclick="window.CompaninDocsWidget.open()">
  Ask the assistant
</button>