Главная · Справка · Установка чата на сайт
Установка чата на сайт
Виджет ЧБТ — один тег <script> с вашим ключом. Он один и тот же для любого сайта; различается только место в админке, куда его вставить. Ниже — где взять код, куда положить на популярных платформах, как убедиться, что сообщения приходят в «Диалоги», и шесть причин, по которым чат не появляется.
Шаг 1. Код из раздела «Виджет»
- В кабинете откройте бота → «Каналы» → «Подключить Виджет на сайт» → «Подключить». Ключ создаётся автоматически, ничего вводить не нужно.
- Перейдите в раздел «Виджет» → блок «Код вставки». Скопируйте строку целиком:
<script src="https://app.chbt.io/w.js" data-key="…"></script>— в ней также передаются цвет, заголовок и позиция кнопки. - Там же, в «Разрешённых доменах», впишите адрес сайта:
example.com(включаетwww), для поддоменов —*.example.com. Пустой список — виджет работает на любом сайте, где стоит код.
Внешний вид, приветствие, pre-chat форму и проактивные сообщения меняйте в «Виджете» в любой момент — настройки подтягиваются с сервера, переустанавливать код не нужно. Код вставляется один раз в общий шаблон сайта, перед закрывающим </body>: так он загружается последним и не задерживает отрисовку страницы. Из <head> виджет тоже работает.
Шаг 2. Куда вставлять: платформа → поле → что нажать
Строка одна и та же; различается только место в админке и действие, без которого изменения не попадут на сайт.
| Платформа | Где поле для кода | Что нажать после вставки |
|---|---|---|
| Tilda | «Настройки сайта» → «Ещё» → «HTML-код для вставки внутри BODY» (сквозная вставка). Только на одну страницу — блок T123 из категории «Другое» | «Сохранить», затем «Опубликовать все страницы» (для T123 — переопубликовать страницу) |
| WordPress | Плагин вставки кода (WPCode и аналоги «Header & Footer») → поле «Footer» / «Before </body>». Без плагина — «Внешний вид» → «Редактор файлов темы» → footer.php перед </body>, лучше в дочерней теме | «Сохранить»; при кеширующем плагине — очистить кеш |
| 1С-Битрикс | «Настройки» → «Настройки продукта» → «Сайты» → «Шаблоны сайтов» → активный шаблон → footer.php перед </body> (или тот же файл по FTP: /bitrix/templates/<шаблон>/footer.php) | Сохранить, затем «Настройки» → «Автокеширование» → «Очистить» |
| Wix | «Настройки» → «Пользовательский код» (Custom Code) → добавить фрагмент, размещение «Body — end», все страницы | «Применить», затем опубликовать сайт |
| uKit, Craftum, Nethouse, Flexbe и др. | Поле «Вставка кода» / «HTML-код для всего сайта» в настройках сайта; если сквозной вставки нет — блок «HTML-код» на каждой нужной странице | Сохранить и опубликовать |
| Свой сайт / SPA | Файл общего макета (footer, layout) перед </body>; для SPA — корневой index.html | Выложить сборку; смену URL без перезагрузки виджет отслеживает сам |
Если сайт делал подрядчик, отправьте ему строку целиком и эту таблицу — вопросов обычно не остаётся. Виджет один на весь сайт: второй экземпляр на странице игнорируется, так что случайная двойная вставка ничего не ломает.
Шаг 3. Проверка за минуту
- Откройте сайт в режиме инкогнито — так исключаются кеш и ваши прошлые тестовые сессии. В углу должна появиться кнопка чата.
- Нажмите кнопку, напишите «тест». На Бесплатном тарифе в окне будет подпись «ЧБТ» — это норма, она снимается на Базовом.
- В кабинете откройте «Диалоги»: диалог с типом канала «web» должен появиться в списке сразу. Ответьте из кабинета — ответ отобразится в окне на сайте.
- Проверьте с телефона: кнопка и окно открываются, клавиатура не закрывает поле ввода.
Если в сценарии есть триггер «Открытие виджета», бот напишет первым, как только посетитель откроет окно; иначе первым сообщением будет приветствие из настроек «Виджета».
Чат не показывается: 6 причин
- Домен не в «Разрешённых доменах». Кнопка может отрисоваться, но соединение с ЧБТ отклоняется: сообщения не уходят, приветствие не приходит. Впишите домен точно как в адресной строке или очистите список.
- Кеш. Битрикс, WordPress с плагином кеширования, CDN отдают старую версию страницы. Очистите кеш сайта и проверьте в инкогнито.
- Страница не опубликована. В Tilda и Wix код появляется на сайте только после публикации; в Tilda — «Опубликовать все страницы», не одну.
- Строка обрезана или вставлена как текст. Визуальный редактор превращает тег в видимый текст. Вставляйте в поле именно для HTML/кода и целиком — от
<scriptдо</script>. - Блокировщик рекламы или расширение. Часть блокировщиков скрывает сторонние чаты. Проверьте в другом браузере или с выключенными расширениями.
- Content-Security-Policy сайта. Если у сайта строгая CSP, разрешите
https://app.chbt.ioвscript-srcиconnect-src(включаяwss:). Симптом — ошибки CSP в консоли браузера.
Двойная вставка (например, и в настройках Tilda, и в блоке T123) не ломает виджет — второй экземпляр игнорируется.
JS API одной строкой
Открыть чат с любой своей кнопки: <a href="#" onclick="chbt('open');return false">Написать в чат</a>. Доступны также chbt('close'), chbt('toggle'), chbt('mute', true) и chbt('identify', {name, email, phone}) — последний передаёт данные авторизованного посетителя, и pre-chat форма ему не показывается. Команды работают после загрузки w.js; при вставке перед </body> к моменту клика он уже загружен.
Что делать с чатом после установки: сценарий с триггером «Открытие виджета» и передачей оператору описан в статье онлайн-чат для сайта за 5 минут; выбор между чатом и формой — в разборе чат или форма обратной связи; как измерить эффект — в статье онлайн-чат и заявки с сайта; ИИ-агент в окне чата — в материале ИИ-консультант на сайте. Виджет входит в Бесплатный тариф (30 диалогов в месяц), подпись «ЧБТ» и лимит снимает Базовый — детали на странице тарифов. Создайте бота, подключите «Виджет на сайт» и вставьте строку — на всё уходит меньше десяти минут.
Частые вопросы
На сайте строгая Content-Security-Policy — что разрешить?
Добавьте https://app.chbt.io в script-src и connect-src, для соединения в реальном времени — wss: в connect-src. Симптом неправильной CSP — ошибки в консоли браузера и кнопка чата, которая не открывает окно.
Сайт на React или Vue без перезагрузок страниц — виджет справится?
Да. Вставьте строку один раз в корневой index.html; смену адреса без перезагрузки виджет отслеживает сам, поэтому проактивные сообщения по URL работают и в SPA.
Как проверить виджет на локальном сайте до публикации?
Впишите localhost в «Разрешённые домены» рядом с рабочим доменом — виджет заработает на http://localhost с любым портом. После запуска localhost можно удалить из списка.
Один виджет на несколько сайтов — можно?
Да: впишите все домены в «Разрешённые домены» по одному в строке или оставьте список пустым. Диалоги со всех сайтов попадут в один раздел «Диалоги» одного бота; если контакты и статистику по сайтам нужно разделять, заведите отдельного бота на каждый.
Чат нужен не на всех страницах — как ограничить?
Вставьте код не в общий шаблон, а в блок HTML-кода только нужных страниц. Проактивные сообщения дополнительно ограничиваются по адресу в настройках триггера — поле «Не показывать, если URL содержит…».
На странице уже стоит другой чат — можно поставить ЧБТ рядом?
Технически да, оба загрузятся, но две кнопки в одном углу путают посетителей. Переключите позицию виджета ЧБТ на другую сторону в разделе «Виджет» или уберите старый чат после переходного периода.