How to Manage Widget from Website

ConnectiveOne widget provides a JavaScript API for programmatic control of widget behavior from your website. This allows opening/closing chat, changing title, passing events to the scenario, and integrating the widget with your website.

Opening and Closing Chat

Open Chat

kw_event('openchat', 1);

Close Chat

kw_event('openchat', 0);

Usage Example:

// Open chat on button click
document.getElementById('open-chat-btn').addEventListener('click', function() {
  kw_event('openchat', 1);
});

// Close chat on button click
document.getElementById('close-chat-btn').addEventListener('click', function() {
  kw_event('openchat', 0);
});

Changing Title and Subtitle

Update chat title and subtitle:

kw_event('command', {
  title: "New Title",
  subtitle: "New Subtitle"
});

Usage Example:

// Change title when navigating to another page
if (window.location.pathname === '/products') {
  kw_event('command', {
    title: "Product Questions",
    subtitle: "Our consultants will help"
  });
}

Navigate to Scenario Entry Point

Call a specific alias in the scenario:

kw_event('emitevent', {
  event: 'alias',
  alias: 'test-alias'
});

Usage Example:

// Navigate to product scenario on click
document.getElementById('product-inquiry-btn').addEventListener('click', function() {
  kw_event('emitevent', {
    event: 'alias',
    alias: 'product-inquiry'
  });
  kw_event('openchat', 1); // Open chat
});

Saving Chat State

Save chat state in localStorage for restoration after reload:

kw_event('widgetstatus', 1);

After execution, the following is saved in localStorage:

• isChatOpen — widget state (collapsed/expanded)
• connectState — operator connection state

Restore State:

// Check saved state
const savedStatus = localStorage.getItem('kw_widget_status');
if (savedStatus) {
  const status = JSON.parse(savedStatus);
  if (status.isChatOpen) {
    kw_event('openchat', 1);
  }
}

Listening to Widget Events

You can listen to widget events for integration with your website:

// Chat opened
document.addEventListener("widgetChatOpened", function(event) {
  console.log('Chat opened', event);
  // Your handling code
  // For example, tracking in Google Analytics
  if (window.gtag) {
    window.gtag('event', 'widget_chat_opened');
  }
});

// Chat closed
document.addEventListener("widgetChatClosed", function(event) {
  console.log('Chat closed', event);
  // Your handling code
});

Combining Actions

You can combine different actions for complex scenarios:

// Open chat, change title, and navigate to alias
function openProductChat(productId) {
  kw_event('kwsetparamsfromsite', {
    params_from_site: {
      product_id: productId,
      action: 'product_inquiry'
    }
  });
  kw_event('command', {
    title: "Product Question",
    subtitle: "Our consultant will help"
  });
  kw_event('emitevent', {
    event: 'alias',
    alias: 'product-inquiry'
  });
  kw_event('openchat', 1);
}

// Usage
document.getElementById('product-btn').addEventListener('click', function() {
  openProductChat('12345');
});

Limitations

• Widget must be initialized before calling kw_event
• Some actions may not work if the widget is not loaded
• It's recommended to check for the kw_event function before calling

Related Articles

• Widget JavaScript API
• Work with SPA applications
• Pass parameters from website to scenario
• Data exchange with widget