Rychlý start: funkční chat za pět minut

1. Získejte klíč webu a zadejte doménu

V účtu pod Projekt → Instalace najdete vkládací kód s klíčem webu. Do pole Povolené originy zadejte všechny domény, na kterých má chat běžet (subdomény jsou zahrnuté: your-company.com pokrývá www.your-company.com i shop.your-company.com). Chatovací server přijímá připojení pouze z těchto domén.

2. Jeden řádek

Umístěte kód z účtu před </body> nebo do <head>:

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

Kód z účtu nese také data-rc-brand s barvou vaší značky, aby se tlačítko chatu hned zobrazilo ve správné barvě. Nejlepší je proto zkopírovat ho beze změny. Všechny atributy: Referenční přehled značky script.

3. Rozšiřte Content Security Policy

Pokud váš web nastavuje CSP, přidejte:

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

Proč jsou potřeba obě položky connect-src: Zabezpečení a CSP.

4. Ověřte funkčnost

Otevřete svou stránku s vývojářskými nástroji:

• Prvky: na konci <body> je <reactive-chat>.
• Síť: loader.js, potom (nejpozději při najetí myší na tlačítko chatu) core.<hash>.js a připojení WebSocket k wss://ws.reactive.chat/rc_wss/ se stavovým kódem 101.
• Konzole: po načtení vrací ReactiveChat('getSession') objekt { sessionId, visitorId, tabId }.

Napište testovací zprávu; zobrazí se v pultu vašeho účtu. Pokud se připojení nenaváže, viz Řešení problémů.

Varianty

Přes správce značek: loader čte atributy z vlastního prvku <script>. Vytvořte proto značku, která vloží skutečný <script src> s atributy, nebo konfiguraci nastavte předem:

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

Při striktní CSP potřebuje inline skript nonce, které musí nastavit váš správce značek.

Vlastní poskytování loader.js: pokud soubor načítáte z vlastního adresáře, uveďte adresu chatu výslovně — jinak widget hledá chatovací server pod vaší doménou a žádná zpráva nedorazí, aniž by se objevilo chybové hlášení:

<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>

S data-rc-cdn-base loader dál získává odpovídající jádro od nás. Pozor: kopie loader.js se neaktualizuje; když se jádro změní, musíte ji obnovit sami. Doporučeným způsobem zůstává vložení z cdn.reactive.chat nebo přes vlastní doménu.

Domény s dvoudílnou koncovkou (.co.uk, .com.au …) při vlastním poskytování souboru: vždy výslovně nastavte data-rc-ws-url.

Jednostránkové aplikace: vložte jednou do základního rámce aplikace, viz SPA a změny stránek.

Mobilní aplikace: Mobilní aplikace.

Další kroky

• Rozpoznání přihlášených uživatelů: ReactiveChat('identify', …) s podpisem z vašeho serveru — Identifikace návštěvníků.
• Vlastní tlačítka a odkazy: <a href="#rc-open">Help</a> — Otevření chatu z vlastního odkazu.
• Reakce na události: ReactiveChat('on', 'message', …) — Události.
• Připojení backendu: Webhooky, Serverové API, Zákaznická data.
• Vzhled a chování: Přizpůsobení.