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:

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

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.

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.