Підключення онлайн-чату на сайт через Бітрікс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. Для мобільних можна задати окремі відступи від нижнього краю.