Як керувати віджетом з сайту

ConnectiveOne віджет надає JavaScript API для програмного керування поведінкою віджету з вашого сайту. Це дозволяє відкривати/закривати чат, змінювати заголовок, передавати події до сценарію та інтегрувати віджет з вашим сайтом.

Відкриття та закриття чату

Відкрити чат

kw_event('openchat', 1);

Закрити чат

kw_event('openchat', 0);

Приклад використання:

// Відкрити чат при кліку на кнопку
document.getElementById('open-chat-btn').addEventListener('click', function() {
  kw_event('openchat', 1);
});

// Закрити чат при кліку на кнопку
document.getElementById('close-chat-btn').addEventListener('click', function() {
  kw_event('openchat', 0);
});

Зміна заголовка та підзаголовка

Оновіть заголовок та підзаголовок чату:

kw_event('command', {
  title: "Новий заголовок",
  subtitle: "Новий підзаголовок"
});

Приклад використання:

// Змінити заголовок при переході на іншу сторінку
if (window.location.pathname === '/products') {
  kw_event('command', {
    title: "Питання про товари",
    subtitle: "Наші консультанти допоможуть"
  });
}

Перехід до точки входу в сценарій

Викликайте конкретний alias в сценарії:

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

Приклад використання:

// Перехід до сценарію про продукт при кліку
document.getElementById('product-inquiry-btn').addEventListener('click', function() {
  kw_event('emitevent', {
    event: 'alias',
    alias: 'product-inquiry'
  });
  kw_event('openchat', 1); // Відкрити чат
});

Збереження стану чату

Збережіть стан чату в localStorage для відновлення після перезавантаження:

kw_event('widgetstatus', 1);

Після виконання в localStorage зберігається:

• isChatOpen — стан віджета (згорнутий/розгорнутий)
• connectState — стан підключення оператора

Відновлення стану:

// Перевірка збереженого стану
const savedStatus = localStorage.getItem('kw_widget_status');
if (savedStatus) {
  const status = JSON.parse(savedStatus);
  if (status.isChatOpen) {
    kw_event('openchat', 1);
  }
}

Слухання подій віджету

Ви можете слухати події віджету для інтеграції з вашим сайтом:

// Чат відкрито
document.addEventListener("widgetChatOpened", function(event) {
  console.log('Чат відкрито', event);
  // Ваш код обробки
  // Наприклад, відстеження в Google Analytics
  if (window.gtag) {
    window.gtag('event', 'widget_chat_opened');
  }
});

// Чат закрито
document.addEventListener("widgetChatClosed", function(event) {
  console.log('Чат закрито', event);
  // Ваш код обробки
});

Комбінування дій

Ви можете комбінувати різні дії для складних сценаріїв:

// Відкрити чат, змінити заголовок та перейти до alias
function openProductChat(productId) {
  kw_event('kwsetparamsfromsite', {
    params_from_site: {
      product_id: productId,
      action: 'product_inquiry'
    }
  });
  kw_event('command', {
    title: "Питання про товар",
    subtitle: "Наш консультант допоможе"
  });
  kw_event('emitevent', {
    event: 'alias',
    alias: 'product-inquiry'
  });
  kw_event('openchat', 1);
}

// Використання
document.getElementById('product-btn').addEventListener('click', function() {
  openProductChat('12345');
});

Обмеження

• Віджет повинен бути ініціалізований перед викликом kw_event
• Деякі дії можуть не працювати, якщо віджет не завантажений
• Рекомендується перевіряти наявність функції kw_event перед викликом

Пов'язані статті

• JavaScript API для керування віджетом
• Робота з SPA додатками
• Передача параметрів з сайту до сценарію
• Обмін даними з виджетом