Quick start: a working chat in five minutes

1. Get the site key and enter your domain

In your account under Project → Installation you will find your embed snippet with the site key. Under Allowed origins, enter every domain on which the chat should run (subdomains are included: your-company.com covers www.your-company.com and shop.your-company.com). The chat server accepts connections only from these domains.

2. The one line

Put the snippet from your account before </body> or into the <head>:

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

The snippet from your account also carries data-rc-brand with your brand colour, so that the launcher appears in the right colour straight away. It is therefore best to copy it unchanged. All attributes: Script tag reference.

3. Extend your Content Security Policy

If your website sets a CSP, add:

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

Why both connect-src entries are needed: Security and CSP.

4. Check

Open your page with the developer tools:

• Elements: at the end of <body> there is <reactive-chat>.
• Network: loader.js, then (at the latest when hovering over the launcher) core.<hash>.js and a WebSocket connection to wss://ws.reactive.chat/rc_wss/ with status code 101.
• Console: once loaded, ReactiveChat('getSession') returns { sessionId, visitorId, tabId }.

Write a test message; it appears in your account's desk. If no connection is established, see Troubleshooting.

Variants

Through a tag manager: the loader reads its attributes from its own <script> element. So create a tag that inserts a real <script src> with the attributes, or set the configuration beforehand:

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

Under a strict CSP, the inline script needs a nonce, which your tag manager has to set.

Serving loader.js yourself: if you load the file from your own directory, state the chat address explicitly – otherwise the widget looks for the chat server under your domain, and no message arrives, without any error message appearing:

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

With data-rc-cdn-base the loader keeps fetching the matching core from us. Note: a copy of loader.js is not updated; when the core changes, you have to renew it yourself. Embedding from cdn.reactive.chat or through an own domain remains the recommended way.

Domains with a two-part ending (.co.uk, .com.au …) when serving the file yourself: always set data-rc-ws-url explicitly.

Single-page apps: embed once in the app shell, see SPA and page changes.

Mobile apps: Mobile apps.

Next steps

• Recognise signed-in users: ReactiveChat('identify', …) with a signature from your server – Identifying visitors.
• Your own buttons and links: <a href="#rc-open">Help</a> – Open the chat from your own link.
• React to events: ReactiveChat('on', 'message', …) – Events.
• Connect your backend: Webhooks, Server API, Customer data.
• Appearance and behaviour: Customisation.