Prevent a flash of original content

Keep a headline from flashing its original wording before RightMessage replaces it. A temporary cloak hides just that element while personalization loads.

You'll need permission to edit your website's HTML or element classes. Install the complete RightMessage snippet from project settings. Loading only its JavaScript URL leaves out the temporary cloak styles and fallback timer.

Use cloaking only on content that needs it. Hiding the whole page makes visitors wait for content that isn't changing.

Add a temporary cloak

1. Find the element in your website builder or source code.
2. Add rmcloak to its existing CSS classes. Leave out the leading dot in a class-name field.
3. Keep its existing classes and stable ID.
4. Save and publish the website change through your usual website workflow.

Here's what a headline on WorkForge (opens in a new tab) could look like:

<h1 id="hero-title" class="hero-heading rmcloak">Bring your team together.</h1>

rmcloak uses visibility: hidden, so the headline still takes up its usual space. Each cloaked element shows as soon as RightMessage decides what that visitor sees in it, and RightMessage removes the rmcloak class from it. Elements reveal one by one, so a decided headline doesn't wait for slower content elsewhere on the page. Visitors see their personalized or tested version, or the original.

Keep the right amount of space

For a changing headline, use rmcloak so nearby content doesn't move when it appears.

If the element shouldn't take up space while hidden, use rmcloak-hidden instead. It temporarily uses display: none, so revealing it can move other content.

Don't use rmcloak-stay-invisible or rmcloak-stay-hidden as temporary cloaks. They use separate, persistent visibility and display styles that normal uncloaking doesn't remove. They need an explicit action to reveal the content. Test that action before putting essential fallback content behind either class.

Test slow and failed loads

New snippets remove the cloak after 3 seconds if RightMessage hasn't loaded. A script-load error also removes it. A snippet you installed before keeps the wait time it was copied with, which was 20 seconds. To use 3 seconds, copy the snippet again from project settings and replace it on your website. Neither timeout removes the separate stay style.

1. Open the page in a fresh browser session with no matching audience. Check that the original content appears.
2. Test a matching audience on a slower connection.
3. Check that navigation and important calls to action remain usable while the element is hidden.
4. Check that the original content appears if personalization can't load.

If you also have unpublished campaign changes, choose Preview on your site in RightMessage. Use the debugger docked at the bottom to check the audience and page changes before you publish them.

The campaign editor reveals RightMessage-cloaked content so you can select and edit it. Seeing the headline there doesn't test its loading behavior for visitors. Use your actual website for the slow-load and failure checks above.

Check your A/B test elements

A flash matters most in an A/B test: a visitor who glimpses the original before their version has seen both. The editor warns you when a tested element above the fold isn't covered.

1. Open the campaign in the editor and choose the tested audience or the Original page.
2. Check the top of On this page. When a tested element above the fold isn't protected, the editor says: "Visitors may see the original of a tested element above the fold before their version. Add the class rmcloak to it on your website."
3. Add rmcloak to that element on your website.

A tested element that isn't on the page you're viewing appears under Other changes as "Not found on this page". Open the page it's on to check it.

When you start a test, the Start dialog lists unprotected elements above the fold. See run an A/B test on a page or audience.

Don't add a permanent .rmcloak { visibility: hidden } rule to your website stylesheet. RightMessage can't remove that rule when it removes its temporary loader style.

When the intended content appears without a flash and the original still appears after a failed load, your cloak is working. If the content never appears or stays unchanged, use personalization troubleshooting. Cloaking won't fix an audience rule or a missing selector.