Embedding the widget

The short version

Put this line in the head of your page and replace SITE_KEY with your key:

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

That is all. The loader weighs 2.7 kB and fetches the core only once the browser has time, or once the visitor touches the launcher.

If you serve loader.js yourself, you need one more line

Some people would rather load the script from their own directory than from our delivery network — because of a policy, because of a staging environment, or simply out of habit. That works, but then you have to state the chat connection explicitly:

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

Why: without it the widget derives the address from wherever the script came from. If that was your domain, it looks for the chat there too — and finds nothing.

And it fails badly. The launcher appears, the window opens, colour and language are right, everything looks finished. Only no message ever arrives. There is no error: the connection keeps retrying in the background, and that is exactly what hides the fault. Only the browser console names the host it is looking for in vain.

The value above is the same for every account with us. Only if you run the server yourself do you put in your own.

Through a subdomain of your own website

If the chat should run first-party through your own subdomain (e.g. chat.your-company.com instead of cdn.reactive.chat), the proxy setup is described in the own domain guide. Your account then shows the matching snippet.

When WebSockets are blocked

If a network does not let a WebSocket through, for example behind a corporate proxy, the chat automatically continues over plain HTTPS. For this your Content Security Policy needs the https:// address below in addition to the wss:// address. When the fallback applies and how to force it for testing is described in HTTP fallback.

Open the chat from your own links, show a promo card

Any link or button on your page can open the chat, with the window appearing right next to it: Open the chat from your own link or button. How to show a card for your own offer in the chat, such as your paid plan, is described in The promo card in the chat.

Embed the privacy text automatically

A small element on your privacy policy page shows the matching text about the chat, always in line with your project settings and in the language of the page: Embed the privacy text automatically.

Why there is no inline script

The usual form our competitors ship is an inline <script>. Under a strict Content Security Policy without unsafe-inline it is blocked before a single line of it runs. The attribute form above needs none.

What your policy has to allow in addition:

• script-src the delivery host, here cdn.reactive.chat
• connect-src the WebSocket address, here wss://ws.reactive.chat
• connect-src the same address with https:// as well, here https://ws.reactive.chat – the offline form and the HTTP fallback use it when a corporate proxy blocks WebSockets

The settings on the script tag

1. data-rc-site-key — required. Nothing starts without it, and that is deliberate.
2. data-rc-locale — de, en or pl. If missing, the browser decides.
3. data-rc-brand — your brand colour. The text is recalculated until it is readable.
4. data-rc-ws-url — required as soon as you do not load loader.js from cdn.reactive.chat. See the section above.

Everything else is on the feature overview and the pricing page.