Snel aan de slag: een werkende chat in vijf minuten

1. De sitesleutel ophalen en uw domein invoeren

In uw account onder Project → Installatie vindt u uw insluitcode met de sitesleutel. Voer onder Toegestane origins elk domein in waarop de chat moet werken (subdomeinen vallen eronder: your-company.com omvat www.your-company.com en shop.your-company.com). De chatserver accepteert alleen verbindingen vanuit deze domeinen.

2. De ene regel

Plaats het fragment uit uw account vóór </body> of in de <head>:

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

Het fragment uit uw account bevat ook data-rc-brand met uw merkkleur, zodat de chatknop meteen in de juiste kleur verschijnt. U kunt het daarom het beste ongewijzigd kopiëren. Alle attributen: Referentie van de scripttag.

3. Uw Content Security Policy uitbreiden

Als uw website een CSP instelt, voeg dan toe:

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

Waarom beide connect-src-vermeldingen nodig zijn: Beveiliging en CSP.

4. Controleren

Open uw pagina met de ontwikkelaarstools:

• Elementen: aan het einde van <body> staat <reactive-chat>.
• Netwerk: loader.js, daarna (uiterlijk wanneer u de muis over de chatknop beweegt) core.<hash>.js en een WebSocket-verbinding naar wss://ws.reactive.chat/rc_wss/ met statuscode 101.
• Console: na het laden geeft ReactiveChat('getSession') { sessionId, visitorId, tabId } terug.

Schrijf een testbericht; het verschijnt in het agentenpaneel van uw account. Als er geen verbinding tot stand komt, zie Problemen oplossen.

Varianten

Via een tagmanager: de loader leest zijn attributen uit het eigen <script>-element. Maak daarom een tag die een echt <script src> met de attributen invoegt, of stel vooraf de configuratie in:

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

Bij een strenge CSP heeft het inline script een nonce nodig, die uw tagmanager moet instellen.

loader.js zelf aanbieden: als u het bestand uit een eigen map laadt, geef dan expliciet het chatadres op — anders zoekt de widget de chatserver onder uw domein en komt er geen bericht aan, zonder dat er een foutmelding verschijnt:

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

Met data-rc-cdn-base blijft de loader de bijpassende core bij ons ophalen. Let op: een kopie van loader.js wordt niet bijgewerkt; wanneer de core verandert, moet u deze zelf vernieuwen. Insluiten vanaf cdn.reactive.chat of via een eigen domein blijft de aanbevolen manier.

Domeinen met een tweedelige extensie (.co.uk, .com.au …) wanneer u het bestand zelf aanbiedt: stel data-rc-ws-url altijd expliciet in.

Single-page-apps: eenmaal insluiten in de app-shell, zie SPA en paginawisselingen.

Mobiele apps: Mobiele apps.

Volgende stappen

• Aangemelde gebruikers herkennen: ReactiveChat('identify', …) met een handtekening van uw server — Bezoekers identificeren.
• Eigen knoppen en links: <a href="#rc-open">Help</a> — De chat openen vanuit een eigen link.
• Reageren op gebeurtenissen: ReactiveChat('on', 'message', …) — Gebeurtenissen.
• Uw backend koppelen: Webhooks, Server-API, Klantgegevens.
• Uiterlijk en gedrag: Aanpassing.