Website Personalization

How to prevent Flash of Original Content (FOOC) with the "rmcloak" CSS class

Overview

When you personalize above-the-fold content on your website, visitors might briefly see the original (unpersonalized) content before RightMessage's script loads and applies your personalizations. This jarring visual change is called "Flash Of Original Content" (FOOC). You'll prevent this by adding the rmcloak CSS class to elements that will be personalized, ensuring a smooth, professional experience for your visitors.

Before you begin

Only apply .rmcloak to above-the-fold elements

Don't add this class to content that's below the fold (not visible without scrolling). It's unnecessary and can cause layout issues. Only use it for elements visitors see immediately when your page loads.

Understanding above-the-fold content

Above-the-fold content is everything visible on your webpage without scrolling. This term comes from newspaper design, where the most important content appeared above the physical fold of the paper.

How to identify above-the-fold elements

To determine which elements are above the fold on your website:

  1. Open your website in a browser at your most common screen size (typically 1920x1080 for desktop)

  2. Don't scroll. Just look at what's immediately visible when the page loads

  3. Common above-the-fold elements include:

    • Hero sections and main headlines

    • Primary call-to-action buttons

    • Navigation bars and logos

    • Featured images or videos

    • Opening paragraphs or value propositions

  4. Test on mobile devices too—the fold line is much higher on phones and tablets

The fold varies by device

What's above the fold on desktop may be below the fold on mobile. Prioritize elements that are above the fold on the devices your visitors use most. Check your analytics to see common screen sizes.

How the .rmcloak class works

When you add class="rmcloak" to an HTML element, here's what happens:

  1. Page loads → Your visitor's browser requests your webpage

  2. RightMessage snippet runs → The snippet (in your <head> tag) injects CSS that sets visibility: hidden on all .rmcloak elements

  3. Elements become invisible → The elements are hidden but still take up space on the page (this prevents layout shifts)

  4. RightMessage script loads → The main script loads asynchronously (usually 20-100 milliseconds)

  5. Personalization applies → Content is swapped based on your visitor's segment

  6. Cloaking removed → The visibility CSS is removed, revealing the personalized content

  7. Visitor sees personalized page → The entire process happens so fast they only see the personalized version

Built-in timeout protection

If RightMessage takes longer than 20 seconds to load (due to network issues), the cloaking is automatically removed. This ensures visitors always see your content, even if there's a technical problem.

Adding the .rmcloak class to your elements

The exact method for adding the rmcloak class depends on your website platform or page builder. Below are instructions for the most common platforms.

WordPress (Gutenberg Block Editor)

  1. Open the page or post you want to edit

  2. Click on the block containing the element you want to personalize (e.g., a heading, paragraph, or section)

  3. In the right sidebar, click the Block tab

  4. Scroll down to find the Advanced section and expand it

  5. In the Additional CSS class(es) field, type rmcloak

  6. Update or publish your page

Multiple classes

If the element already has CSS classes, just add rmcloak after them, separated by a space. For example: hero-section featured rmcloak

WordPress (Classic Editor or Page Builders)

If you're using the Classic Editor, Elementor, Divi, or another page builder:

  1. Switch to the HTML or Code view of your editor

  2. Find the HTML element you want to cloak (e.g., <h1>, <div>, <section>)

  3. Add or modify the class attribute to include rmcloak: 

    <!-- Before: -->
<h1>Welcome to Our Site</h1>

<!-- After: -->
<h1 class="rmcloak">Welcome to Our Site</h1>

  4. If the element already has classes: 

    <!-- Before: -->
<div class="hero-section featured">...</div>

<!-- After: -->
<div class="hero-section featured rmcloak">...</div>

  5. Save your changes

Webflow

  1. Open your page in the Webflow Designer

  2. Select the element you want to personalize (click it on the canvas)

  3. Look at the Style panel on the right side

  4. At the top of the Style panel, you'll see the Selector field

  5. Click into the Selector field (or press Command + Enter on Mac / Control + Enter on Windows)

  6. Type rmcloak and press Enter

  7. Publish your site to apply the changes

Combo classes in Webflow

Webflow may create a combo class (e.g., hero-section rmcloak). This is fine—the rmcloak class will still work correctly as part of the combo class.

Squarespace

Squarespace doesn't provide a built-in way to add custom classes to elements through the visual editor. You'll need to use Code Blocks:

  1. Edit the page where you want to prevent FOOC

  2. Add a Code Block where your personalized content should appear

  3. In the Code Block, add your HTML with the rmcloak class: 

    <div class="rmcloak">
  <h1>Your Personalized Headline</h1>
  <p>Your content here...</p>
</div>

  4. Save and publish your changes

Squarespace limitations

Because Squarespace requires Code Blocks for custom classes, you'll need to recreate your element structure in HTML. This is more technical than other platforms. Consider working with a developer if you're not comfortable with HTML.

Shopify

  1. In your Shopify admin, go to Online Store → Themes

  2. Click Customize on your active theme

  3. Navigate to the page with the element you want to personalize

  4. Click the element to select it

  5. Look for a Custom CSS class or Additional classes field in the settings panel

  6. Add rmcloak to that field

  7. Save your changes

If your theme doesn't provide a class field, you'll need to edit the theme code:

  1. Go to Online Store → Themes

  2. Click Actions → Edit code on your active theme

  3. Find the template file for your page (usually in the Sections or Templates folder)

  4. Locate the HTML element and add class="rmcloak" to it

  5. Click Save

Unbounce

  1. Open your landing page in the Unbounce builder

  2. Click on the element you want to personalize

  3. In the right sidebar, look for Element Metadata or Advanced settings

  4. Find the CSS Class Names field

  5. Add rmcloak (if other classes exist, add it separated by a space)

  6. Save and publish your page

Custom HTML / Static Sites

If you're working directly with HTML files or a custom-coded website:

  1. Open your HTML file in a code editor

  2. Find the element you want to personalize

  3. Add or modify the class attribute to include rmcloak: 

    <!-- Example 1: Adding to an element without classes -->
<h1 class="rmcloak">Your Headline</h1>

<!-- Example 2: Adding to an element with existing classes -->
<section class="hero bg-blue rmcloak">
  <h1>Welcome</h1>
</section>

<!-- Example 3: Button that will be personalized -->
<a href="#" class="btn btn-primary rmcloak">Get Started</a>

  4. Save your file and upload it to your web server

Verify the setup

After adding the rmcloak class, test to ensure FOOC is eliminated:

  1. Open an incognito/private browsing window

  2. Navigate to the page with your personalized content

  3. Watch closely as the page loads—you should NOT see:

    • Original content briefly appearing before changing

    • Text or images "jumping" or shifting

    • A flash of different headlines or CTAs

  4. If you still see flickering:

    • Verify the RightMessage snippet is in your <head> tag (not at the end of <body>)

    • Check that the class name is spelled correctly: rmcloak (not rm-cloak or rmCloack)

    • Open your browser's developer tools (F12) and inspect the element to confirm the class is applied

What success looks like

When correctly implemented, visitors will only see your personalized content smoothly appear—with no flash, no flicker, and no jarring content changes. The experience should feel seamless and professional.

Troubleshooting

Content still flickers despite adding .rmcloak

Cause: The RightMessage snippet isn't loading early enough, or it's not installed correctly.

Solution:

  • Verify the RightMessage tracking script is in the <head> section of your HTML, not at the bottom of the <body>

  • Check that you're using the correct, unmodified script from your RightMessage dashboard

  • Ensure the script isn't being blocked by ad blockers or Content Security Policies

  • Review the RightMessage tracking script guide for proper installation

Page appears blank for several seconds

Cause: The RightMessage script is taking too long to load, and the cloaked elements remain hidden.

Solution:

  • Check your website's performance and network speed

  • Use the RightMessage Debugger to see if there are script errors

  • Contact RightMessage support if the issue persists—there may be a server-side problem

Elements create awkward white space before content appears

Cause: The rmcloak class uses visibility: hidden, which hides content but reserves its space. If the personalized content is a different size, you'll see gaps.

Solution:

  • Ensure your original and personalized content are roughly the same size (same height/width)

  • Alternatively, use CSS to set fixed dimensions on the cloaked element so the space doesn't change

  • For elements that should completely disappear (no reserved space), consider using conditional display with data-rm-if attributes instead

The .rmcloak class isn't being applied

Cause: The class name is misspelled or not saved correctly.

Solution:

  • Open your browser's Developer Tools (press F12)

  • Right-click the element and select Inspect

  • Look at the HTML in the inspector to verify the class="rmcloak" attribute is present

  • Ensure you saved and published your changes in your CMS or page builder

  • Clear your browser cache and reload the page

RightMessage debugger shows "rmcloak detected but not working"

Cause: Your site's CSS may be overriding the visibility rules, or the snippet isn't injecting the cloaking CSS correctly.

Solution:

  • Check for conflicting CSS in your theme that sets visibility: visible !important on your elements

  • Republish your RightMessage campaigns from the dashboard to refresh the snippet code

  • Contact RightMessage support with details about your platform and theme

Limitations

  • Manual implementation required: You must add the rmcloak class yourself—RightMessage cannot automatically apply it to your elements

  • Above-the-fold only: Only use this for content visible without scrolling. It's unnecessary and can cause issues for below-the-fold content

  • Platform-dependent: Some platforms (like Squarespace) make it harder to add custom CSS classes without using code blocks

  • Size matching: Works best when original and personalized content are similar in size to avoid layout shifts

  • 20-second timeout: If personalization takes longer than 20 seconds to load, the cloaking is removed automatically (though this is extremely rare, and would only happen if our CDN, Cloudflare, were to go down.)

Getting help

If you're still experiencing FOOC after following this guide, collect the following information before contacting support:

  • Your website URL and the specific page with the issue

  • Which element(s) you added rmcloak to

  • Your website platform (WordPress, Webflow, Squarespace, etc.)

  • Screenshots or a screen recording showing the flicker

  • Any browser console errors (press F12 and check the Console tab)

Email us at [email protected] with these details, and we'll help you resolve the issue quickly.

Was this helpful?
Was this helpful?