The following describes techniques used to prevent layout shifts or flashing content when a webpage loads with personalized content. To avoid layout shifts or flashing of content targeted for personalization by Inflektion, we recommend implementing the following steps.

These steps are only necessary for key content elements that are likely to get personalized and are above the fold (see the definition of what that means), for example your headline, subheadline or hero image.

Implementation Steps

Please send this support page to your developer to implement.

1) Add Global CSS

Insert the following inline CSS as early as possible inside the <head> tag of your website:

<style>
.inflektion-hide { opacity: 0; }
</style>

2) Apply the CSS Class

Determine the above-the-fold elements that are most likely to be customized, such as images or text that appears above the fold when the page loads. Once you've identified the target elements, add the “inflektion-hide” class to them. For example:

<h1 class="header inflektion-hide">Your page headline here</h1>

How It Works

By following these steps, the above-the-fold elements will be initially hidden during page load. The Inflektion customization script will then reveal them seamlessly, preventing layout shifts and ensuring a smooth user experience. If no personalization is required or the click does not originate from a partner, the element will be instantly revealed, showing the original content.

If you have any questions, please reach out to us for help.