Як керувати віджетом з сайту
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перед викликом