Як встановити віджет на сайт?

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

Як налаштувати

1. У розділі налаштувань віджета ви можете попередньо кастомізувати його зовнішній вигляд: обрати корпоративні кольори, завантажити логотип і налаштувати текст привітання.
2. Скопіюйте наданий системою короткий JavaScript-код.
3. Вставте цей код у відповідне місце в HTML-коді вашого сайту або передайте його технічному фахівцю.
4. Після встановлення перевірте відображення віджета на сайті та переконайтеся, що ШІ коректно починає діалог.

Результат
Відвідувачі сайту бачать брендоване вікно чату і можуть отримувати консультації в текстовому або голосовому форматі (через WebRTC) миттєво, не залишаючи сторінку.

---

Оновлено від 19.10.26

Онлайн-консультант на сайт у Binom встановлюється через Widget – кнопку чату в кутку сайту, яка відкриває вікно розмови поверх сторінки. Консультант доступний на будь-якій сторінці і не займає місця в її вмісті. Щоб встановити Widget, скопіюйте один рядок коду в розділі Інтеграції → Widget і один раз вставте його в загальний шаблон сайту.

Якщо потрібно вікно чату всередині конкретної сторінки, оберіть iFrame; якщо сайту немає – публічне посилання.

Як встановити Widget

1. Відкрийте Інтеграції → Widget.
2. Налаштуйте зовнішній вигляд кнопки і вікна та натисніть "Оновити". Детально: як налаштувати зовнішній вигляд віджета.
3. Скопіюйте код з блоку "1. Скопіюйте наступний код і вставте його в відповідне місце на вашому сайті". Це один рядок такого вигляду:

   <script data-id="ID вашого Binom" data-host="https://app.binomai.com/" src="https://app.binomai.com/js/binomHelper.js"></script>

4. Вставте код один раз у загальний шаблон сайту – зазвичай перед закриваючим тегом </body>. Тоді кнопка з'явиться на всіх сторінках.

Код уже містить ID вашого Binom. Якщо у вас кілька Binom, перевірте, що в кабінеті вибрано потрібний, перш ніж копіювати код.

Куди вставити код

• WordPress: через поле для користувацького коду в налаштуваннях теми або через плагін для вставки коду в підвал сайту (наприклад, WPCode). Додавайте код у підвал всього сайту, а не на окрему сторінку.
• Конструктор сайтів: у налаштуваннях сайту знайдіть поле для коду, який виконується на всіх сторінках.
• Сайт з індивідуальною розробкою: передайте розробнику рядок коду і попросіть додати його в загальний шаблон один раз.

Повторна вставка того самого коду не створює другу кнопку, але тримайте код в одному місці, щоб його було простіше замінити.

Контекст товару

Widget автоматично передає в чат адресу сторінки, на якій знаходиться клієнт. Окремий код для цього не потрібен. Як Binom співставляє сторінку з товаром: Product ID.

Як перевірити результат

1. Відкрийте сайт у режимі інкогніто на комп'ютері й телефоні.
2. Переконайтеся, що кнопка видна і не перекриває кнопки сайту (кошик, кнопку замовлення).
3. Відкрийте вікно, перевірте привітання та надішліть запитання.
4. Перейдіть на іншу сторінку сайту: кнопка має залишитися.
5. Якщо увімкнено голосовий чат WebRTC, перевірте голосову розмову.
6. Знайдіть тестову розмову в Чатах: у фільтрі джерел оберіть "Віджет".

Можливі проблеми

Картка сіра і позначена "Недоступно на тарифі"

Що це означає: публічний чат, iFrame і Widget входять до однієї тарифної опції, і її немає у вашому тарифі. На безкоштовному тарифі Free встановлення віджета та iFrame недоступне (обмеження тарифу Free). У блоці з кодом замість коду буде повідомлення "Ваш тариф не включає інтеграцію віджета".

Як перейти на потрібний тариф:

1. Дізнайтеся, який тариф потрібен: у розділі Інтеграції наведіть курсор на сіру картку: підказка "Перейдіть на тариф …" назве найдоступніший тариф, до якого входить ця інтеграція. Чим відрізняються тарифи Free, Basic, Pro і Business: скільки коштує Binom AI.
2. Відкрийте Підписка. Якщо зараз безкоштовний тариф, натисніть "Обрати тариф", якщо платний, то "Порівняти тарифи".
3. Оберіть тариф і період оплати (щомісяця, кожні 3 місяці або щороку) та натисніть "Підтвердити й оплатити". Відкриється сторінка оплати.
4. Після оплати з'явиться "Оплата підписки пройшла успішно!". Поверніться в Інтеграції → Widget: картка буде позначена "Доступно".

Хочете спершу спробувати? 7-денний пробний період включає функції тарифу Basic: як оформити підписку або пробний період. Якщо після оплати з'явилося "Оплата не була завершена. Ваш тариф не змінився", повторіть оплату або напишіть на support@binomai.com, вказавши email акаунта і обраний тариф.

Повідомлення "У вас немає прав для керування цим розділом"

Що це означає: інтеграції налаштовують лише користувачі з рівнем доступу Owner або Admin для обраного Binom.
Що зробити: попросіть власника акаунта надати вам рівень Admin або передати завдання йому. Докладніше: рівні доступу в команді.
Як зрозуміти, що проблему вирішено: після оновлення сторінки відкривається каталог інтеграцій.

Кнопка не з'явилася на сайті

Покрокова перевірка: чому чат Binom не з'являється на сайті.

Як ще питають

Як встановити онлайн-консультанта на сайт WordPress?

Скопіюйте рядок коду на вкладці Інтеграції → Widget і додайте його в підвал усього сайту через поле користувацького коду теми або плагін для вставки коду.

Чи потрібен програміст, щоб поставити чат-бот на сайт?

Ні. Це один рядок коду, який вставляють один раз в загальний шаблон сайту. Якщо сайт робив розробник, передайте йому цей рядок.

Як змінити колір і логотип кнопки чату?

На тій самій вкладці – детально в інструкції як налаштувати віджет чату.

Що далі

• Як налаштувати зовнішній вигляд віджета
• Як підключити WebRTC
• Що може клієнт у чаті Binom
• Widget, iFrame або публічне посилання – що обрати