Как встроить чат на сайт – в страницу или карточку товара через 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, чтобы работал чат-бот для интернет-магазина, который знает товар.
