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>

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