Що таке віджет 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}}

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

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

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

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

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

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

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

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

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

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

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

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

Explanation

How-to