RightMessage
Gatsby logo
Site compatibilityJavaScript Framework

Add personalization to your Gatsby application.

Gatsby builds blazing-fast static sites with React and GraphQL. RightMessage adds personalization based on visitor segments from your email platform. Show different content to different audiences, personalize CTAs based on subscriber data, and tailor messaging across your Gatsby site.

Start here

Add RightMessage to your existing Gatsby setup.

Keep Gatsby in place and use RightMessage to personalize its existing pages for each visitor.

Using RightMessage with Gatsby.

Smart opt-in forms that adapt to context

Show different lead magnets based on what visitors are reading on your Gatsby site. Hide opt-in forms from existing subscribers and show upgrade paths instead.

Increase conversion rates with contextually relevant offers.

Dynamic headlines, CTAs, and content

Personalize any text on your Gatsby site based on visitor segments, traffic source, or behavior. Show relevant testimonials, case studies, and social proof.

No code required. Just add CSS classes to elements you want to personalize.

PPC landing page personalization

Match your Gatsby landing page content to ad campaigns using UTM parameters. One page can serve unlimited ad variations.

Improve ad relevance scores and conversion rates with automatic message matching.

Setup tips for RightMessage on Gatsby.

  • Add the RightMessage script in gatsby-ssr.js or gatsby-browser.js
  • Call RightMessage.reset() in gatsby-browser.js onRouteUpdate export for client-side navigation
  • Connect RightMessage to your email platform for subscriber-based personalization
  • Static pages load fast, then RightMessage personalizes content client-side
  • Use quizzes to segment visitors before they subscribe

Frequently asked questions.

How do I install RightMessage in Gatsby?+

Add the RightMessage script in gatsby-ssr.js using setHeadComponents. For client-side only loading, add it in gatsby-browser.js using the onClientEntry export.

How do I handle client-side navigation?+

Gatsby pre-fetches pages and uses client-side routing. Call RightMessage.reset() in the onRouteUpdate export in gatsby-browser.js to re-apply personalizations on page changes.

Does personalization affect Gatsby build times?+

No. RightMessage runs entirely client-side. Your Gatsby build process stays the same. Personalization applies after the static page loads in the browser.

Can I personalize content from headless CMS sources?+

Yes. RightMessage personalizes whatever content Gatsby renders, regardless of data source. Content from Contentful, Sanity, or any CMS can be personalized client-side.

How do I prevent flash of unpersonalized content?+

Hide personalized elements initially with CSS, then let RightMessage reveal the correct version. Gatsby's fast page loads minimize any visible flash.

How do I add RightMessage to my Gatsby site?+

Add a small JavaScript snippet to your Gatsby site, similar to adding Google Analytics. You can also install our npm package for tighter integration. Installation typically takes 5 minutes or less.

Can I personalize without writing code on Gatsby?+

While Gatsby is a framework that requires code, RightMessage provides a simple JavaScript API and React/Vue components that make personalization straightforward.

Will RightMessage slow down my Gatsby site?+

No. The RightMessage script loads asynchronously and doesn't block page rendering. Personalizations are applied after the initial page load. The script is served from a global CDN and is highly optimized. Your Core Web Vitals and page speed scores remain unaffected.

What elements can I personalize on Gatsby?+

You can personalize any text, images, or content sections on your Gatsby site. Common personalizations include headlines, CTAs, testimonials, case studies, pricing displays, and entire page sections. You can also show/hide elements and redirect visitors based on segments.

Does RightMessage work with Gatsby's built-in forms?+

RightMessage provides its own widgets (popups, slide-ins, inline forms, sticky bars) that you can embed on your Gatsby site. You can also personalize Gatsby's native forms by showing/hiding them based on visitor segments or personalizing the surrounding content.

Need detailed setup instructions? Read our Gatsby setup guide →
Ready to launch?

Start personalizing your Gatsby experience.

Keep Gatsby in place and add personalized copy, proof, forms, and offers without rebuilding your site.