Встраивание виджета

Две строки в head страницы. Без встроенного скрипта, поэтому работает и при строгой CSP.

Короткая версия

Поместите эту строку в head страницы и замените SITE_KEY своим ключом:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-locale="en"
        async></script>

Это всё. Загрузчик весит 3,48 кБ и получает ядро, только когда у браузера есть время или посетитель касается кнопки чата.

Если вы сами предоставляете `loader.js`, нужна ещё одна строка

Некоторые предпочитают загружать скрипт из своего каталога, а не из нашей сети доставки: из-за правил, тестовой среды или просто по привычке. Это работает, но тогда нужно явно указать подключение чата:

<script src="/js/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
        async></script>

Почему: без этого виджет выводит адрес из местоположения скрипта. Если это ваш домен, он ищет чат там же и ничего не находит.

Причём сбой незаметен. Кнопка появляется, окно открывается, цвет и язык правильные, всё выглядит готовым. Но ни одно сообщение не доходит. Ошибки нет: подключение продолжает попытки в фоне, и именно это скрывает неисправность. Только консоль браузера называет хост, который безуспешно ищет.

Значение выше одинаково для всех наших аккаунтов. Своё указывают только при самостоятельном запуске сервера.

Через поддомен собственного сайта

Если чат должен работать как ресурс первой стороны через ваш поддомен (например, chat.your-company.com вместо cdn.reactive.chat), настройка прокси описана в руководстве по собственному домену. Аккаунт затем покажет подходящий код встраивания.

Если WebSocket заблокирован

Если сеть не пропускает WebSocket, например за корпоративным прокси, чат автоматически продолжает работу через обычный HTTPS. Для этого Content Security Policy должна разрешать указанный ниже адрес https:// в дополнение к адресу wss://. Когда включается резервный режим и как включить его принудительно для теста, описано в Резервном канале HTTP.

Открытие чата своими ссылками и показ промокарточки

Любая ссылка или кнопка на странице может открыть чат, причём окно появится прямо рядом с ней: Открытие чата через собственную ссылку или кнопку. Как показать в чате карточку собственного предложения, например платного тарифа, описано в Промокарточке в чате.

Автоматическое встраивание текста о конфиденциальности

Небольшой элемент на странице политики конфиденциальности показывает подходящий текст о чате, всегда в соответствии с настройками проекта и на языке страницы: Автоматическое встраивание текста о конфиденциальности.

Почему нет встроенного скрипта

Обычный вариант у конкурентов — встроенный <script>. При строгой Content Security Policy без unsafe-inline он блокируется до выполнения первой строки. Вариант с атрибутами выше этого не требует.

Что дополнительно должна разрешать политика:

script-src — хост доставки, здесь cdn.reactive.chat
connect-src — адрес WebSocket, здесь wss://ws.reactive.chat
connect-src — также тот же адрес с https:// (здесь https://ws.reactive.chat) — его используют офлайн-форма и резервный канал HTTP, когда корпоративный прокси блокирует WebSocket

Настройки в теге скрипта

data-rc-site-key — обязателен. Без него ничего не запускается, и это намеренно.
data-rc-locale — de, en или pl. Если отсутствует, решает браузер.
data-rc-brand — фирменный цвет. Текст пересчитывается до достижения читаемости.
data-rc-ws-url — обязателен, как только loader.js загружается не с cdn.reactive.chat. См. раздел выше.

Всё остальное — в обзоре функций и на странице тарифов.

Подробно в документации

Пошагово: Быстрый старт. Все атрибуты тега скрипта с типами и значениями по умолчанию: Справочник по тегу скрипта. Все главы собраны в документации.

Обновлено: 2026-10-25