Architecture et déroulement

Les composants

Dans le navigateur de vos visiteurs :

• loader.js – un petit composant de chargement de quelques kilo-octets. Il lit la configuration, vérifie le consentement, dessine un bouton du chat provisoire à sa position définitive (sans décalage de mise en page) et crée window.ReactiveChat avec une file de commandes. Il ne fait rien d’autre.
• Le noyau (core.<hash>.js) – fenêtre de chat, connexion, masquage des données personnelles, règles. Il n’est chargé qu’à l’activation d’un déclencheur : navigateur inactif, souris ou doigt sur le bouton du chat, commande d’API, signal de frustration de MousePlayer. La plupart des visiteurs n’ouvrent jamais le chat et ne chargent donc pas non plus immédiatement le noyau.
• Modules à la demande – visites guidées, texte de confidentialité, fonctions de boutique ; chacun est chargé seulement au besoin.
• Isolation – tout réside dans un shadow DOM fermé ; styles via des feuilles de style constructibles, aucun script en ligne, aucun eval, aucun cookie.

Chez reactive.chat :

• Distribution à l’adresse https://cdn.reactive.chat/ – chargeur, noyau, modules.
• Serveur de chat à l’adresse wss://ws.reactive.chat/rc_wss/ – WebSocket avec le protocole rc.v1 ; la même adresse avec https:// pour le repli HTTP, le formulaire hors ligne, les envois de fichiers, le texte de confidentialité et Smart Answer.
• Compte à l’adresse https://reactive.chat/app – réglages des projets, design, base de connaissances, espace agents de votre équipe.
• API serveur à l’adresse https://reactive.chat/v1/ – REST et MCP pour votre backend.

De votre côté (facultatif) :

• Votre backend signe l’identité des utilisateurs connectés, répond aux demandes de données clients, reçoit les webhooks et appelle l’API serveur.
• Votre proxy distribue l’ensemble via votre propre sous-domaine (Domaine personnalisé).

Déroulement d’une consultation de page

1. Le navigateur charge loader.js (de manière asynchrone, sans rien bloquer).
2. Le chargeur lit data-rc-*, ReactiveChatSettings et les appels boot en attente, vérifie la clé du site et le consentement, puis dessine le bouton provisoire.
3. Un déclencheur s’active ; le chargeur charge le noyau depuis le même répertoire.
4. Le noyau reprend le bouton provisoire et la file, puis traite les commandes en attente dans l’ordre.
5. Il ouvre la connexion et envoie init avec la clé du site, les identifiants, la langue, le consentement, l’identité signée s’il y en a une et le contexte de la page.
6. Le serveur vérifie l’origine, le projet et l’identité, puis répond avec init_ok : design et textes du compte, règles, fonctions, limites et historique de la conversation.
7. Le widget est prêt (événement ready). Il signale lui-même les changements de page dans les applications monopages.

Déroulement d’une question

1. Le visiteur écrit ; les données personnelles sont masquées dans le navigateur et le message reçoit un identifiant unique.
2. Le serveur l’enregistre (il reconnaît les doublons grâce à l’identifiant), le masque de nouveau et confirme par un écho.
3. L’assistant IA recherche dans votre base de connaissances et diffuse la réponse progressivement. Pour les questions de commande d’un utilisateur confirmé, il interroge aussi le point de terminaison des données clients. Vous définissez dans votre compte quand il transfère la conversation à votre équipe (Manuel).
4. En parallèle, les événements passent par une file d’attente vers les webhooks et les intégrations. Le chat ne les attend jamais.

Versions et distribution

• loader.js n’a pas de numéro de version dans son nom et est remplacé lors des mises à jour. Intégrez-le donc depuis cdn.reactive.chat (ou via votre proxy), pas sous forme de copie.
• Le noyau s’appelle core.<hash>.js ; le hachage provient de son contenu et chaque chargeur connaît précisément son propre noyau. Chargeur et noyau restent ainsi compatibles, et le noyau peut être mis en cache longtemps.
• La configuration (design, textes, règles, visites guidées) est fournie par le serveur à chaque connexion. Les modifications du compte ne nécessitent pas de nouveau code d’intégration ; elles prennent effet après un bref délai (jusqu’à une minute selon le réglage).
• La version du protocole est 1. De nouveaux champs sont ajoutés ; les champs inconnus sont ignorés.
• ReactiveChat.version indique la version du noyau une fois celui-ci chargé.

Où définir chaque réglage

• Dans votre compte : apparence, textes, écran d’accueil, règles, visites guidées, tests A/B, personnalité de l’IA (Personnalisation), équipe, base de connaissances, canaux (Manuel).
• Sur la balise script : ce qui doit s’appliquer à chaque page (Référence de la balise script).
• Dans le script de votre page : identité, contexte, ouverture depuis vos propres éléments (API JavaScript).
• Sur votre serveur : signatures, données clients, webhooks, API (Identité, Données clients, Webhooks, API serveur).

Suite : Démarrage rapide