What is ConnectiveOne Widget

ConnectiveOne widget is an interactive component that allows integrating chatbots and operator connections directly on your website. The widget supports bot scenario execution, message exchange, parameter passing from the website, and full customization of appearance.

Why Do You Need a Widget?

The widget helps:

  • Provide direct contact — clients can reach out for help directly on the website
  • Automate initial communication — bots process requests and provide responses
  • Transfer to operators — ability to transfer to operators in real time
  • Pass context from website — UTM tags, user ID, product data are available in the scenario

Widget Types

The widget is available in several formats:

  • Mini widget — avatar or button that opens a chat window when clicked. Usually used on websites
  • Chat frame — large frame for integration into personal account or other software. Convenient for desktop work
  • Multi-channel selection — allows choosing a messenger or chat

How Does the Widget Work?

Initialization

  1. You insert the widget code on your website
  2. The widget loads and initializes with parameters
  3. Socket.IO connection to ConnectiveOne is established
  4. Message history is loaded (if available)

Message Exchange

  1. User enters a message in the widget
  2. Message is sent through Socket.IO to the server
  3. During request processing by an agent, an "agent thinking" indicator appears in the widget with animation and text informing the user about the current work stage
  4. Scenario processes the message and generates a response
  5. The indicator automatically disappears when a response is received
  6. Response is displayed in the widget

Parameter Passing

  1. You pass parameters through params_from_site during initialization
  2. Parameters are automatically added to each message
  3. Parameters are available in the scenario through {{param_name}}

Widget Versions

The widget is available in two versions:

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

💡 Recommendation: Use V2 for all new integrations. Use Legacy only if you already have an existing integration that requires compatibility.

Widget State Indicator

During request processing by an agent, an "agent thinking" indicator is displayed in the widget, which:

  • Appears automatically during request processing by an agent
  • Shows an animated indicator with text about the current work stage
  • Automatically disappears when a response is received or timeout is reached
  • Can be configured through node parameters in the scenario (custom text)
  • Prevents sending new messages during active typing

This improves UX by reducing user anxiety and increasing trust in the system while waiting for a response, especially during long operations (database search, external tool calls, information analysis).

Where to Configure the Widget?

Main widget settings are located in:

  • Settings → Bots → select bot → Widget — generate embed code, configure CORS domains, Custom Code
  • Widget Demo (/widget/{locale}/?bot-id={bot_id}) — configure widget appearance, colors
  • Scenarios — configure custom "agent thinking" indicator text through node parameters

Explanation

How-to