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.

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.

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.