Пояснення
Markdown статтіПовідомити про помилку

Що таке віджет ConnectiveOne

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

Сценарії використання та доступні формати дивіться в огляді віджета ConnectiveOne для сайту.

Навіщо потрібен віджет?

Віджет допомагає:

  • Забезпечити безпосередній контакт — клієнти можуть звернутися за допомогою безпосередньо на сайті
  • Автоматизувати первинну комунікацію — боти обробляють запити та надають відповіді
  • Перейти до операторів — можливість переходу до операторів у реальному часі
  • Передати контекст з сайту — UTM-мітки, ID користувача, дані про товар доступні в сценарії

Типи віджету

Віджет доступний у кількох форматах:

  • Міні-віджет — аватарка або кнопка, після натискання на яку з'являється вікно чату. Зазвичай використовується на сайтах
  • Фрейм чату — великий фрейм для інтеграції в особистий кабінет або інше ПЗ. Зручно для роботи з ПК
  • Мульти-канальний вибір — дозволяє обрати месенджер або чат

Як працює віджет?

Ініціалізація

  1. Ви вставляєте код віджету на ваш сайт
  2. Віджет завантажується та ініціалізується з параметрами
  3. Встановлюється Socket.IO підключення до ConnectiveOne
  4. Завантажується історія повідомлень (якщо є)

Обмін повідомленнями

  1. Користувач вводить повідомлення в віджет
  2. Повідомлення відправляється через Socket.IO на сервер
  3. Під час обробки запиту агентом у віджеті з'являється індикатор "агент думає" з анімацією та текстом, який інформує користувача про поточний етап роботи
  4. Сценарій обробляє повідомлення та генерує відповідь
  5. Індикатор автоматично зникає при отриманні відповіді
  6. Відповідь відображається в віджеті

Передача параметрів

  1. Ви передаєте параметри через params_from_site при ініціалізації
  2. Параметри автоматично додаються до кожного повідомлення
  3. Параметри доступні в сценарії через {{param_name}}

Дані про клієнта та платформу

За замовчуванням віджет додає до параметрів з сайту IP-адресу, рядок браузера (user agent), тип платформи запуску (веб-браузер, вбудований чат у застосунку для iOS або Android) і домен сторінки, де відкрито чат. Це допомагає операторам бачити контекст звернення в чаті.

Показники платформи та сайту-джерела також зберігаються в статистиці по діалогах каналу віджета і можуть використовуватися у звітах та дашбордах (зокрема у модулі Статистика). Якщо ви передасте власні значення source_platform або source_hostname у params_from_site при ініціалізації, у статистиці збережуться ваші значення.

📖 Детальніше: Як передати параметри з сайту до сценарію

Версії віджету

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

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

💡 Рекомендація: Використовуйте V2 для всіх нових інтеграцій. Legacy використовуйте тільки якщо у вас вже є існуюча інтеграція, яка вимагає сумісності.

Індикатор стану віджета

Під час обробки запиту агентом у віджеті відображається індикатор "агент думає", який:

  • З'являється автоматично під час обробки запиту агентом
  • Показує анімований індикатор з текстом про поточний етап роботи
  • Автоматично зникає при отриманні відповіді або досягненні таймауту
  • Може бути налаштований через параметри ноди в сценарії (кастомний текст)
  • Забороняє відправку нових повідомлень під час активного тайпінгу

Це покращує UX, знижуючи тривожність користувача та підвищуючи довіру до системи під час очікування відповіді, особливо при довготривалих операціях (пошук по базі даних, виклик зовнішніх інструментів, аналіз інформації).

Де налаштовувати віджет?

Основні налаштування віджету знаходяться в:

  • Налаштування → Боти → оберіть бота → Widget — генерація коду вставки, налаштування CORS доменів, Custom Code
  • Widget Demo (/widget/{locale}/?bot-id={bot_id}) — налаштування вигляду віджету, кольорів
  • Сценарії — налаштування кастомного тексту індикатора "агент думає" через параметри ноди

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

Explanation

How-to

Працюєте з власним ШІ-агентом?Встановіть відкритий skill, щоб ваш ШІ-агент працював з актуальною офіційною документацією ConnectiveOne.Отримати skillПотрібна підтримка?Не знайшли відповідь або потрібна допомога команди ConnectiveOne? Створіть запит у Client Portal.Створити запит