Подключение онлайн-чата на сайт через Битрикс24
Онлайн-чат Битрикс24 — виджет, который устанавливается на любой сайт и направляет сообщения посетителей в открытые линии Битрикс24. Работает независимо от платформы сайта: WordPress, 1С-Битрикс, самописный — достаточно вставить JS-код.
Как это работает
Посетитель сайта кликает на виджет чата → открывается окно диалога → сообщение попадает в открытую линию Битрикс24 → оператор отвечает → ответ отображается посетителю на сайте в реальном времени.
Технически: виджет использует WebSocket для соединения с серверами Битрикс24. История чата сохраняется в сессии браузера посетителя (LocalStorage) и в Битрикс24.
Получение кода виджета
Битрикс24 → CRM → Контакт-центр → Онлайн-чат → «Создать» → настроить внешний вид → скопировать код вставки.
Код выглядит примерно так:
<script>
(function(w,d,u){
var s=d.createElement('script');
s.async=true;
s.src=u+'?'+(Date.now()/60000|0);
var h=d.getElementsByTagName('script')[0];
h.parentNode.insertBefore(s,h);
})(window,document,'https://yourcompany.bitrix24.ru/upload/crm/site_button/loader_X_XXXXXXXX.js');
</script>
Этот код вставляется перед закрывающим тегом </body> на каждой странице, где нужен чат.
Установка на разные типы сайтов
WordPress / WooCommerce. Вставить код через плагин «Insert Headers and Footers» или в functions.php активной темы через хук wp_footer.
1С-Битрикс. В административной панели → Настройки → Включённые модули → в шаблоне сайта вставить в footer.php. Или через управление структурой сайта → компоненты → HTML-блок.
React/Vue SPA. Добавить в index.html или инициализировать скрипт в корневом компоненте приложения через useEffect (React) с проверкой, что DOM готов.
Shopify / Tilda / Wix. Через секцию «Пользовательский код» или «HTML-блок» в соответствующих конструкторах.
Привязка к CRM
При настройке чата указать:
- Открытая линия — к какой линии привязан чат (продажи, поддержка).
- Создание лида — автоматически при первом сообщении.
-
Источник — например, «Сайт» или «Онлайн-чат». Проставляется в поле
SOURCE_IDлида.
Если посетитель заполнил форму с именем/телефоном (при включённом режиме предварительной формы) — данные автоматически попадают в поля лида.
Идентификация повторных посетителей
Битрикс24 идентифицирует посетителей сайта по cookie BITRIX_SM_SALE_UID. Если посетитель уже был на сайте и общался в чате — при следующем визите история сохраняется. Если пользователь залогинен на портале Битрикс24 (сотрудник) — чат отображает корпоративный интерфейс, а не клиентский.
Частые проблемы
Виджет не появляется на сайте. Проверить: код вставлен корректно (без обрезки), нет конфликтов с Content Security Policy (CSP) сайта. В CSP нужно разрешить скрипты с домена *.bitrix24.ru и WebSocket соединения.
Чат появляется, но сообщения не отправляются. Блокировщик рекламы или корпоративный файрвол блокирует WebSocket соединение с серверами Битрикс24.
Виджет тормозит загрузку страницы. Скрипт виджета загружается асинхронно и не должен влиять на LCP. Если влияет — проверить, не вставлен ли код в <head> синхронно. Использовать async/defer атрибуты.
Мобильная версия: чат перекрывает контент. Настроить позицию виджета (правый/левый нижний угол) и отступы через настройки виджета в Битрикс24. Для мобильных можно задать отдельные отступы от нижнего края.