Как установить виджет чат-бота на сайт: пошаговая инструкция

Виджет чат-бота устанавливается одной строчкой кода. Это занимает 5–10 минут на любой платформе — Тильда, WordPress, самописный сайт. Разберём каждый вариант по шагам.

Как работает виджет

Виджет — это небольшой JavaScript-файл, который добавляется в код страницы. Он загружает кнопку чата в правом нижнем углу и подключается к вашему боту.

Код виджета выдаётся в личном кабинете chatbot-setup.ru после создания бота. Он выглядит примерно так:

<script src="https://chatbot-setup.ru/widget.js" data-bot-id="ваш-id"></script>

Эту строчку нужно добавить перед закрывающим тегом </body> на каждой странице сайта.

Установка на Тильду

Тильда — самый простой вариант. Виджет добавляется один раз и автоматически появляется на всех страницах.

Шаг 1. В Тильде перейдите в «Настройки сайта» (значок шестерёнки справа вверху).

Шаг 2. Откройте вкладку «Ещё» (или «Дополнительные настройки»).

Шаг 3. Найдите поле «HTML-код перед » или «Вставка кода в конец body».

Шаг 4. Вставьте строчку кода из личного кабинета chatbot-setup.ru.

Шаг 5. Нажмите «Сохранить» и опубликуйте сайт.

Готово. Виджет появится на всех страницах вашего сайта на Тильде.

Установка на WordPress

На WordPress виджет добавляется через редактор темы или специальный плагин.

Вариант 1: через редактор темы

В панели WordPress перейдите: «Внешний вид» → «Редактор темы».
Найдите файл footer.php (в списке файлов справа).
Найдите в коде строку </body>.
Вставьте код виджета прямо перед </body>.
Нажмите «Обновить файл».

Вариант 2: через плагин Insert Headers and Footers

Установите плагин «Insert Headers and Footers» (или аналог).
Перейдите в «Настройки» → «Insert Headers and Footers».
В поле «Scripts in Footer» вставьте код виджета.
Сохраните.

Второй вариант удобнее — не нужно редактировать код темы напрямую.

Установка на самописный HTML-сайт

Если сайт состоит из HTML-файлов, откройте каждый файл в текстовом редакторе и добавьте строчку кода перед </body>.

Если у сайта есть общий шаблон (header.html, footer.html) — добавьте код в шаблон один раз. Он появится на всех страницах автоматически.

Установка на другие платформы

Wix: «Настройки» → «Дополнительные настройки» → «Пользовательский код» → добавьте в секцию «Body».

LP Mobi, Readymag и другие конструкторы: ищите раздел «Пользовательский код», «HTML-вставка» или «Скрипты» — он есть в большинстве конструкторов сайтов.

Как проверить что виджет установлен правильно

Откройте сайт в браузере.
В правом нижнем углу должна появиться кнопка чата.
Нажмите на кнопку — должен открыться чат.
Напишите тестовое сообщение — бот должен ответить.

Если кнопки нет — проверьте: код вставлен в правильное место (перед </body>, а не в другом месте), сайт опубликован после изменений (на Тильде нужно нажать «Опубликовать»).

Виджет на всех страницах или только на главной?

Рекомендуем на всех страницах. Клиент может зайти на любую страницу — страницу услуги, прайс, контакты — и у него возникнет вопрос именно там.

Установка через настройки сайта (Тильда, WordPress) или шаблонный файл автоматически добавляет виджет на все страницы.

Частые вопросы об установке виджета

Влияет ли виджет на скорость загрузки сайта? Минимально. Скрипт загружается асинхронно (не блокирует загрузку страницы).

Виджет отображается на мобильных? Да. Виджет адаптирован под мобильные устройства.

Можно ли изменить позицию или цвет виджета? Настройки внешнего вида доступны в личном кабинете.

Нужно ли переустанавливать виджет при изменении базы знаний? Нет. Виджет остаётся прежним — обновите только базу знаний в личном кабинете.

Работает ли виджет на HTTPS-сайтах? Да. Все современные сайты на HTTPS, виджет работает корректно.