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

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.

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.