TutorialBuild website thumbnail previews for dashboards, directories, link cards, CRM records, and internal tools with a screenshot API.
GuideWe compared the top screenshot APIs on pricing, included volume, request limits, content handling, output quality, and developer experience.
GuideCapture consistent dark mode screenshots for docs, QA, marketing reviews, and visual regression tests without switching browser settings by hand.
Developers, marketers, and founders use Allscreenshots to automate website captures. No credit card required to get started.
You load a page in your browser and see the content you expected. Your automated screenshot runs a few seconds later and captures something else entirely: a newsletter form, a country selector, a survey, or a dark backdrop covering most of the page.
These interruptions are difficult to handle at scale because they are not all built the same way. Some appear immediately. Others wait for a timer, a network request, or a scroll event. Some live in ordinary HTML; others are rendered inside web components and shadow roots. The visible modal and its dimmed backdrop may even be separate elements.
AllScreenshots now handles these cases with a new API option: blockPopups.
Popup and overlay blocking is enabled by default. A basic request is enough:
curl -X POST 'https://api.allscreenshots.com/v1/screenshots' \
-H 'X-API-Key: YOUR_API_KEY' \
-H 'Content-Type: application/json' \
-d '{
"url": "https://example.com",
"fullPage": true
}' \
--output page.pngIf you prefer capture policies to be explicit in application code, include the option:
{
"url": "https://example.com",
"blockPopups": true
}The same setting works across synchronous and asynchronous screenshots, bulk jobs, composed captures, schedules, website crawls, social images, and stealth captures.
The feature focuses on page-level interruptions rather than ordinary content. Common examples include:
The distinction matters. A footer that says “subscribe to our newsletter” is useful page content and should remain visible. A fixed newsletter dialog covering the article is an interruption and should be removed.
To make that distinction, AllScreenshots considers both meaning and presentation. An element needs interruption-related signals and dialog-like behavior before it is removed. The capture engine also watches for delayed additions and checks open shadow roots used by modern web components.
A CSS selector is still the most precise tool when you know the target website. For example:
{
"url": "https://example.com",
"hideSelectors": [
".newsletter-modal",
".newsletter-backdrop"
]
}That works well for one site. It does not scale cleanly when you capture customer URLs, crawl an unknown site, or maintain hundreds of monitored pages. Every site uses different names, and generated class names often change between deployments.
blockPopups provides the reusable first layer. Site-specific selectors remain available as a narrow fallback:
{
"url": "https://example.com",
"blockPopups": true,
"hideSelectors": ["[data-testid='seasonal-takeover']"]
}Popups, cookie banners, and ads are separate problems. The corresponding API controls are also separate:
| Option | Removes |
|---|---|
blockAds | Ads and common tracking resources |
blockCookieBanners | Cookie and privacy consent UI |
blockPopups | Marketing, location, survey, app, notification, and age-gate overlays |
All three default to true, so most capture requests do not need to include them. Listing them explicitly can still be useful for shared configuration:
const capturePolicy = {
blockAds: true,
blockCookieBanners: true,
blockPopups: true,
};
const response = await fetch('https://api.allscreenshots.com/v1/screenshots', {
method: 'POST',
headers: {
'X-API-Key': process.env.ALLSCREENSHOTS_API_KEY,
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: 'https://example.com/pricing',
fullPage: true,
waitUntil: 'networkidle',
...capturePolicy,
}),
});Full-page captures spend more time on a page and scroll through more content. That gives delayed marketing tools more opportunities to open a dialog. It also makes sticky backdrops and body scroll locks more disruptive.
The blocker stays active during rendering and performs another cleanup immediately before the output is created. This catches interruptions added after the first page load.
For a long or heavily client-rendered page, start with:
{
"url": "https://example.com/long-page",
"fullPage": true,
"fullPageMode": "stitch",
"waitUntil": "networkidle",
"blockPopups": true
}If important images are lazy-loaded, increase scrollInterval or add a short delay. Popup blocking and page-readiness controls solve different problems: blocking removes interruptions, while timing allows real content to finish rendering.
A crawler can encounter different popup systems on every page. Set blockPopups once and it applies to every rendered page:
curl -X POST 'https://api.allscreenshots.com/v1/crawls' \
-H 'X-API-Key: YOUR_API_KEY' \
-H 'Content-Type: application/json' \
-d '{
"url": "https://example.com",
"depth": 2,
"limit": 25,
"outputs": ["screenshot", "markdown"],
"blockPopups": true
}'That is useful for visual inventories, content migrations, competitive research, and documentation archives. The screenshots remain readable without maintaining a selector list for every page in the tree.
Sometimes the interruption is the subject of the screenshot. Disable blocking when you are:
{
"url": "https://example.com",
"blockPopups": false
}The opt-out is part of the capture state and the screenshot cache key, so blocked and unblocked requests remain distinct.
For evidence workflows, consider archiving both versions: one raw capture with blockPopups: false and one clean capture for easier review.
Removing a dialog is appropriate when the underlying page already exists and the overlay merely covers it. Some gates do more: the content is not rendered until a user clicks a confirmation button.
For those pages, use an interactive action:
{
"url": "https://example.com",
"actions": [
{
"type": "click",
"selector": "button[data-action='confirm-age']",
"optional": true
}
]
}Use blocking to reveal existing content. Use actions when the interaction itself changes what the application renders.
If an interruption remains visible, work from general to specific:
blockPopups enabled.delay if the site opens the dialog unusually late.waitFor.hideSelectors.This order keeps your configuration portable while still giving you precise control over unusual pages.
A clean screenshot pipeline should spend its effort capturing the page, not cataloging every popup vendor on the web. Default popup blocking makes first captures more reliable and keeps scheduled, bulk, and crawl outputs focused on the content you wanted.
Read the popup and overlay guide for more examples, or see the complete blocking reference for ads, cookies, domain blocklists, selectors, and custom CSS.