Platforms

Framer

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

Framer uses client-side navigation. Install the tracking script below; RightMessage handles page changes automatically without an additional reset script.

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

Steps

Step 1: Copy your RightMessage tracking code

Copy your custom tracking snippet from your RightMessage account using the tracking snippet guide linked above.

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: Publish your site changes

Click Publish to make the tracking script live on your website.

Automatic client-side navigation

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 installed the SPA reset script, remove it without removing your tracking snippet:

  1. Remove the SPA reset script from the End of <body> tag field.

  2. Keep the tracking snippet in the Start of <head> tag field.

  3. Click Save.

  4. Click Publish.

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

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 doesn't appear after email opt-in on thank you page

Email not being passed to RightMessage

Ensure your form redirects with the email parameter (e.g., /[email protected])

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

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 (For form submission callbacks)

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

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

Was this helpful?
Was this helpful?