Single-page-apps en paginawisselingen

In een single-page-app laadt de browser de pagina maar één keer; daarna vervangt uw framework inhoud en verandert het adres via history.pushState. De widget herkent die veranderingen zelf. U hoeft niets te melden of opnieuw te starten.

Insluiten: precies één keer

Plaats de loader eenmaal in de shell van uw app (index.html, rootlayout, _document), niet in een component die bij elke routewijziging opnieuw wordt gerenderd. Een tweede keer insluiten kan geen kwaad (de tweede loader doet niets, zie Scripttag), maar de tag verwijderen en opnieuw invoegen start de widget niet opnieuw.

// Next.js (App Router), app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cdn.reactive.chat/loader.js"
                data-rc-site-key="SITE_KEY"
                strategy="afterInteractive" />
      </body>
    </html>
  );
}

Of een frameworkhulpmiddel de data-*-attributen aan het gegenereerde <script> doorgeeft, controleert u het eenvoudigst in de elementinspecteur. Als data-rc-site-key daar ontbreekt, start er niets.

Hoe paginawisselingen worden herkend

De widget haakt niet in op history.pushState; hij observeert alleen:

1. de Navigation API van de browser (navigation.currententrychange), waar beschikbaar;
2. anders popstate en hashchange;
3. daarnaast een timer die adreswijzigingen zonder gebeurtenis vindt (elke seconde, elke 5 seconden met de Navigation API);
4. pageshow bij terugkeer uit de back/forward-cache.

Telt als paginawisseling: een nieuw adres (pad of query) en hashroutes in de vorm #/… en #!/…. Telt niet als paginawisseling: alleen naar een anker springen (#section) en replaceState naar hetzelfde adres.

Wat wordt gemeld

400 ms na de wijziging (zodat tussenstappen van omleidingen niet meetellen) stuurt de widget een contextframe naar de server — alleen met toestemming:

• url, path, title, referrer — url en referrer worden eerst ontdaan van gevoelige queryparameters (zoals email, password, token, key, card).
• locale, tz, viewport, screen, ua_hint.
• utm_source, utm_medium, utm_campaign, gclid, msclkid, fbclid uit het adres.
• nav — type wijziging: load, push, replace, reload, back, forward of traverse.

Als uw app de titel pas na de wijziging instelt, stuurt de widget na 2 seconden een correctie. Zo zien medewerkers in het agentenpaneel op welke pagina de bezoeker zich bevindt en betrekt de assistent het antwoord op die pagina.

De widget leest ook de zichtbare paginatekst opnieuw (voor antwoorden over de huidige pagina en voor “Laat zien”) — op zijn vroegst 1,2 seconden na de laatste wijziging, maximaal elke 5 seconden, nooit op pagina’s zoals account, afrekenen of winkelmand en nooit uit formuliervelden. Markeer gedeelten die de assistent niet mag lezen met data-rc-private (Scripttag).

Eigen context per pagina doorgeven

Er is geen aparte methode om een paginawisseling te melden en die is ook niet nodig. Als u aanvullende gegevens over de huidige pagina wilt doorgeven, zoals het getoonde product, gebruikt u track na de routewijziging:

// React Router
const location = useLocation();
useEffect(() => {
  if (produkt) {
    window.ReactiveChat('track', 'produktseite', {
      page_type: 'product', product_id: produkt.sku, price: produkt.preis,
      currency: 'EUR', in_stock: produkt.lieferbar
    });
  }
}, [location.pathname, produkt]);

Welke velden aankomen, staat onder Bezoekers identificeren en context doorgeven.

Turbo, htmx, Livewire

Frameworks die de hele <body> vervangen, verwijderen daarbij ook het element van de widget. De widget voegt zichzelf dan opnieuw toe (maximaal tien keer per minuut); het gesprek gaat verder.

Aangemelde gebruikers in SPA’s

Als iemand zich zonder herladen aanmeldt, roept u daarna identify aan met een zojuist bij de server opgehaalde hash. Als de gebruiker verandert, scheidt de widget het invoerconcept van de vorige gebruiker. Details onder Bezoekers identificeren.

Privacytekst in SPA’s

Als uw app de privacyverklaring pas na het laden invoegt, vindt de widget het element data-rc-privacy toch (hij observeert het document). Zie Privacyintegratie.

Volgende: Beveiliging en CSP