Create an assistant, set up OAuth authentication, and embed the widget on your website.
The widget app is hosted at widget.companin.tech and provides an easy way to embed a Customer Support AI Assistant into your website. To get started, you'll need to create an assistant and an OAuth application.
The widget is a lightweight, self-contained application that runs in an isolated iframe on your website. This architecture ensures that the widget won't conflict with your existing CSS or JavaScript, while maintaining excellent performance and security.
⚡ Quick Deployment
Most developers have the widget running on their site within 10 minutes. The setup process involves just three steps: creating credentials, configuring appearance, and adding a single script tag to your HTML.
First, create a Customer Support AI Assistant in your dashboard:
Your assistant is the AI brain behind the widget. It processes user messages, maintains conversation context, and generates intelligent responses. Each assistant can be customized with specific instructions, personality traits, and knowledge bases to match your use case.
Tip: Give your assistant clear, specific instructions about its role and limitations. For example: "You are a helpful customer support assistant for a SaaS product. You can answer questions about features, pricing, and account management. For technical issues, direct users to create a support ticket."
Create an OAuth application to authenticate your widget:
client_id from the created applicationThe simplest way to integrate the widget is by embedding it directly using an iframe. This method requires no JavaScript initialization and works out of the box. For multiple iframes on one page, keep each embed scoped to its own container and parameters.
<iframe src="https://widget.companin.tech/embed/session?clientId=YOUR_CLIENT_ID&assistantId=YOUR_ASSISTANT_ID&configId=YOUR_CONFIG_ID&locale=en" style="border:none; width:100%; height:600px; border-radius:8px;" title="Customer Support AI Assistant Widget"></iframe>Replace YOUR_CLIENT_ID and YOUR_ASSISTANT_ID with your actual values. The locale parameter can be set to match your site's language.
The recommended integration method is using our JavaScript widget loader, which provides automatic sizing, configuration management, and responsive behavior.
Add the following script tag to your HTML page:
<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-instance-id="support-widget" data-locale="en" data-dev="false"></script>Each attribute serves a specific purpose in configuring your widget:
data-client-id: Your OAuth client ID - This authenticates your application with our API. Think of it as your app's password.data-assistant-id: The UUID of your assistant - This identifies which Customer Support AI Assistant handles the conversations.data-config-id: The UUID of your widget configuration - This determines how your widget looks and behaves (colors, size, position, etc.).data-instance-id: Unique per-widget instance ID - Required when embedding multiple widgets on the same page to avoid collisions and enable per-instance API targeting.data-custom-css: (optional) Inline CSS rules that will be injected into the iframe's <head> before the app renders. Use this to override styles without modifying your config. URL-encoding is handled automatically.data-locale: Language code (e.g., "en", "es", "fr") - Sets the widget's display language. The assistant will still respond in any language users write in.data-dev: Set to "true" for development mode (localhost) - Use this when testing locally. Remove or set to "false" for production.The widget will automatically:
start_open settingstart_open setting from your configurationdata-dev="true" for localhost testing