That Cookie Banner Is in Every Screenshot on Your Docs Site

#webdev #documentation #automation #css

Go look at your docs site right now. Open any page with a screenshot of your product. Is there a cookie consent banner in the screenshot?

I've seen this on documentation sites from companies worth billions. A beautiful product screenshot with "We use cookies to improve your experience" plastered across the bottom.

Why it keeps happening

Because removing the cookie banner from a screenshot is annoying. You either:

Dismiss it before capturing (and hope the timing is right)
Crop it out afterwards in an image editor
Use CSS overrides in your capture script
Just ignore it and hope nobody notices

Option 4 wins most of the time.

Per-domain element hiding

With heroshot, you define elements to hide once per domain:

{
  "hiddenElements": {
    "myapp.com": [".cookie-banner", ".chat-widget", ".announcement-bar"],
    "docs.myapp.com": [".cookie-consent", "#intercom-container"]
  }
}

Every screenshot captured on myapp.com automatically hides those elements. Every screenshot on docs.myapp.com hides its own set. You set this up once and never think about it again.

It's not just cookie banners

Here's what I typically hide:

{
  "hiddenElements": {
    "myapp.com": [
      ".cookie-banner",
      ".chat-widget",
      ".announcement-bar",
      ".beta-badge",
      "[data-testid='debug-panel']"
    ]
  }
}

Chat widgets (Intercom, Crisp, Drift) are the worst offenders. They float over your UI and show up in element-level screenshots too, not just full page captures.

The visual eraser

Don't want to write selectors by hand? The visual picker has an eraser tool:

npx heroshot config

Click the eraser icon in the toolbar. Then click any element on the page you want gone. It adds the selector to hiddenElements automatically.

Cookie banner? Click. Chat bubble? Click. Promotional toast? Click. Done.

Multiple domains

If your docs reference screenshots from multiple sites (your app, your marketing site, a third-party integration), each domain gets its own hide list:

{
  "hiddenElements": {
    "app.example.com": [".cookie-banner"],
    "marketing.example.com": [".cookie-banner", ".popup-overlay"],
    "partner-dashboard.io": [".gdpr-notice"]
  }
}