RightMessage | RightMessage - Website Personalization Software

How to prevent hidden content flashing on the page

When personalizing the different elements on a page of your website, you may notice a flicker or a brief moment between the website loading and your personalizations being applied. This is referred to as Flash Of Original Content (or FOOC).

This article will demonstrate how to use the RightMessage message built-in classes to manage personalizations not designed to be displayed when your website is loading.

Why flash of original content (FOOC) happens

The RightMessage script is loaded on the “Client-side”, meaning the personalizations in your campaign are applied as the website page loads.

For your personalization changes to display, two things must happen: the RightMessage tracking snippet loads, then the elements being personalized on the page loads. The time for this to happen is not long, but it can be enough for your website visitors to notice.

Luckily, RightMessage has custom classes built into the tool that you can use to manage the challenges of FOOC.

The RightMessage snippet offers four CSS classes that you can add to your websites HTML code:

  • rmcloak: applies the { visibility: hidden; } style rule to an element

  • rmcloak-stay-invisible: applies the { visibility: hidden; } style rule to an element

  • rmcloak-hidden: applies the { display: none; } style rule to an element

  • rmcloak-stay-hidden: applies the { display: none; } style rule to an element

All four classes are then removed after RightMessage has finished applying personalizations.

Personal Panda says:


The cloak classes above will not work if added to the 'CSS Classes' field in the personalization editing tool. The cloak CSS classes need to be added to your default (unpersonalized) content.

Personal Panda says:

If you are using a page builder to create your content, you will need to research how to add custom CSS classes to content. This may be in the form of a HTML block provided in the page builder options.

Alternatively, contact the support team for the page builder you are using for instructions on how to add classes to specific pieces of content.

The differences between ‘visibility: hidden’ and ‘display: none’.

The classes built into RightMessage both provide a way of hiding an element on the page as the RightMessage script is loading, but which one is the best to use?

When you use visibility: hidden, the element is not visible on the page, but it still occupies space in the layout.

When you use display: none, the element not only is invisible, but it does not take up any space in the layout.

A great way to think how they differ is to imagine standing in a queue. If someone left the queue, everyone will move up one to fill the empty space - this is ‘display: none’. If the same person in the queue has invisibility superpowers, whilst you can’t see them, you will still see the space they occupy in the queue - this is ‘visibility: hidden’.

It needs to be noted that using display:none can create accessibility issues, as the content will be inaccessible to screen readers and keyboard navigation.

What if the RightMessage tracking script fails to load

In the event the RightMessage tracking snippet fails to load properly, the snippet has a timeout where the cloaked content will be shown, unless one of the 'rmcloak-stay-*' classes is used.

The 'rmcloak-stay-*' classes are intended to be used in cases where, instead of e.g. personalizing a single p's content, the customer may wish to create three separate ps, and use hide/show to ensure the correct one is shown. By using rmcloak on the "default" p and rmcloak-stay-invisible on the others, we can ensure that, even if the RightMessage CDN is down, the personalizations will function properly.



Handy tips to reduce the chances of FOOC from occurring

To reduce the page load time, it is possible to load RightMessage tracking snippet via Google Tag Manager or via the footer area of your website. However, loading the script using either method will increase the time it takes for the RightMessage snippet to load and apply personalizations.

We recommend to add the RightMessage tracking script directly into the header area of your website, or place the script higher in the header area if it is possible. This will place the RightMessage tracking script higher in the list of scripts to be loaded by the web browser.

Example of FOCC and how to use the cloaking

In the below example, the paragraph has values in brackets that will be personalized to be replaced with custom text for visitors of specific segments.

However, notice that when the URL is loaded, the [gender] value briefly displays on the screen before the personalization is loaded.

In order to hide that value until the RightMessage personalizations load, the rmcloak class is added to the HTML code for that value.

The 'rmcloak' class applies the CSS style of 'visibility: hidden' to the element.

When the page is loaded again, a space will display briefly where the personalization should show, and then the personalization populates.


If you would prefer that a space does not show prior to the perspnalization loading, use the class of 'rmcloak-hidden' to the element in your HTML.

The 'rmcloak-hidden' class applies the CSS style of 'display: none' to the element.

When the page is loaded again, you won't see a space where the personalization should show, but the personalization populates where it should be seen.

How to add the rmcloak class to WordPress content

To add the rmcloak class to your WordPress content, you will need to use the 'Text' tab when using the 'Classic Editor' and the 'Edit As HTML' option when using the Gutenberg paragraph blocks.

Classic Editor

When editing a page or post using the Classic Editor, click the 'Text' tab in the top right of the content editing box



Add the paragraph HTML tags to the content and add the class attribute to the opening paragraph tag:

<p class="rmcloak">Paragraph text goes here</p>

If you are customizing part of a paragraph, use the span HTML tags and add the class attribute to the opening span tag:

<p>I want to personalize the following <span class="rmcloak">snippet of text</span>.</p>

Gutenberg Editor

When editing a page or post using the Gutenberg Editor, click the dot icons to the right of the text block and select 'Edit as HTML'.



Add the paragraph HTML tags to the content and add the class attribute to the opening paragraph tag:

<p class="rmcloak">Paragraph text goes here</p>

If you are customizing part of a paragraph, use the span HTML tags and add the class attribute to the opening span tag:

<p>I want to personalize the following <span class="rmcloak">snippet of text</span>.</p>



Custom HTML Widget

You can also add the rmcloak classes in the Custom HTML widget.