Guides / Regions & elements

Regions and single elements

Marketing widgets, pricing cards, and analytics tiles rarely need the entire page. Target a DOM node or explicit rectangle to keep files small and focus reviewer attention.

Overview

ScreenNabster offers two complementary mechanisms: selector (CSS query resolved to a bounding box) and explicit clip_x, clip_y, clip_w, clip_h in viewport coordinates. You can still enable page_full for context, but most element shots keep the default viewport and let the clip reduce output size.

Element selector

Provide any selector Playwright can resolve. The first matching element defines the bitmap bounds. Pair with wait_for_selector if the node appears after async data loads.

body.json

{
  "url": "https://example.com/pricing",
  "selector": "section[data-plan='pro']",
  "wait_for_selector": "section[data-plan='pro']",
  "output": "png"
}

curl

curl -X POST "https://screennabster.com/api/v1/capture" \
  -H "X-API-Key: pk_live_…" \
  -H "Content-Type: application/json" \
  -d "{\"url\":\"https://example.com\",\"selector\":\"#hero\",\"output\":\"webp\"}" \
  --output hero.webp

Selector capture controls

The default selector capture uses Playwright's element screenshot path. Use selector_algorithm: "clip" when you want ScreenNabster to resolve the element bounding box and take a page screenshot clipped to that rectangle. selector_scroll_into_view defaults to true, and capture_beyond_viewport passes through to Playwright for elements or clips that extend beyond the visible viewport.

body.json

{
  "url": "https://example.com/pricing",
  "selector": "section[data-plan='pro']",
  "selector_algorithm": "clip",
  "selector_scroll_into_view": true,
  "capture_beyond_viewport": false,
  "output": "png"
}

Manual clip rectangle

When designers give pixel coordinates from a design tool—or you want identical crops across many URLs—set all four clip fields. Coordinates are relative to the top-left of the viewport after navigation and scroll_to are applied.

body.json

{
  "url": "https://example.com",
  "clip_x": 0,
  "clip_y": 120,
  "clip_w": 800,
  "clip_h": 420,
  "output": "png"
}

Clicks & hover before capture

Accordions, mega menus, and “reveal price” buttons often need a gesture before the DOM reflects the state you want. Use click_selector or hover_selector. By default missing nodes fail the job (error_on_click_not_found, error_on_hover_not_found default to true) so silent empty captures do not slip into production.

Set those flags to false when you only want a best-effort interaction (for example A/B tests where the button may be absent) and still need a screenshot of whatever rendered.

strict-default.json

{
  "url": "https://example.com",
  "click_selector": "#accept-cookies",
  "output": "png"
}

Default: missing #accept-cookies returns an API error — no image.

lax-click-hover.json

{
  "url": "https://example.com",
  "click_selector": "#maybe-promo-close",
  "hover_selector": ".tooltip-target",
  "error_on_click_not_found": false,
  "error_on_hover_not_found": false,
  "output": "png"
}

curl-lax.sh

curl -X POST "https://screennabster.com/api/v1/capture" \
  -H "X-API-Key: pk_live_…" \
  -H "Content-Type: application/json" \
  -d "{\"url\":\"https://example.com\",\"click_selector\":\"#maybe-promo-close\",\"hover_selector\":\".tooltip-target\",\"error_on_click_not_found\":false,\"error_on_hover_not_found\":false,\"output\":\"png\"}" \
  --output shot.png

Practical tips

Hide noisy chrome with hide_selectors instead of post-processing in Photoshop.
For sticky headers overlapping your clip, increase clip_y or scroll first.
PDF clips still respect paper size—see the PDF guide if print margins fight your rectangle.