На главную

Быстрый старт: работающий чат за пять минут

Встройте виджет одной строкой, укажите домен в проекте, дополните Content Security Policy и проверьте подключение. Затем — обычные следующие шаги для вошедших пользователей, собственных кнопок и бэкенда.

1. Получите ключ сайта и укажите домен

В аккаунте в разделе Проект → Установка находится код встраивания с ключом сайта. В Разрешённых источниках укажите все домены, где должен работать чат (поддомены включены: your-company.com охватывает www.your-company.com и shop.your-company.com). Сервер чата принимает подключения только с этих доменов.

2. Одна строка

Поместите код из аккаунта перед </body> или в <head>:

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

Код из аккаунта также содержит data-rc-brand с вашим фирменным цветом, чтобы кнопка чата сразу появилась в нужном цвете. Поэтому лучше скопировать его без изменений. Все атрибуты: Справочник по тегу скрипта.

3. Дополните Content Security Policy

Если на сайте задана CSP, добавьте:

script-src  https://cdn.reactive.chat;
connect-src wss://ws.reactive.chat https://ws.reactive.chat;
img-src     data: https:;

Зачем нужны обе записи connect-src: Безопасность и CSP.

4. Проверьте

Откройте страницу с инструментами разработчика:

Элементы: в конце <body> есть <reactive-chat>.
Сеть: loader.js, затем (не позднее наведения на кнопку чата) core.<hash>.js и WebSocket-подключение к wss://ws.reactive.chat/rc_wss/ с кодом состояния 101.
Консоль: после загрузки ReactiveChat('getSession') возвращает { sessionId, visitorId, tabId }.

Напишите тестовое сообщение; оно появится в панели операторов вашего аккаунта. Если подключение не устанавливается, см. Устранение неполадок.

Варианты

Через менеджер тегов: загрузчик читает атрибуты из собственного элемента <script>. Поэтому создайте тег, вставляющий настоящий <script src> с атрибутами, или заранее задайте конфигурацию:

<script>
  window.ReactiveChatSettings = { siteKey: 'SITE_KEY', locale: 'en' };
</script>
<script src="https://cdn.reactive.chat/loader.js" async></script>

При строгой CSP встроенному скрипту нужен nonce, который должен задать менеджер тегов.

Самостоятельная раздача loader.js: если файл загружается из вашего каталога, явно укажите адрес чата; иначе виджет ищет сервер чата на вашем домене и сообщения не приходят, хотя ошибки не отображаются:

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

С data-rc-cdn-base загрузчик продолжает получать совместимое ядро от нас. Обратите внимание: копия loader.js не обновляется; при изменении ядра её нужно заменить самостоятельно. Рекомендуется по-прежнему подключать с cdn.reactive.chat или через собственный домен.

Домены с двухчастным окончанием (.co.uk, .com.au …) при самостоятельной раздаче файла: всегда явно задавайте data-rc-ws-url.

Одностраничные приложения: встройте один раз в оболочку приложения; см. SPA и переходы между страницами.

Мобильные приложения: Мобильные приложения.

Следующие шаги

Распознавание вошедших пользователей: ReactiveChat('identify', …) с подписью вашего сервера — Идентификация посетителей.
Собственные кнопки и ссылки: <a href="#rc-open">Help</a> — Открытие чата по собственной ссылке.
Реакция на события: ReactiveChat('on', 'message', …) — События.
Подключение бэкенда: Вебхуки, Серверный API, Данные клиентов.
Внешний вид и поведение: Настройка.

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