My Website

# How to Connect Widget to Website ConnectiveOne widget allows integrating chatbots and operator connections directly on your website. This article explains how to connect the widget to your website. --- ## Prerequisites - Active bot in ConnectiveOne - Access to bot settings - Ability to edit HTML code of your website --- ## Step 1: Getting Embed Code 1. Go to **Bot Settings** → select the needed bot 2. Go to the **Widget** section 3. Configure widget appearance in the constructor (if needed) 4. Copy the generated HTML+JS code --- ## Step 2: Inserting Code on Website Insert the copied code on your website closer to the closing `` tag. **Important:** Only one widget instance can be on one page. **Placement Example:** ```html My Website

``` ### Optional: Protect Widget From Host Page Re-Renders By default, the widget stays in the `

` where you placed it. This is the recommended behavior for most websites. If your website platform re-renders or removes the block where the widget was inserted, enable the optional `move_to_body` flag: ```javascript kw('init', { bot_id: 1, language_code: "uk", move_to_body: true }); ``` When enabled, the widget moves its rendered root to `document.body` and removes duplicate empty widget placeholders created later by the host page. Use this only for floating widget mode, not for `inline` or `frame` placement. --- ## Step 3: Configuring Domains (CORS) To connect the widget on the website, you need to add your site's **origin** to the allowed list. 1. Go to **Settings → Bots → select bot → Widget**. 2. In **"List of allowed domains for installing the widget"**, click **"Add domain"**. 3. Enter the **full origin** with protocol, no trailing slash, no path or query — for example, `https://www.example.com`. 4. Save (**"Save CORS"** or the channel save button). **Examples:** - Correct: `https://shop.example.com`, `http://localhost:5173` - Incorrect: `example.com`, `https://example.com/`, `https://example.com/page` > 📖 **More details:** [Widget CORS configuration](/en/channels/how-to/configure-widget-settings.md#configuring-cors-domains) --- ## Step 4: Mobile Version For correct display on mobile devices, add to the `` tag: ```html ``` --- ## Verification After inserting the code: 1. Refresh the website page 2. Check if the widget appeared (launcher or button) 3. Click on the widget and check if the chat opens 4. Send a test message and check if you receive a response --- ## Limitations - Only one widget instance can be on one page - Widget works only through HTTPS (except localhost) - Domains for widget must be added to CORS settings - Widget requires JavaScript to work --- ## Related Articles - [What is a widget](/en/channels/explanation/what-is-widget.md) - [Configure widget in Settings](/en/channels/how-to/configure-widget-settings.md) - [Pass parameters from website to scenario](/en/channels/how-to/pass-parameters-from-widget.md) - [Customize widget colors](/en/channels/how-to/customize-widget-colors.md)