Resources/Site Settings/Screenshot exclusions

Screenshot exclusions

Strip cookie banners and other overlays from the page screenshots behind heatmaps.

Heatmaps and several other features overlay data on a screenshot of your page, captured server-side by a headless browser. That browser arrives as a brand-new visitor — which means it sees your cookie banner, and so the screenshot ends up with a consent overlay covering the content you actually wanted to look at.

Screenshot exclusions with a rule for a cookie banner

Adding an exclusion

An exclusion names an element to remove before the screenshot is taken. Each rule has:

  • Selector — either a CSS selector (#cookie-banner, .consent-overlay) or an XPath expression, for cases CSS cannot address.
  • URL pattern — optional. Leave blank to apply the rule site-wide, or scope it to the pages where the element appears.

Click Add exclusion, then re-capture a screenshot to see the effect.

What to exclude

  • Cookie and consent banners — by far the most common.
  • Chat widgets and support bubbles.
  • Promotional overlays and newsletter popups that fire on page load.
  • Sticky "app install" interstitials.

What not to exclude

Do not remove elements that are genuinely part of the page. The screenshot should match what visitors see, otherwise the heatmap's click positions will not line up with the content underneath them.

Finding the right selector

Open the page, right-click the offending element, and choose Inspect. Prefer a stable id or class over a generated one — build-hashed class names change on every deploy and will silently stop matching.

Removal happens at capture time in the headless browser. It does not affect your live site and does not change what visitors see.

Put this to work on your own site.

Heatmaps, session replays, funnels and experiments in one platform. Set it up in minutes, no credit card needed, and early-access members earn exclusive rewards.