Platforms

Framer

RightMessage helps you personalize elements of your Framer website to convert website traffic into leads, sales, customers, and clients.

Framer is built on React under the hood, which makes it a Single Page Application (SPA). This means you'll need to take an extra step beyond installing the tracking script to ensure RightMessage works correctly after visitors navigate between pages.

To begin using RightMessage, you must install a small JavaScript tracking snippet into your website's pages. This snippet activates RightMessage and enables visitor tracking and personalization on your Framer site.

Prerequisites

  • A RightMessage account with access to your tracking snippet

  • A Framer website project with access to site settings

  • Basic familiarity with adding custom code to Framer

Before you begin

Framer uses client-side navigation (like other React-based frameworks), which means page changes don't trigger full page reloads. Without the additional setup steps below, RightMessage widgets may fail to appear after visitors navigate from one page to another, breaking session persistence and personalization.

Steps

Step 1: Copy your RightMessage tracking code

Here's how to find your custom tracking snippet.

Step 2: Add the tracking script to your Framer site

  1. Log into your Framer account and open your project

  2. Click the Settings icon (gear icon) in the top navigation

  3. Navigate to the General tab

  4. Scroll down to find the Custom Code section

  5. Paste your RightMessage tracking snippet into the Start of <head> tag field

  6. Click Save to apply your changes

Adding the script to the head tag ensures RightMessage loads before the rest of your page content, which is important for proper tracking and personalization.

Step 3: Add the SPA reset script for client-side navigation

This is the critical step that makes RightMessage work correctly with Framer's React-based navigation system.

  1. In the same Custom Code section of your Framer site settings, scroll to the End of <body> tag field

  2. Paste the following script into the End of <body> tag field:

    <script>
  (function () {
    // Call RightMessage reset once RM is available
    function rmResetSafe() {
      if (window.RM && typeof window.RM.push === "function") {
        window.RM.push(["reset"]);
        return true;
      }
      return false;
    }

    // Try immediately (in case RM already loaded)
    if (!rmResetSafe()) {
      // Otherwise, poll briefly until RM is ready
      var tries = 0, maxTries = 40; // ~4s total
      var t = setInterval(function () {
        if (rmResetSafe() || ++tries >= maxTries) clearInterval(t);
      }, 100);
    }

    // Fire on every Framer client-side pageview (includes initial load)
    document.addEventListener("framer:pageview", function () {
      rmResetSafe();
    });
  })();
</script>

  3. Click Save to apply your changes

  4. Click Publish to make the changes live on your website

Why the SPA reset script is necessary

The custom script above solves a specific problem with Framer websites:

  • Client-side navigation: When visitors navigate between pages on your Framer site, React updates the page content without doing a full browser reload

  • Session persistence issue: Without the reset script, RightMessage doesn't know a new page has loaded, so widgets configured to appear on specific pages may not display correctly

  • The framer:pageview event: Framer dispatches a custom framer:pageview event on both initial page load and every client-side navigation, making it the perfect trigger point

  • What RM.push(['reset']) does: This command tells RightMessage to track a new page view, re-segment the visitor based on the current page, and rerun all Flows and personalization campaigns

With this script in place, RightMessage will correctly handle page changes and display widgets at the right time, even when visitors navigate through your site using Framer's client-side routing.

Verify the setup

After completing the installation, verify that everything is working correctly:

  1. Visit your live Framer website in a private/incognito browser window

  2. Open your browser's developer console (press F12 or right-click and select "Inspect")

  3. Navigate between different pages on your site

  4. Check the console for any JavaScript errors related to RightMessage

  5. In your RightMessage dashboard, check that visitor data is being recorded

  6. If you have a widget configured to appear on a specific page, navigate to that page from another page to ensure it displays correctly

To verify the reset function is working, you can temporarily add console.log('RM reset'); inside the rmResetSafe() function. You should see this message in the console every time you navigate to a new page.

Adding RightMessage widgets to Framer pages

To add personalized widgets or areas to your Framer pages:

  1. Create your widget in RightMessage and copy the embed code (e.g., <div class="rm-area-XXXXXX"></div>)

  2. In your Framer project, navigate to the page where you want to place the widget

  3. Add an Embed component or Custom Code component to your page

  4. Paste your RightMessage widget embed code into the component

  5. Save and publish your page

Troubleshooting

Symptom

Likely Cause

Solution

Widget appears on direct page load but disappears after navigation

SPA reset script not installed or not working

Verify the reset script is properly pasted in the End of <body> tag section and published

Widget doesn't appear after email opt-in on thank you page

Email not being passed to RightMessage or reset not firing

Ensure your form redirects with the email parameter (e.g., /[email protected]) and that the reset script is installed

No visitor data appearing in dashboard

Tracking script not properly installed or published

Check that the tracking snippet is in the head tag section and that you've published your site changes

Console shows "RM is not defined" error

Tracking script hasn't loaded yet when reset tries to run

The polling mechanism in the script should handle this, but verify the tracking script URL is correct and loading

Survey answers not syncing to email platform

Visitor not properly identified or integration not configured

Ensure the visitor is identified via email parameter or RM.push(['identifyByEmail', '[email protected]']) and check your integration settings

Identifying visitors after form submission

When a visitor submits a form on your Framer site, you have two options to identify them to RightMessage:

Redirect the user to your thank you page with an email parameter:

/[email protected]

RightMessage will automatically detect this parameter and identify the visitor.

Option 2: JavaScript API (Better for Framer's client-side navigation)

Use Framer's form submission callback to trigger the identification:

// After form submission
RM.push(['identifyByEmail', '[email protected]']);

The JavaScript API method is often more reliable with Framer because redirects don't trigger full page reloads. However, as long as you have the SPA reset script installed, both methods should work.

Was this helpful?
Was this helpful?