Як налаштувати віджет в Налаштування

Віджет можна налаштувати в Налаштування ConnectiveOne. Тут ви згенеруєте код вставки, налаштуєте CORS домени, додасте Custom Code, задасте кастомну іконку для операторської панелі та налаштуєте інші параметри.

Де знайти налаштування

Шлях: Налаштування → Боти → оберіть бота → Widget

Генерація коду вставки

  1. Перейдіть в Налаштування → Боти → оберіть бота → Widget
  2. Налаштуйте вигляд віджету в конструкторі (якщо потрібно)
  3. Скопіюйте згенерований HTML+JS код
  4. Вставте код на ваш сайт

💡 Порада: Код генерується автоматично з урахуванням ваших налаштувань. Ви можете змінити параметри та скопіювати оновлений код.

Налаштування CORS доменів

Для підключення віджету на сайті необхідно додати origin вашого сайту до списку дозволених. Система зберігає список як JSON-масив повних URL origin.

Де налаштувати

  • Налаштування → Боти → оберіть бота → Widget — розділ «Список дозволених доменів для встановлення віджету».
  • Конструктор сценаріїв → конфігурація каналу Widget у стартовому вузлі.

Формат origin

  1. Вкажіть повний URL origin з протоколом: https://www.example.com або http://localhost:3000.
  2. Без слеша в кінці: не https://www.example.com/.
  3. Без шляху і параметрів: не https://www.example.com/page і не https://www.example.com?ref=1.
  4. Лише http: або https: — інші протоколи не підтримуються.

Приклади:

  • Правильно: https://shop.example.com, https://www.example.com, http://localhost:5173
  • Неправильно: example.com, www.example.com, https://example.com/, ftp://example.com

Кроки в редакторі

  1. Відкрийте один із розділів вище.
  2. Натисніть «Додати домен» і введіть origin у поле (підказка: https://www.example.com).
  3. Додайте всі потрібні origins (наприклад, https://shop.example.com і https://www.shop.example.com — це разні origins).
  4. Видаліть рядок іконкою видалення, якщо домен не потрібен.
  5. Натисніть «Зберегти CORS» (або кнопку збереження каналу в налаштуваннях бота / Конструкторі сценаріїв). Кнопка недоступна, поки в списку є некоректний URL.

⚠️ Важливо: Без додавання origin віджет не підключиться до Socket.IO з вашого сайту. Якщо раніше в інстансі збережено список у старому форматі (кома-розділений текст), система може тимчасово використовувати його при читанні — перезбережіть список через редактор, щоб зафіксувати коректний формат.

Налаштування Custom Code

Custom Code дозволяє додати кастомний JavaScript код, який виконується перед ініціалізацією віджету.

  1. В розділі Widget знайдіть Custom Code
  2. Введіть ваш JavaScript код
  3. Збережіть налаштування

Приклад Custom Code:

// Модифікація параметрів перед ініціалізацією
embed_state.params_from_site = {
  ...embed_state.params_from_site,
  page_url: window.location.href
};

// Інтеграція з Google Analytics
if (window.gtag) {
  window.addEventListener('widgetChatOpened', function() {
    window.gtag('event', 'widget_chat_opened');
  });
}

Доступні об'єкти в Custom Code:

  • embed_state — стан віджету перед ініціалізацією
  • kw_event() — функція для виклику подій
  • kw_event_trigger() — функція для тригеру подій

Кастомна іконка віджету в операторській панелі

Ви можете задати власну іконку для каналу Widget, яка відображатиметься в Операторській панелі поруч із чатами з цього виджету. Це допомагає операторам візуально відрізняти джерела звернень (наприклад, виджет на сайті та PWA-додаток).

  1. Перейдіть у Налаштування → Налаштування бота → Hooks → Widget
  2. Знайдіть поле widget badge_url (URL кастомної іконки)
  3. Введіть повний URL зображення (наприклад, https://example.com/icon.png)
  4. Збережіть налаштування

Результат: У списку чатів операторської панелі замість стандартної іконки виджету відображатиметься ваша іконка.

💡 Порада: Якщо URL невалідний або зображення недоступне, система покаже стандартну іконку виджету.

⚠️ Обмеження: Одна іконка на одного бота. Якщо потрібно відрізняти кілька точок входу (наприклад, сайт і PWA), створіть окремих ботів для кожного джерела.

Налаштування також доступне в Scenario Builder при конфігурації каналу Widget у стартовому вузлі сценарію.

Налаштування версії віджету

Віджет доступний у двох версіях:

  • V2 (актуальна, рекомендована) — використовується за замовчуванням
  • Legacy (режим сумісності) — тільки для підтримки старих інтеграцій

Де знайти: Налаштування → Налаштування бота → Hooks → Widget → параметр v2_mode та v2_value

💡 Рекомендація: Використовуйте V2 для всіх нових інтеграцій.

Налаштування кольорів

Кольори віджету можна налаштувати:

  1. Через Widget Demo (/widget/{locale}/?bot-id={bot_id}) — візуальний конструктор
  2. Через параметр colors при ініціалізації віджету
  3. Через kw_event('kwcolor', {...}) під час роботи

📖 Детальніше: Дивіться Кастомізація кольорів віджету

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