How to get around content flickering when using site modifiers?

Content flickering may happen when you are using Site Modifiers. What it means is that user sees the original version of content before it gets modified. 

Site Modifier's script is already optimized to minimize the impact of content flickering. If it is still a problem for you, below are ways you can use to try and get around content flickering. 


1) Pulse Endpoint Querying

This is the only solution that can guarantee elimination of content flickering. Instead of relying on Site Modifiers to add a transformation layer on top of your existing landing page, you can fetch raw social proof data via Pulse Endpoints using server side querying and render your landing page with updated content. This approach would require more technical work on your end but it does eliminates the need for you to add additional scripts to your site.


2) Install anti-flicker snippet

This is the recommended solution for users. The idea is to initially hide visibility of elements that you want to modify and only show them after modifications have been made.

<script>
(function(timeout) {
  var elementId = "ov_initial_invisible_styles";
  var tag = document.createElement('style');
  tag.id = elementId;
  tag.innerHTML = `.ov-initial-invisible { visibility: hidden !important;}`;
  document.head.appendChild(tag);

  setInterval(() => {
    var el = document.getElementById(elementId);
    if (el) el.remove();
  }, timeout);
})(5000);
</script>
  • Copy the script above and place in before </head> of page.  
  • Add css class ov-initial-invisible to HTML elements you intend to modify.

Let's say your current landing page HTML looks something like this and you want to modify the h1 element. (We're omitting anti-flickering script in this example for brevity.)

<html>
<head></head>
<body>
  <h1 class="cta-title">Join us today!</h1>
</body>
</html>

 You can add  ov-initial-invisible to prevent content flickering. Hence the modified version will look something like this.

<html>
<head></head>
<body>
  <h1 class="cta-title ov-initial-invisible">Join us today!</h1>
</body>
</html>

After content modification has been made, we will automatically display the initially hidden content.

If you are adding  ov-initial-invisible to element, it may change element's CSS selector output. Remember to use the updated version of CSS selector if you are using it in OnVoard's UI when adding elements to modify.