How to Configure Widget in Settings

The widget can be configured in ConnectiveOne Settings. Here you will generate embed code, configure CORS domains, add Custom Code, and configure other parameters.

Where to Find Settings

Path: Settings → Bots → select bot → Widget

Generating Embed Code

  1. Go to Settings → Bots → select bot → Widget
  2. Configure widget appearance in the constructor (if needed)
  3. Copy the generated HTML+JS code
  4. Insert the code on your website

💡 Tip: Code is generated automatically based on your settings. You can change parameters and copy the updated code.

Configuring CORS Domains

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

  1. In the Widget section, find CORS domains
  2. Add your domain (specify domains without the "/" symbol at the end)

Example:

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

Important: Without adding the domain, the widget will not work on your website.

Configuring Custom Code

Custom Code allows adding custom JavaScript code that executes before widget initialization.

  1. In the Widget section, find Custom Code
  2. Enter your JavaScript code
  3. Save settings

Custom Code Example:

// Modify parameters before initialization
embed_state.params_from_site = {
  ...embed_state.params_from_site,
  page_url: window.location.href
};

// Integration with Google Analytics
if (window.gtag) {
  window.addEventListener('widgetChatOpened', function() {
    window.gtag('event', 'widget_chat_opened');
  });
}

Available Objects in Custom Code:

  • embed_state — widget state before initialization
  • kw_event() — function to call events
  • kw_event_trigger() — function to trigger events

Configuring Widget Version

The widget is available in two versions:

  • V2 (current, recommended) — used by default
  • Legacy (compatibility mode) — only for supporting old integrations

Where to find: Settings → Bot Settings → Hooks → Widget → parameter v2_mode and v2_value

💡 Recommendation: Use V2 for all new integrations.

Configuring Colors

Widget colors can be configured:

  1. Through Widget Demo (/widget/{locale}/?bot-id={bot_id}) — visual constructor
  2. Through the color parameter during widget initialization
  3. Through kw_event('kwcolor', {...}) during operation

📖 More details: See Customize widget colors