Single-page apps and page changes

In a single-page app, the browser loads the page only once; after that, your framework swaps content and changes the address via history.pushState. The widget detects these changes by itself. You do not need to report anything or restart anything.

Embedding: exactly once

Put the loader once into the shell of your app (index.html, root layout, _document), not into a component that is re-rendered on every route change. Embedding it a second time is harmless (the second loader does nothing, see Script tag), but removing and reinserting the tag does not restart the widget.

// 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>
  );
}

The easiest way to check whether a framework helper passes the data-* attributes on to the generated <script> is the element inspector. If data-rc-site-key is missing there, nothing starts.

How page changes are detected

The widget does not hook into history.pushState; it only observes:

1. the browser's Navigation API (navigation.currententrychange), where available;
2. otherwise popstate and hashchange;
3. in addition, a timer that finds address changes without an event (every second, every 5 seconds with the Navigation API);
4. pageshow on returning from the back/forward cache.

Counts as a page change: a new address (path or query) and hash routes of the form #/… and #!/…. Does not count as a page change: a mere jump to an anchor (#section) and replaceState to the same address.

What is reported

400 ms after the change (so that intermediate states of redirects do not count), the widget sends a context frame to the server – only with consent:

• url, path, title, referrer – url and referrer are first cleaned of sensitive query parameters (such as email, password, token, key, card).
• locale, tz, viewport, screen, ua_hint.
• utm_source, utm_medium, utm_campaign, gclid, msclkid, fbclid from the address.
• nav – type of change: load, push, replace, reload, back, forward or traverse.

If your app sets the title only after the change, the widget sends a correction after 2 seconds. This way agents in the desk see which page the visitor is currently on, and the assistant relates its answer to this page.

The widget also re-reads the visible page text (for answers about the current page and for “Show me”) – at the earliest 1.2 seconds after the last change, at most every 5 seconds, never on pages such as account, checkout or cart, and never from form fields. Mark areas the assistant should not read with data-rc-private (Script tag).

Passing your own context per page

There is no dedicated method for reporting a page change, and none is needed. If you want to pass additional details about the current page, such as the product shown, use track after the route change:

// 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]);

Which fields arrive is listed under Identifying visitors and passing context.

Turbo, htmx, Livewire

Frameworks that swap the whole <body> also remove the widget's element in the process. The widget then reattaches itself (at most ten times per minute); the conversation continues.

Signed-in users in SPAs

If someone signs in without a reload, call identify afterwards with a hash freshly fetched from the server. If the user changes, the widget separates the input draft from the previous user. Details under Identifying visitors.

Privacy text in SPAs

If your app inserts the privacy policy only after loading, the widget still finds the data-rc-privacy element (it observes the document). See Privacy integration.

Next: Security and CSP