Démarrage rapide : un chat opérationnel en cinq minutes

Intégrer le widget en une ligne, renseigner votre domaine, compléter la Content Security Policy et vérifier la connexion, puis connecter utilisateurs, boutons et backend.

1. Obtenir la clé du site et renseigner votre domaine

Dans votre compte, sous Projet → Installation, vous trouverez le code d’intégration avec la clé du site. Sous Origines autorisées, indiquez chaque domaine sur lequel le chat doit fonctionner (les sous-domaines sont inclus : your-company.com couvre www.your-company.com et shop.your-company.com). Le serveur de chat n’accepte les connexions que depuis ces domaines.

2. Une seule ligne

Placez le code de votre compte avant </body> ou dans <head> :

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

Le code de votre compte contient aussi data-rc-brand avec la couleur de votre marque, pour que le bouton du chat apparaisse immédiatement dans la bonne couleur. Il est donc préférable de le copier sans le modifier. Tous les attributs : Référence de la balise script.

3. Compléter votre Content Security Policy

Si votre site définit une CSP, ajoutez :

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

Pourquoi les deux entrées connect-src sont nécessaires : Sécurité et CSP.

4. Vérifier

Ouvrez votre page avec les outils de développement :

Éléments : à la fin de <body> se trouve <reactive-chat>.
Réseau : loader.js, puis (au plus tard au survol du bouton du chat) core.<hash>.js et une connexion WebSocket vers wss://ws.reactive.chat/rc_wss/ avec le code d’état 101.
Console : après le chargement, ReactiveChat('getSession') renvoie { sessionId, visitorId, tabId }.

Écrivez un message de test : il apparaît dans l’espace agents de votre compte. Si aucune connexion n’est établie, consultez Dépannage.

Variantes

Via un gestionnaire de balises : le chargeur lit les attributs de son propre élément <script>. Créez donc une balise qui insère un véritable <script src> avec les attributs, ou définissez la configuration au préalable :

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

Avec une CSP stricte, le script en ligne nécessite un nonce que votre gestionnaire de balises doit définir.

Distribuer vous-même loader.js : si vous chargez le fichier depuis votre propre répertoire, indiquez explicitement l’adresse du chat. Sinon, le widget cherche le serveur de chat sous votre domaine : aucun message n’arrive et aucun message d’erreur ne s’affiche :

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

Avec data-rc-cdn-base, le chargeur continue de récupérer chez nous le noyau correspondant. Attention : une copie de loader.js n’est pas mise à jour ; lorsque le noyau change, vous devez la renouveler vous-même. L’intégration depuis cdn.reactive.chat ou via un domaine personnalisé reste la méthode recommandée.

Domaines à extension en deux parties (.co.uk, .com.au …), si vous distribuez vous-même le fichier : définissez toujours explicitement data-rc-ws-url.

Applications monopages : intégrez le code une seule fois dans la structure principale de l’application ; voir SPA et changements de page.

Applications mobiles : Applications mobiles.

Étapes suivantes

Reconnaître les utilisateurs connectés : ReactiveChat('identify', …) avec une signature de votre serveur – Identifier les visiteurs.
Vos propres boutons et liens : <a href="#rc-open">Help</a> – Ouvrir le chat depuis votre propre lien.
Réagir aux événements : ReactiveChat('on', 'message', …) – Événements.
Connecter votre backend : Webhooks, API serveur, Données clients.
Apparence et comportement : Personnalisation.

अंतिम अपडेट: 2026-10-25