De widget insluiten

De korte versie

Plaats deze regel in de head van uw pagina en vervang SITE_KEY door uw sleutel:

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

Dat is alles. De loader is 3,48 kB groot en haalt de core pas op zodra de browser tijd heeft of de bezoeker de chatknop aanraakt.

Als u loader.js zelf aanbiedt, is nog één regel nodig

Sommige mensen laden het script liever uit hun eigen map dan uit ons distributienetwerk — vanwege beleid, een stagingomgeving of gewoon uit gewoonte. Dat werkt, maar dan moet u de chatverbinding expliciet opgeven:

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

Waarom: zonder die instelling leidt de widget het adres af van de plek waar het script vandaan kwam. Als dat uw domein was, zoekt de widget de chat daar ook — en vindt niets.

En dat gaat op een vervelende manier mis. De chatknop verschijnt, het venster opent, kleur en taal kloppen, alles lijkt klaar. Alleen komt er nooit een bericht aan. Er is geen foutmelding: de verbinding blijft het op de achtergrond proberen en juist dat verbergt de fout. Alleen de browserconsole noemt de host waar tevergeefs wordt gezocht.

De waarde hierboven is voor elk account bij ons hetzelfde. Alleen als u de server zelf draait, voert u uw eigen waarde in.

Via een subdomein van uw eigen website

Als de chat first-party via uw eigen subdomein moet lopen (bijvoorbeeld chat.your-company.com in plaats van cdn.reactive.chat), staat de proxyconfiguratie beschreven in de handleiding voor een eigen domein. Uw account toont dan het passende fragment.

Wanneer WebSockets worden geblokkeerd

Als een netwerk geen WebSocket doorlaat, bijvoorbeeld achter een bedrijfsproxy, werkt de chat automatisch verder via gewoon HTTPS. Hiervoor heeft uw Content Security Policy naast het wss://-adres ook het hieronder genoemde adres met https:// nodig. Wanneer de fallback wordt gebruikt en hoe u deze voor tests afdwingt, staat in HTTP-fallback.

De chat via eigen links openen, een promotiekaart tonen

Elke link of knop op uw pagina kan de chat openen, waarbij het venster er direct naast verschijnt: De chat openen vanuit een eigen link of knop. Hoe u in de chat een kaart voor uw eigen aanbod toont, zoals uw betaalde abonnement, staat in De promotiekaart in de chat.

De privacytekst automatisch insluiten

Een klein element op uw privacyverklaringspagina toont de passende tekst over de chat, steeds in overeenstemming met uw projectinstellingen en in de taal van de pagina: De privacytekst automatisch insluiten.

Waarom er geen inline script is

De gebruikelijke vorm die onze concurrenten leveren, is een inline <script>. Onder een strenge Content Security Policy zonder unsafe-inline wordt dit geblokkeerd voordat er ook maar één regel van wordt uitgevoerd. De bovenstaande vorm met attributen heeft dat niet nodig.

Wat uw beleid daarnaast moet toestaan:

• script-src de distributiehost, hier cdn.reactive.chat
• connect-src het WebSocket-adres, hier wss://ws.reactive.chat
• connect-src ook hetzelfde adres met https:// als protocol, hier https://ws.reactive.chat — het offlineformulier en de HTTP-fallback gebruiken dit wanneer een bedrijfsproxy WebSockets blokkeert

De instellingen op de scripttag

1. data-rc-site-key — verplicht. Zonder dit attribuut start niets, en dat is bewust zo.
2. data-rc-locale — de, en of pl. Als het ontbreekt, beslist de browser.
3. data-rc-brand — uw merkkleur. De tekst wordt herberekend totdat deze leesbaar is.
4. data-rc-ws-url — verplicht zodra u loader.js niet vanaf cdn.reactive.chat laadt. Zie het gedeelte hierboven.

Al het overige staat op het functieoverzicht en de prijspagina.

Uitgebreid in de documentatie

Stap voor stap: Snel aan de slag. Elk scripttagattribuut met type en standaardwaarde: Referentie van de scripttag. Alle hoofdstukken staan in de documentatie.