# Prevent a flash of original content

You'll hide a changing headline while RightMessage loads, so visitors don't briefly see the original wording before their personalized version.

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](https://rightmessage.com/help/everything-you-need-to-know-about-your-rightmessage-tracking-script) 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](https://workforge.rightmessage.com) could look like:

```html
<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. RightMessage removes the temporary style after its initial data loads and the page is ready. Visitors then see either the personalized headline 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

The standard snippet removes the temporary cloak after 20 seconds if loading hasn't finished. A script-load error also removes it. Your project's configured timeout can differ. Neither 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](https://rightmessage.com/help/publishing-your-changes).

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](https://rightmessage.com/help/troubleshoot-personalization). Cloaking won't fix an audience rule or a missing selector.