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

Go to Bot Settings → select the needed bot
Go to the Widget section
Configure widget appearance in the constructor (if needed)
Copy the generated HTML+JS code

Step 2: Inserting Code on Website

Insert the copied code on your website closer to the closing </body> tag.

Important: Only one widget instance can be on one page.

Placement Example:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <!-- Your content -->
  
  <!-- Widget code -->
  <div id="kwizbot_widget"></div>
  <script src="https://engine-instancename.connectiveone.io/kwjs_v2.js"></script>
  <script>
    kw('init', {
      bot_id: 1,
      language_code: "uk"
    });
  </script>
</body>
</html>

By default, the widget stays in the <div id="kwizbot_widget"></div> 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:

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.

Go to Settings → Bots → select bot → Widget.
In "List of allowed domains for installing the widget", click "Add domain".
Enter the full origin with protocol, no trailing slash, no path or query — for example, https://www.example.com.
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

Step 4: Mobile Version

For correct display on mobile devices, add to the <head> tag:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Verification

After inserting the code:

Refresh the website page
Check if the widget appeared (launcher or button)
Click on the widget and check if the chat opens
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