ScreenshotNeo

BlogHow-to

How to Set a Viewport Size in PageCrawl.io Screenshot Requests

Set viewport widths in PageCrawl’s monitor settings, then use the API request generated by its developer mode for exact field names and payload structure.

By the ScreenshotNeo team4 October 20265 min read

Set a PageCrawl screenshot viewport through the monitored page’s advanced settings: enable Power User mode, choose the desired device emulation or viewport width, and save the monitor. PageCrawl’s documentation describes viewport configuration as part of monitor setup. The available research does not establish the exact API field name, payload location, or accepted numeric range, so do not guess an API parameter. For an API request, copy the generated request from PageCrawl developer mode or check its current API reference.

1. Configure a viewport in PageCrawl

  1. Open the monitored page in PageCrawl and edit its monitor settings.
  2. Enable Power User mode to reveal the advanced controls.
  3. Choose the device emulation or viewport width appropriate for the layout you want to inspect.
  4. Save the monitor and confirm that it is using an engine that supports screenshots.

PageCrawl’s visual-regression guidance describes setting an exact viewport width for each monitor. For pages with important responsive breakpoints, use separate monitors where that makes the result easier to interpret. A screenshot retrieval request and the configuration that determines how a monitor renders the page are separate concerns: do not assume that fetching a screenshot changes the viewport.

Example widths to consider

Layout Example widths How to use them
Desktop 1920, 1440, 1280 px Choose the widths that correspond to your desktop layouts.
Tablet 768, 1024 px Check tablet layouts where the page changes structure.
Mobile 375, 414 px Check narrow layouts and any relevant mobile breakpoint.

These are examples in PageCrawl’s guidance, not a complete list of supported dimensions or a statement of minimum and maximum values. Match the widths to your site’s actual breakpoints.

2. Get the exact API request

The available PageCrawl documentation confirms viewport configuration in monitor settings, but does not establish an API property name or show where that property belongs in a request. An invented payload could look plausible while silently failing or changing a different setting.

  1. Use PageCrawl’s developer mode while editing the monitor to inspect the request it generates.
  2. Copy the generated request and its viewport field exactly, including its payload location and value format.
  3. Compare it with the current PageCrawl API reference. PageCrawl says its API reference is generated from its OpenAPI specification and takes precedence over the API guide if they differ.
  4. Keep viewport configuration in the monitor setup unless the current reference explicitly documents changing it through screenshot retrieval.

That means there is no verified PageCrawl API snippet to reproduce here. Use the generated request as your runnable example; do not substitute a guessed key such as viewport, width, or viewportWidth.

3. Choose an engine that captures screenshots

PageCrawl’s engine guidance says Fast mode does not support screenshots or visual comparison. Choose Default or Stealth for a screenshot or visual-regression monitor, and check the current engine documentation for the behavior relevant to your page.

4. Verify the rendered result

  1. Run the monitor after saving its settings.
  2. Inspect the resulting screenshot and confirm its dimensions and responsive layout.
  3. Check that the capture used the intended monitor and engine.
  4. If you monitor multiple breakpoints, compare each result against the corresponding expected layout rather than assuming one width represents every device.

5. Troubleshooting

Symptom Likely cause What to do
No screenshot is available The monitor uses Fast mode, which does not support screenshot capture. Switch to Default or Stealth and run the monitor again.
The screenshot has the wrong responsive layout The monitor’s viewport setting may not match the target breakpoint, or you may be inspecting a different monitor’s result. Check the saved monitor configuration and identify which monitor produced the screenshot.
An API request rejects or ignores the viewport setting The property name, payload location, or value format may be wrong; the available research does not specify these details. Copy the request from developer mode and verify it against the current API reference/OpenAPI specification.
A screenshot retrieval call does not change the viewport Retrieving a screenshot and configuring the monitor are documented as separate steps. Change the monitor configuration, then retrieve or inspect the screenshot for that monitor.
A chosen width is rejected or produces unexpected results The documented examples do not define a supported range, and the examples are not a guarantee that every value is accepted. Confirm accepted values in the current reference and use a width matching a real site breakpoint.

6. Performance, reliability, and cost considerations

Each additional breakpoint gives you another responsive state to inspect, so prioritize widths where your layout changes or where regressions would matter. Separate monitors make it clearer which viewport produced a result. The available research does not provide PageCrawl screenshot latency, retry behavior, reliability figures, or pricing; consult the current PageCrawl documentation and plan details for those specifics.

7. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. For a direct screenshot request, set the viewport with the viewport_width and viewport_height parameters. The API accepts common screenshot API parameter names; see the ScreenshotNeo API documentation for the current options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d viewport_width=375 \
  -d viewport_height=812 \
  -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://stripe.com",
        "viewport_width": 375,
        "viewport_height": 812,
    },
    timeout=90,
)
r.raise_for_status()
with open("shot.webp", "wb") as f:
    f.write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  viewport_width: '375',
  viewport_height: '812',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

With ScreenshotNeo, cookie and consent banners are accepted like a visitor and more than 60 known consent platforms, newsletter popups, and chat widgets are removed before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.

FAQ

Can one PageCrawl monitor cover every responsive breakpoint?

PageCrawl describes setting a viewport width per monitor. If you need to inspect distinct responsive layouts, create monitors for the breakpoints that matter to your site.

Are the example widths required values?

No. They are representative examples from PageCrawl’s visual-regression guidance, not a formal list of allowed dimensions.

Where should I look if the API guide and reference disagree?

PageCrawl says the API reference generated from its OpenAPI specification takes precedence over its guide.