Як підключити віджет на сайт

Віджет ConnectiveOne дозволяє інтегрувати чат-ботів та підключення до операторів безпосередньо на вашому сайті. Ця стаття пояснює, як підключити віджет на ваш сайт.

Передумови

Активний бот в ConnectiveOne
Доступ до налаштувань бота
Можливість редагувати HTML код вашого сайту

Крок 1: Отримання коду вставки

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

Крок 2: Вставка коду на сайт

Вставте скопійований код на ваш сайт ближче до закриваючого тега </body>.

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

Приклад розміщення:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Мій сайт</title>
</head>
<body>
  <!-- Ваш контент -->
  
  <!-- Код віджету -->
  <div id="kwizbot_widget"></div>
  <script src="https://engine-instancename.connectiveone.io/kwjs_v2.js"></script>
  <script>
    kw('init', {
      bot_id: 1,
      language_code: "uk"
    });
  </script>
</body>
</html>

Опціонально: захист від перемальовування сторінкою

За замовчуванням віджет залишається в тому <div id="kwizbot_widget"></div>, де ви його розмістили. Це рекомендована поведінка для більшості сайтів.

Якщо платформа сайту перемальовує або видаляє блок, у який вставлено віджет, увімкніть опціональний прапорець move_to_body:

kw('init', {
  bot_id: 1,
  language_code: "uk",
  move_to_body: true
});

Коли прапорець увімкнено, віджет переносить свій змонтований root у document.body і видаляє порожні дублікати widget-placeholder, які сайт може створити пізніше. Використовуйте це лише для floating widget mode, не для inline або frame розміщення.

Крок 3: Налаштування доменів (CORS)

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

Перейдіть у Налаштування → Боти → оберіть бота → Widget.
У розділі «Список дозволених доменів для встановлення віджету» натисніть «Додати домен».
Введіть повний origin з протоколом, без слеша в кінці, без шляху та параметрів — наприклад, https://www.example.com.
Збережіть налаштування («Зберегти CORS» або кнопку збереження каналу).

Приклади:

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

📖 Детальніше: Налаштування CORS у віджеті

Крок 4: Мобільна версія

Для коректного відображення на мобільних пристроях додайте в тег <head>:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Перевірка роботи

Після вставки коду:

Оновіть сторінку сайту
Перевірте, чи з'явився віджет (лаунчер або кнопка)
Натисніть на віджет та перевірте, чи відкривається чат
Відправте тестове повідомлення та перевірте, чи отримуєте відповідь

Обмеження

На одній сторінці може бути лише один екземпляр віджету
Віджет працює тільки через HTTPS (крім localhost)
Домени для віджету повинні бути додані в CORS settings
Віджет потребує JavaScript для роботи