Code snippets

How to Reveal a Page After A/B Test Changes Load

★★★ Technical level 3 of 3

Written by Neil Webley · Last updated 31 August 2026

Reveal hidden A/B test content as soon as variant changes finish, including safe synchronous, asynchronous and error-handling patterns.

When should you reveal an A/B test page?

Reveal the affected content immediately after all changes needed for the first visible state have been applied. Do not wait for analytics, below-the-fold widgets, optional libraries or images that already have reserved space. Every extra millisecond of hiding delays the visitor without improving the test.

If only a component was hidden, reveal that component. If the whole document was hidden, restoring it is the highest-priority cleanup action in the experiment.

Reliable JavaScript reveal patterns

Synchronous transformation

var hideId = 'fcro-hide---testID--';

try {
  var heading = document.querySelector('.hero__heading');
  if (heading) {
    heading.textContent = 'A better headline';
  }
} finally {
  cro_tests.revealElements(hideId);
}

finally executes whether the transformation succeeds or throws. It protects the visitor from a blank component while still allowing an error to appear in developer tools.

Several transformations

Apply the minimum set of above-the-fold changes, then reveal once. Revealing between individual DOM writes can expose a partially transformed state.

try {
  var hero = document.querySelector('.hero');
  if (hero) {
    hero.querySelector('h1').textContent = 'Plan your next trip';
    hero.classList.add('hero--experiment');
  }
} finally {
  cro_tests.revealElements('fcro-hide---testID--');
}

Reveal after asynchronous or dynamic content

When the target is rendered later, wait for it with a bounded observer. The FreeCROTool helper resolves with the element or null; either outcome must reveal the page.

cro_tests.waitForElement('.recommendations__title', 1200)
  .then(function (title) {
    try {
      if (title) {
        title.textContent = 'Chosen for you';
      }
    } finally {
      cro_tests.revealElements('fcro-hide---testID--');
    }
  });

If the SPA may replace the element later, revealing the initial page and maintaining the later transform are separate jobs. Use an idempotent MutationObserver after the initial reveal rather than holding the page hidden for the lifetime of the route. See how to wait for dynamic elements.

Use Reveal Page in FreeCROTool

In a hand-coded test, select Reveal Page from the code-snippet menu. It removes the stylesheet created by the matching Hide Page snippet:

window.cro_tests.removeCSS('freeCROCSS_--testID--');

The IDs must be identical. --testID-- is case-sensitive and is replaced when the test is published. Code in the main-tag initialisation script has no test context and must use the actual ID.

For custom component hiding, hideElements and revealElements provide a paired API. Review the FreeCROTool visibility helpers and anti-flicker strategy.

Common reveal mistakes

• Mismatched IDs: the reveal removes a different style element and the page remains hidden.
• Reveal only on success: a missing selector or exception leaves a blank page.
• Waiting for too much: optional content delays the entire experience.
• No independent timeout: a failed request has no escape route.
• Removing every style tag: cleanup damages the website rather than the experiment alone.
• Revealing too early: visitors see the DOM change after it becomes visible.

Test by deliberately breaking the selector and blocking the test request. The original page should become visible within the configured safety period in both cases.