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

Optional: Protect Widget From Host Page Re-Renders

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

To connect the widget on the website, you need to add your domain to the allowed list.

  1. Go to Bot Settings → select bot → Widget
  2. Find the CORS domains section
  3. Add your domain (specify domains without the "/" symbol at the end)

Example:

  • Correct: example.com, www.example.com
  • Incorrect: example.com/, https://example.com

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:

  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