How to use RightMessage with single page applications (SPAs)
Install your RightMessage script once to use RightMessage with React, Vue.js, Svelte, Next.js, Nuxt.js, and other single page applications.
Prerequisites
A RightMessage account
Your website configured as an SPA or with a framework like Next.js or Nuxt.js
Access to your website's codebase
Install the RightMessage script
Install the RightMessage script: Add your unique RightMessage script to your site. The method varies depending on the framework.
Standard SPAs (React, Vue, Svelte)
Add the script to the <head> section of your main index.html file.
<!-- Your other head content -->
<script async src="https://YOUR_RIGHTMESSAGE_SCRIPT_URL.js"></script>Next.js
In your root layout (app/layout.js or app/layout.tsx), use the next/script component.
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<Script async src="https://YOUR_RIGHTMESSAGE_SCRIPT_URL.js" />
</html>
)
}Nuxt.js
In your nuxt.config.js or nuxt.config.ts file, add the script to the head.script array.
export default defineNuxtConfig({
app: {
head: {
script: [
{ src: 'https://YOUR_RIGHTMESSAGE_SCRIPT_URL.js', async: true }
]
}
}
})Automatic route changes
RightMessage detects client-side route changes automatically and personalizes the new page before it is displayed. No router code or route-change hook is needed.
This includes URL changes through the History API (history.pushState and history.replaceState), browser back and forward navigation (popstate), hash changes (hashchange), and the Navigation API (navigatesuccess).
If you previously added a router hook that calls reset, remove that hook and keep your installation script. You do not need a React effect, a Next.js route provider, a Vue or Nuxt navigation guard, or a SvelteKit navigation callback for RightMessage.
App-state changes without a URL change
Use RM.push(['reset']) or RightMessage.reset() only when application state changes without a URL change, such as a login that changes data a Flow reads. Route changes do not need a manual reset.
Verify the setup
After installing the script, verify page views and personalization across client-side route changes:
Opening your website and navigating between different pages.
Checking your browser's developer console for any errors.
Confirming that page views and events are being tracked in your RightMessage dashboard.
If the setup is correct, you should see new page views being recorded in RightMessage every time you navigate to a new route in your application.
What's next
Getting help
If you have any questions or run into issues, please contact our support team.