Single-page apps

In a single-page app the page doesn't reload when the route changes, so the chat (and its conversation) simply stays open. widget.js also tells the chat about each route change, so:

• the agent gets a note with the new page's URL and title (it knows where the visitor is);
• the greeting bubble's page rules are checked again for the new path.

Automatic (the default)

widget.js watches history.pushState, history.replaceState, the popstate and hashchange events, and Turbo's turbo:load. That covers React Router, Next.js, Vue Router, SvelteKit, Angular, Turbo and most others with no code.

Mount the chat once, high in the app (the root layout or App component), so route changes don't unmount it. With the React components, several components for the same bot share one chat anyway.

Manual

If you'd rather say when the page changed (to skip query-string changes, say), turn the automatic tracking off and call page():

<script>
  window.wirefaceChatSettings = { bot: 'pk_your_bot_id', spa: 'manual' };
</script>
<script src="https://chat.example.com/widget.js" async></script>

router.afterEach(to => {
  WirefaceChat.page({ url: location.href, title: document.title });
});

spa is set per chat, wherever you pass boot options: window.wirefaceChatSettings, WirefaceChat.boot(), bootWirefaceChat() or the React component's props. Other chats on the page keep following routes on their own. WirefaceChat.page() goes to the first chat; call page() on a chat instance for another.

page() only reaches the chat once its window has loaded; before that, the window picks up the current page itself when it loads.

Links in replies

When the agent's reply links to a page on your own site (the same origin as the page the chat is on), clicking it navigates your page there instead of opening a new tab. This is a normal full page load (location.assign), not a client-side route change.

Changing user or context

• Signed in or out without a reload? See Identity verification.
• Facts the agent should know as the app changes (cart contents, the open record): setContext().
• Tools that only make sense on some routes: register them in that route's component and unregister when it unmounts (useWirefaceTool does this for you in React).