Чтобы установить онлайн-чат на сайт, нужно скопировать одну строку кода виджета из личного кабинета и вставить её в HTML-код страниц прямо перед закрывающим тегом </body>. Программист и отдельный сервер не нужны: после сохранения виджет появляется на всех страницах, а сообщения посетителей начинают приходить в общий инбокс, где оператор отвечает из браузера. В ЭТОЧАТБОТ такой код работает на Tilda, WordPress, 1С-Битрикс, Wix и любом самописном сайте. Ниже — пошаговая инструкция для популярных платформ, способы проверки и разбор частых ошибок.
Что такое виджет онлайн-чата и как он работает
Виджет чата — это небольшое окно в углу сайта, через которое посетитель пишет вам, не покидая страницу. Технически это скрипт: браузер подгружает его при открытии сайта, рисует круглую кнопку, а по клику разворачивает окно диалога.
В ЭТОЧАТБОТ виджет изолирован в собственном контейнере (Shadow DOM), поэтому он не конфликтует со стилями и скриптами вашего сайта — кнопка и окно выглядят одинаково на любой платформе.
Важно понимать логику работы:
- посетитель пишет сообщение в виджете на сайте;
- сообщение приходит в общий инбокс личного кабинета — туда же, куда падают диалоги из Telegram, ВКонтакте, Instagram* и МАКС;
- оператор отвечает из браузера, не переключаясь между сервисами;
- ответ мгновенно появляется в окне чата у посетителя.
На тарифе «Премиум» на входящие может отвечать ИИ-помощник: он использует загруженный прайс, FAQ и материалы сайта, помнит контекст диалога и зовёт живого оператора, когда вопрос выходит за рамки базы знаний.
Общая схема: как добавить чат на сайт за 5 минут
Принцип одинаковый для всех платформ. Отличается только место, куда вставляется код.
- Подключите канал «Онлайн-чат на сайт» в личном кабинете и укажите домен, на котором будет работать виджет.
- Настройте внешний вид — цвет, приветствие, аватары команды, положение кнопки. Это можно сделать сразу или позже: код от этого не меняется.
- Скопируйте строку кода из раздела с кодом установки.
- Вставьте код в сайт — в HTML прямо перед закрывающим тегом
</body>. - Сохраните и опубликуйте страницу, откройте сайт и проверьте кнопку чата.
Код вставляется один раз. Если сайт состоит из шаблона (шапка/подвал общие для всех страниц), виджет автоматически появится на всех страницах сразу.
Почему код ставят именно перед </body>
Тег </body> закрывает видимую часть страницы. Если разместить скрипт перед ним, он загрузится последним и не задержит отрисовку основного контента — сайт открывается с обычной скоростью, а чат подгружается фоном.
Установка на Tilda
В Tilda код виджета удобнее всего добавить один раз на весь сайт.
- Откройте настройки сайта: Настройки сайта → Ещё → HTML-код для вставки внутри BODY.
- Вставьте скопированную строку кода в поле для кода перед закрытием
</body>. - Нажмите «Сохранить», затем опубликуйте сайт целиком (кнопка «Опубликовать все страницы»).
Если нужен чат только на одной странице, используйте блок T123 (HTML) из категории «Другое» и вставьте код туда. Но для сквозного чата на всём сайте выбирайте настройки уровня всего проекта, а не отдельной страницы.
Установка на WordPress
Есть три рабочих способа — выбирайте любой.
Способ 1. Через плагин вставки кода
Установите плагин для вставки скриптов в подвал (например, из тех, что добавляют код в header/footer). В настройках плагина найдите поле «Footer» или «Перед </body>» и вставьте код. Это самый безопасный вариант: код не пропадёт при обновлении темы.
Способ 2. Через файл темы footer.php
В административной панели откройте Внешний вид → Редактор файлов темы, найдите файл footer.php и вставьте код прямо перед строкой </body>. Минус: при обновлении темы правку может затереть, поэтому используйте дочернюю тему.
Способ 3. Через конструктор (Elementor и другие)
Многие конструкторы имеют раздел «Пользовательский код» / «Custom Code», где можно добавить скрипт в футер на весь сайт. Вставьте код туда и сохраните.
Установка на 1С-Битрикс
В 1С-Битрикс виджет добавляется в шаблон сайта, чтобы отображаться на всех страницах.
- Перейдите в Настройки → Настройки продукта → Сайты → Шаблоны сайтов.
- Откройте на редактирование активный шаблон.
- Найдите в разметке закрывающий тег
</body>и вставьте код виджета непосредственно перед ним. - Сохраните шаблон.
Если вы не работаете с кодом шаблона напрямую, попросите вставить строку вашего администратора сайта — это буквально одна строка, отдельная разработка не требуется. После сохранения сбросьте кеш сайта, чтобы изменения применились сразу.
Установка на Wix и самописные сайты
Wix. Откройте Настройки → Пользовательский код (Custom Code), добавьте новый фрагмент, вставьте строку кода, в разделе размещения выберите «Body — end» (конец тега body) и примените ко всем страницам.
Самописный сайт. Если у вас обычный HTML или сайт на любом фреймворке, откройте общий шаблон страницы (чаще всего это файл с разметкой макета или подвала) и вставьте код перед </body>. Одна вставка в общий шаблон — и чат появится на всех страницах.
Ключевой принцип для любой платформы: код должен попасть в HTML страницы до закрытия </body> и загружаться на всех нужных страницах.
Как проверить, что чат работает
После установки потратьте пару минут на проверку.
- Откройте сайт в браузере (лучше в режиме инкогнито, чтобы исключить кеш) — в углу должна появиться кнопка чата.
- Напишите тестовое сообщение из окна виджета.
- Проверьте инбокс в личном кабинете — диалог должен появиться там вместе с сообщениями из мессенджеров.
- Ответьте из кабинета и убедитесь, что ответ пришёл обратно в виджет на сайте.
- Проверьте на телефоне — кнопка и окно должны корректно открываться на мобильном.
Если сообщение дошло до инбокса и ответ вернулся в виджет — установка выполнена правильно.
Частые ошибки при установке
Если чат не появился или работает не так, обычно причина в одном из пунктов ниже.
- Код вставлен не туда. Скрипт должен стоять перед
</body>, а не в произвольном текстовом блоке страницы. - Страница не опубликована. В конструкторах (Tilda, Wix) после вставки кода нужно заново опубликовать сайт, иначе изменения не выйдут в онлайн.
- Не сброшен кеш. В 1С-Битрикс и на сайтах с кешированием старая версия страницы показывается без чата — очистите кеш сайта и кеш браузера.
- Указан не тот домен. При подключении канала домен должен совпадать с адресом сайта, где стоит код.
- Код скопирован не полностью. Строка должна быть вставлена целиком, без обрезки и лишних пробелов.
- Виджет спрятан расширением браузера. Блокировщики иногда скрывают чаты — проверьте сайт с отключёнными расширениями.
Если после проверки этих пунктов чат по-прежнему не виден, откройте сайт в другом браузере или на другом устройстве — так проще понять, дело в самом сайте или в локальных настройках.
Готовы попробовать? Подключите онлайн-чат на сайт в ЭТОЧАТБОТ — установка занимает пару минут, начать можно бесплатно, а платные тарифы «Плюс» и «Премиум» снимают лимиты и включают ИИ-помощника.
Частые вопросы
Нужен ли программист, чтобы установить чат на сайт?
Нет. Достаточно скопировать одну строку кода из личного кабинета и вставить её перед тегом </body> через настройки вашего сайта или конструктора. Это занимает несколько минут и не требует навыков разработки — при желании вставку можно поручить администратору сайта.
Где взять код виджета?
Код находится в личном кабинете ЭТОЧАТБОТ после подключения канала «Онлайн-чат на сайт» — в разделе с кодом установки. Там же вы указываете домен, на котором будет работать виджет.
Замедлит ли онлайн-чат загрузку сайта?
Нет. Код ставится перед закрывающим тегом </body>, поэтому загружается последним и не задерживает отрисовку основного контента. Виджет подгружается фоном, а сам он изолирован в отдельном контейнере и не конфликтует со стилями сайта.
Почему чат не появляется после установки?
Чаще всего код вставлен не перед </body>, страница не переопубликована в конструкторе или не сброшен кеш сайта. Проверьте эти пункты, откройте сайт в режиме инкогнито и убедитесь, что указанный при подключении домен совпадает с адресом сайта.
Можно ли отвечать посетителям с телефона и вместе с мессенджерами?
Да. Диалоги с сайта приходят в общий инбокс вместе с Telegram, ВКонтакте, Instagram* и МАКС, а отвечать можно из браузера на компьютере или телефоне, не переключаясь между сервисами.