Як вбудувати чат на сайт: у сторінку або картку товару через iFrame у Binom
Вбудувати чат на сайт прямо у вміст сторінки дозволяє iFrame – вікно чату Binom, яке розміщується в картці товару, на сторінці послуги або поруч із формою заявки. Клієнт ставить запитання, не залишаючи сторінку. Код для вбудовування копіюється в розділі Інтеграції → iFrame і вставляється в потрібне місце сторінки.
Якщо Binom потрібен на всьому сайті одразу, зручніше плаваючий Widget; якщо сайту немає – публічне посилання. Порівняння способів: що обрати для сайту.
Як налаштувати вікно чату
- Відкрийте Інтеграції → iFrame.
- У блоці "Розмір чату" вкажіть ширину і висоту вікна в пікселях. Орієнтуйтеся на місце, яке вікно займатиме на сторінці.
- Щоб вікно виглядало інакше, ніж інші канали, позначте "Налаштувати оформлення окремо" і задайте "Колір чату" та "Стиль і оформлення". Без цієї позначки використовуються спільні кольори з Налаштування → вкладка "Брендинг" (як задати єдиний фірмовий стиль).
- Натисніть "Оновити" і перевірте результат у блоці "Попередній перегляд чату".
Який код вставити на сайт
Нижче налаштувань показано три блоки коду. Вони вирішують різні завдання:
| Блок | Що робить | Коли потрібен |
|---|---|---|
| 1. "Скопіюйте наступний код і вставте його в відповідне місце на вашому сайті" | Саме вікно чату потрібного розміру. Вікно завантажується, коли відвідувач прокручує сторінку до нього, тому не сповільнює завантаження. | Завжди – це основний код. |
| 2. "…скрипт, який розпізнається як віджет чату Binom і ініціалізує його" | Після завантаження вікна передає в чат адресу сторінки і параметр product_id з адреси. |
Якщо Binom має розуміти, на сторінці якого товару перебуває клієнт (Product ID). |
| 3. "…скрипт для динамічного завантаження чату" | Порожній контейнер і скрипт, який сам створює вікно чату зі збереженими налаштуваннями. | Альтернатива блоку 1, якщо зручніше вставляти один рядок коду. |
Використовуйте або блок 1, або блок 3, інакше на сторінці опиняться два вікна. Блок 2 додається на ту саму сторінку нижче основного коду.
У коді блоку 1 є атрибут allow="microphone *; autoplay *". Не видаляйте його: без нього у вікні не працюватимуть голосові повідомлення і голосова розмова через WebRTC.
Куди вставити код
- WordPress: відкрийте потрібну сторінку або шаблон картки товару в редакторі, додайте блок "Довільний HTML" в місце, де має бути вікно, і вставте код.
- Конструктор сайтів: використовуйте елемент для вставки HTML-коду в потрібному місці сторінки.
- Сайт з індивідуальною розробкою: передайте розробнику скопійований код, адреси сторінок, де має бути вікно, потрібний розмір вікна і, якщо потрібен Product ID, – блок 2.
Щоб вікно стояло в усіх картках товарів, вставляйте код в спільний шаблон картки, а не на кожну сторінку окремо.
Як перевірити результат
- Відкрийте сторінку сайту в режимі інкогніто та прокрутіть до місця, де розміщено вікно.
- Переконайтеся, що вікно потрібного розміру і не перекриває інші елементи на комп'ютері та телефоні.
- Надішліть запитання. Якщо вставлено блок 2, на сторінці товару запитайте "Чи є він в наявності?" без назви товару – Binom має зрозуміти, про який товар йдеться.
- Знайдіть тестовий діалог у розділі Чати.
Можливі проблеми
Картка сіра і позначена "Недоступно на тарифі"
Що це означає: публічний чат, iFrame та Widget входять до однієї тарифної опції, і її немає у вашому тарифі. На безкоштовному тарифі Free встановлення віджета та iFrame недоступне (обмеження тарифу Free). У блоці з кодом замість коду буде повідомлення "Ваш тариф не включає інтеграцію віджета".
Як перейти на потрібний тариф:
- Дізнайтеся, який тариф потрібен: у розділі Інтеграції наведіть курсор на сіру картку – підказка "Перейдіть на тариф …" назве найдоступніший тариф, до якого входить ця інтеграція. Чим відрізняються тарифи Free, Basic, Pro та Business: скільки коштує Binom AI.
- Відкрийте Підписка. Якщо зараз безкоштовний тариф – натисніть "Вибрати тариф", якщо платний – "Порівняти тарифи".
- Виберіть тариф і період оплати (щомісяця, кожні 3 місяці або щороку) і натисніть "Підтвердити й оплатити". Відкриється сторінка оплати.
- Після оплати з'явиться "Оплата підписки пройшла успішно!". Поверніться до Інтеграції → iFrame – картка буде позначена "Доступно".
Хочете спершу спробувати? 7-денний пробний період включає функції тарифу Basic: як оформити підписку або пробний період. Якщо після оплати з'явилося "Оплата не була завершена. Ваш тариф не змінився", повторіть оплату або напишіть на support@binomai.com, вказавши email акаунта і обраний тариф.
Повідомлення "У вас немає прав для керування цим розділом"
Що це означає: інтеграції налаштовують лише користувачі з рівнем доступу Owner або Admin для обраного Binom.
Що зробити: попросіть власника акаунта надати вам рівень Admin або передати завдання йому. Докладніше: рівні доступу в команді.
Як зрозуміти, що проблему вирішено: після оновлення сторінки відкривається каталог інтеграцій.
Вікно не з'явилося на сторінці
Покрокова перевірка: чому чат Binom не з'являється на сайті.
Як ще питають
Як вставити код чату на сторінку сайту?
Скопіюйте блок 1 на вкладці Інтеграції → iFrame і вставте його в потрібне місце сторінки. У WordPress використовуйте блок "Довільний HTML". Якщо вікно не з'явилося – що перевірити.
Чи можна поставити чат у картку товару?
Так. Вставте код у загальний шаблон картки товару і додайте блок коду 2, щоб працював чат-бот для інтернет-магазину, який знає товар.
