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

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

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

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

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

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

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

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

Для підключення віджету на сайті необхідно додати ваш домен до списку дозволених.

  1. В розділі Widget знайдіть CORS domains
  2. Додайте ваш домен (вказуйте домени без символу "/" в кінці)

Приклад:

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

Важливо: Без додавання домену віджет не працюватиме на вашому сайті.

Налаштування 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() — функція для тригеру подій

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

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

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

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

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

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

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

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

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

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