Швидкий старт: чат за п’ять хвилин

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, Дані клієнтів.
• Вигляд і поведінка: Налаштування.