Architectuur en verloop

De onderdelen

In de browser van uw bezoekers:

• loader.js — een klein laadonderdeel van enkele kilobytes. Het leest de configuratie, controleert toestemming, tekent een tijdelijke chatknop op de definitieve plek (zonder lay-outverschuiving) en maakt window.ReactiveChat met een opdrachtenwachtrij aan. Verder doet het niets.
• De core (core.<hash>.js) — chatvenster, verbinding, maskering van persoonsgegevens, regels. Deze wordt pas geladen zodra er een trigger afgaat: de browser heeft niets te doen, een muis of vinger bevindt zich op de chatknop, er komt een API-opdracht of een frustratiesignaal van MousePlayer. De meeste bezoekers openen de chat nooit en laden dit onderdeel daarom ook niet meteen.
• Modules op aanvraag — producttours, privacytekst, webshopfuncties; elke module pas wanneer deze nodig is.
• Isolatie — alles bevindt zich in een gesloten shadow DOM; stijlen via constructable stylesheets, geen inline scripts, geen eval, geen cookies.

Bij reactive.chat:

• Distributie via https://cdn.reactive.chat/ — loader, core, modules.
• Chatserver via wss://ws.reactive.chat/rc_wss/ — WebSocket met protocol rc.v1; hetzelfde adres met https:// voor de HTTP-fallback, het offlineformulier, uploads, privacytekst en Smart Answer.
• Account via https://reactive.chat/app — projectinstellingen, ontwerp, kennisbank, het agentenpaneel van uw team.
• Server-API via https://reactive.chat/v1/ — REST en MCP voor uw backend.

Aan uw kant (optioneel):

• Uw backend ondertekent de identiteit van aangemelde gebruikers, beantwoordt de klantgegevensopvraging, ontvangt webhooks en roept de server-API aan.
• Uw proxy levert alles via een eigen subdomein (Eigen domein).

Verloop van een paginabezoek

1. De browser laadt loader.js (asynchroon, blokkeert niets).
2. De loader leest data-rc-*, ReactiveChatSettings en in de wachtrij geplaatste boot-aanroepen, controleert de sitesleutel en toestemming en tekent de tijdelijke knop.
3. Een trigger gaat af; de loader laadt de core uit dezelfde map.
4. De core neemt de tijdelijke knop en de wachtrij over en verwerkt de opdrachten in volgorde.
5. De core opent de verbinding en stuurt init met de sitesleutel, ID’s, taal, toestemming, de eventuele ondertekende identiteit en paginacontext.
6. De server controleert origin, project en identiteit en antwoordt met init_ok: ontwerp en teksten uit het account, regels, functies, limieten en de gespreksgeschiedenis tot nu toe.
7. De widget is klaar (gebeurtenis ready). Paginawisselingen in single-page-apps meldt hij zelf.

Verloop van een vraag

1. De bezoeker schrijft; persoonsgegevens worden in de browser gemaskeerd en het bericht krijgt een unieke ID.
2. De server slaat het op (herhalingen worden aan de ID herkend), maskeert het opnieuw en bevestigt het met een echo.
3. De AI-assistent doorzoekt uw kennisbank — bij bestelvragen van een bevestigde gebruiker ook via het klantgegevensendpoint — en streamt het antwoord. Wanneer de assistent aan uw team overdraagt, stelt u in uw account in (Handboek).
4. Tegelijk gaan gebeurtenissen via een wachtrij naar webhooks en integraties. Een chat wacht daar nooit op.

Versies en distributie

• loader.js heeft geen versienummer in de naam en wordt bij updates vervangen. Sluit deze daarom in vanaf cdn.reactive.chat (of via uw proxy), niet als kopie.
• De core heet core.<hash>.js; de hash wordt uit de inhoud berekend en elke loader kent precies de bijbehorende core. Zo passen loader en core altijd bij elkaar en kan een core lang worden gecachet.
• De configuratie (ontwerp, teksten, regels, tours) komt bij elke verbinding van de server. Wijzigingen in uw account vereisen geen nieuw insluitfragment; ze worden na korte tijd actief (afhankelijk van de instelling maximaal één minuut).
• De protocolversie is 1. Nieuwe velden worden toegevoegd; onbekende velden worden genegeerd.
• ReactiveChat.version geeft de versie van de core zodra deze geladen is.

Waar u wat instelt

• In uw account: uiterlijk, teksten, startscherm, regels, tours, A/B-tests, AI-persona (Aanpassing), team, kennisbank, kanalen (Handboek).
• Op de scripttag: wat per pagina moet gelden (Referentie van de scripttag).
• In uw paginascript: identiteit, context, openen vanuit eigen elementen (JavaScript-API).
• Op uw server: handtekeningen, klantgegevens, webhooks, API (Identiteit, Klantgegevens, Webhooks, Server-API).

Volgende: Snel aan de slag