Как установить веб-виджет BiFL на сайт и проверить работу без разработчика
Инструкция по включению виджета, настройке внешнего вида, генерации embed-кода и установке скрипта на сайт с последующей проверкой диалога и бронирования.
Подойдёт для лендингов, корпоративных сайтов, интернет-магазинов и внутренних порталов, где нужен быстрый запуск консультанта в один скрипт.
Эта статья написана как самостоятельная инструкция: её можно отправить отдельно от общего руководства, приложить в письмо, базу знаний или статью.
Что подготовить до подключения
Чат-бот уже создан и сохранён в проекте.
У вас есть доступ к HTML сайта, CMS или шаблону, куда можно вставить JavaScript-код.
Если хотите принимать записи или заказы через виджет, заранее настройте услуги, товары, расписание и платежи в Commerce.
Пошаговая инструкция
01 1. Настройте внешний вид виджета
Откройте проект, выберите чат-бота и перейдите в раздел «Интеграции» -> «Веб-виджет».
Включите виджет, задайте заголовок, позицию, цвет и при необходимости загрузите собственную иконку.
Выберите, должен ли виджет открываться сразу и сколько диалогов хранить у посетителя.
02 2. Подготовьте пользовательский сценарий
Если через виджет нужны товары, услуги, запись или онлайн-оплата, включите соответствующие Commerce-функции канала.
Сохраните изменения и убедитесь, что статус формы обновился без ошибок.
Откройте предпросмотр, чтобы проверить заголовок, цвет и общий тон интерфейса.
03 3. Сгенерируйте embed-код
В том же блоке откройте секцию генерации кода.
Нажмите кнопку показа кода и скопируйте готовый snippet.
Используйте только актуальный код из текущего чат-бота, чтобы не подключить не тот проект.
04 4. Установите скрипт на сайт
Вставьте snippet перед закрывающим тегом </body> на всех страницах, где нужен виджет.
Если у вас CMS, добавьте код в глобальный шаблон, раздел пользовательских скриптов или footer-блок.
Опубликуйте изменения и очистите кэш сайта, если он включён.
05 5. Проверьте поведение на сайте
Откройте сайт в режиме инкогнито и дождитесь появления кнопки виджета.
Напишите тестовое сообщение и убедитесь, что ответ приходит от нужного чат-бота.
Если Commerce-сценарии активны, проверьте, что посетитель может перейти к каталогу, записи или оплате и отправить данные.
Чек-лист после запуска
Виджет открывается на сайте в выбранной позиции и с заданным цветом.
Диалог создаётся именно в вашем проекте, а не в другом тестовом чат-боте.
Snippet можно переиспользовать в статьях и инструкциях, потому что он уже включает ID чат-бота и API URL.
Частые вопросы
Куда лучше вставлять код, если сайт на Tilda, WordPress или другой CMS?
Вставляйте snippet в глобальный footer, в раздел пользовательского кода или в общий шаблон страниц. Главное правило одно: скрипт должен загружаться перед закрывающим тегом </body>.
Можно ли сначала протестировать виджет, а потом публиковать на весь сайт?
Да. Сначала сохраните настройки, откройте встроенный предпросмотр и поставьте snippet на тестовую страницу. После проверки перенесите тот же код на все боевые страницы.