A Recipe for Clean Onboarding Tour Screenshots with hide, delay, and fullSize

A Recipe for Clean Onboarding Tour Screenshots with hide, delay, and fullSize

author

Snapshot Site Team

05 Jul 2026 - 02 Mins read

Product tours, tooltip walkthroughs, and welcome modals (Intro.js, Shepherd, Appcues-style overlays, or a homegrown version) are designed to draw the eye — which is exactly the problem when you are trying to screenshot the underlying app screen for documentation, marketing, or QA. The tour tooltip either photobombs the shot, or the modal has already dismissed itself and left the app in some intermediate state by the time the capture fires.

This is a recipe, not a single feature: three real parameters combined to get a clean, tour-free screenshot of the actual product screen underneath.

The Three Ingredients

curl --request POST \
  --url https://api.prod.ss.snapshot-site.com/api/v2/screenshot \
  --header 'Content-Type: application/json' \
  --header 'x-snapshotsiteapi-key: YOUR_API_KEY' \
  --data '{
    "url": "https://app.example.com/dashboard?tour=skip",
    "format": "png",
    "width": 1440,
    "height": 900,
    "fullSize": true,
    "hideCookie": true,
    "delay": 2,
    "hide": ".intro-tooltip, .onboarding-modal, .tour-overlay, .tour-backdrop"
  }'
  • hide removes the tooltip, modal, and any dimming backdrop the tour library injects — target its actual CSS classes or IDs.
  • delay gives the tour library time to mount (and, if you are dismissing it via a query param or script, time for that dismissal to take effect) before the capture happens.
  • fullSize captures the whole screen once it is clean, not just whatever fit in the tooltip's immediate vicinity.

Getting the Tour Out of the Way First

hide removes the tooltip visually, but if the library also renders a full-screen dimming backdrop, hiding just the tooltip can leave a dark overlay in the shot. Two options, depending on what the tour library supports:

  1. A URL parameter or feature flag that suppresses the tour entirely for the capture session — the cleanest option when available, since nothing needs hiding after the fact.
  2. A broader hide selector that catches the backdrop, the tooltip, and any highlight ring around the "active" element, all in one pass.

Most tour libraries use a small, predictable set of class names for these pieces, so once you have found them for your specific implementation, the same hide value works across every screen the tour appears on.

Why This Combination, Specifically

Using only hide without delay can fire the capture before the tour has even mounted, in which case there is nothing to hide yet — but the moment it does mount, right after, the tooltip is back in frame for the next unrelated capture if your screenshot job runs on a loop. A short delay first, then hide, keeps the timing predictable regardless of how fast or slow the tour library initializes.

Where This Comes Up

  • Product documentation and knowledge base screenshots, where the tour is irrelevant to what the doc is explaining.
  • Marketing screenshots of the actual product UI, taken from a real environment rather than a mockup.
  • Visual regression baselines, where an onboarding tour appearing or not appearing (say, for new vs. returning test accounts) would otherwise create false diffs — see Tuning the threshold Parameter in the Visual Diff API for handling noise like this if it shows up in a comparison.

Once the right hide selectors and delay are found for a given app, the recipe is reusable across every screen the tour touches — and Snapshot Site applies it consistently on every call, so the same clean result comes back whether you capture one screen or a hundred.

Recent Articles

Subscribe to Snapshot Site API

Snapshot Site is a powerful API that allows you to capture full-page, high-resolution screenshots of any website with pixel-perfect accuracy.
Simply send a URL to the API to generate a complete snapshot — not just the visible area — covering entire web pages, scrolling content, landing pages, blogs, news articles, social media posts, videos, and more.
Designed for developers, designers, marketers, and journalists,
Snapshot Site makes it easy to integrate web page capture into your applications, workflows, and automation tools.

Subscribe Now
bg wave