Snabbstart: en fungerande chatt på fem minuter

1. Hämta webbplatsnyckeln och ange domänen

I kontot under Projekt → Installation hittar du inbäddningskoden med webbplatsnyckeln. Under Tillåtna ursprung anger du varje domän där chatten ska köras (underdomäner ingår: your-company.com omfattar www.your-company.com och shop.your-company.com). Chattservern accepterar bara anslutningar från dessa domäner.

2. Den enda raden

Lägg koden från kontot före </body> eller i <head>:

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

Koden från kontot innehåller också data-rc-brand med profilfärgen, så att chattknappen direkt visas i rätt färg. Kopiera den därför helst oförändrad. Alla attribut: Skripttaggsreferens.

3. Utöka din Content Security Policy

Om webbplatsen har en CSP lägger du till:

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

Varför båda posterna i connect-src behövs: Säkerhet och CSP.

4. Kontrollera

Öppna sidan med utvecklarverktygen:

• Elements: i slutet av <body> finns <reactive-chat>.
• Network: loader.js, sedan (senast när pekaren hålls över chattknappen) core.<hash>.js och en WebSocket-anslutning till wss://ws.reactive.chat/rc_wss/ med statuskod 101.
• Console: när widgeten laddats returnerar ReactiveChat('getSession') { sessionId, visitorId, tabId }.

Skriv ett testmeddelande; det visas i kontots agentpanel. Om ingen anslutning upprättas, se Felsökning.

Varianter

Via en tagghanterare: laddaren läser sina attribut från sitt eget <script>-element. Skapa därför en tagg som infogar ett riktigt <script src> med attributen, eller ange konfigurationen i förväg:

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

Med en strikt CSP behöver inline-skriptet en nonce som tagghanteraren måste ange.

Leverera loader.js själv: om du laddar filen från en egen katalog anger du chattadressen uttryckligen – annars letar widgeten efter chattservern under din domän och inget meddelande kommer fram, utan att något felmeddelande visas:

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

Med data-rc-cdn-base fortsätter laddaren att hämta den matchande kärnan från oss. Obs: en kopia av loader.js uppdateras inte; när kärnan ändras måste du förnya kopian själv. Inbäddning från cdn.reactive.chat eller via en egen domän är fortfarande det rekommenderade sättet.

Domäner med tvådelad ändelse (.co.uk, .com.au …) när du levererar filen själv: ange alltid data-rc-ws-url uttryckligen.

Ensidesappar: bädda in en gång i appens skal, se SPA och sidbyten.

Mobilappar: Mobilappar.

Nästa steg

• Identifiera inloggade användare: ReactiveChat('identify', …) med en signatur från din server – Identifiera besökare.
• Egna knappar och länkar: <a href="#rc-open">Help</a> – Öppna chatten från en egen länk.
• Reagera på händelser: ReactiveChat('on', 'message', …) – Händelser.
• Anslut din backend: Webhookar, Server-API, Kunddata.
• Utseende och beteende: Anpassning.