ScreenshotNeo

BlogHow-to

How to Capture a Website Screenshot with PageCrawl.io Using JavaScript

Use PageCrawl JavaScript actions to prepare a monitored page, then retrieve its screenshot through the documented API or an integration.

By the ScreenshotNeo team4 October 20268 min read

Short answer: PageCrawl.io’s Custom JavaScript action prepares a monitored page before PageCrawl extracts tracked elements. It does not itself take or return a screenshot. To work with a screenshot, configure a monitor and use PageCrawl’s separately documented screenshot/API or integration route. Get the exact current endpoint and response format from the live API reference or the request shown in dashboard developer mode; the available documentation does not establish a safe endpoint or payload to reproduce here.

This distinction matters if you are looking for a page.screenshot() function: the Custom JavaScript editor is for in-page side effects, not for calling a screenshot API. PageCrawl says its custom code runs in the browser after page load and before tracked-element extraction. PageCrawl’s JavaScript actions documentation explains that behavior.

1. Prepare the page with a JavaScript action

  1. Open the monitor’s page settings in PageCrawl.
  2. Under Actions, add Custom JavaScript.
  3. Use a JavaScript action only when a built-in action cannot perform the needed interaction. For a single click, wait, typing operation, or selection, prefer the corresponding native action.
  4. Save the monitor and run a check. Confirm the page reaches the state you expect before tracked elements are extracted.

For a multi-step interaction, PageCrawl recommends an async immediately invoked function expression (IIFE). This example dispatches a framework-friendly input event and then clicks a control. Replace the selectors and values with elements on the page you monitor:

(async () => {
  const search = document.querySelector('[name="q"]');
  if (!search) throw new Error('Search input was not found');

  search.value = 'example search';
  search.dispatchEvent(new Event('input', { bubbles: true }));
  search.dispatchEvent(new Event('change', { bubbles: true }));

  await new Promise((resolve) => setTimeout(resolve, 300));

  const submit = document.querySelector('button[type="submit"]');
  if (!submit) throw new Error('Submit button was not found');
  submit.click();
})();

The code runs in the monitored page’s browser context. Its purpose is to change page state or trigger interactions; its return value is ignored. Keep the sequence bounded: custom JavaScript actions have a 30-second safety timeout. Use only the delay needed for the page to react, and avoid waiting for long animations or unrelated network activity.

Action design checklist

  • Use stable selectors. Prefer attributes or IDs that are unlikely to change. A missing selector should fail clearly rather than silently capture the wrong state.
  • Bound waits. Short, purposeful waits are easier to maintain than fixed delays long enough to cover every possible page load.
  • Keep the action focused. Do not put screenshot retrieval logic in this page-side action.
  • Use the right mode. JavaScript actions require a real browser engine and are incompatible with Fast mode.
  • Allow for total check time. The help article lists overall check timeouts of 45 seconds for Free, 90 seconds for Standard, and 180 seconds for Enterprise and Ultimate. These plan limits can change, so check the current documentation and account plan before relying on them.

2. Retrieve the screenshot through PageCrawl’s documented capture surface

Screenshot capture and storage are monitor outputs separate from Custom JavaScript actions. PageCrawl describes full-page screenshot capture and storage on its product page. Its developer guide says the API reference covers screenshots and visual diffs and recommends using dashboard developer mode to reveal and copy the exact request made by the dashboard.

Use this workflow to build an integration without guessing an endpoint or response schema:

  1. Configure the monitor and its screenshot settings in the PageCrawl dashboard.
  2. Enable developer mode and perform the screenshot-related dashboard action you want to automate.
  3. Copy the generated request. Consult the live API reference for the endpoint, required parameters, and whether the result is an image, a URL, or another response type.
  4. Move the request into a trusted server-side integration. Keep the Bearer token in a secret store or server environment variable.
  5. Check the response and handle errors and image data according to the current endpoint schema.

The API reference itself should take precedence if its current schema differs from the developer guide. The endpoint details and payload are not specified here, so an exact fetch, cURL, or Python screenshot request would risk inventing an API contract.

Node.js: secure request structure

Once you have copied the exact URL and request details from developer mode, this server-side Node.js structure shows where to supply them. It deliberately does not invent PageCrawl’s screenshot endpoint or response handling; fill in the URL and any documented request fields from the live reference. Run it on a server, not in browser code shipped to visitors.

const apiUrl = process.env.PAGECRAWL_SCREENSHOT_URL;
const token = process.env.PAGECRAWL_API_TOKEN;

if (!apiUrl || !token) {
  throw new Error('Set PAGECRAWL_SCREENSHOT_URL and PAGECRAWL_API_TOKEN');
}

const response = await fetch(apiUrl, {
  method: 'GET', // Use the method shown by the current API reference.
  headers: {
    Authorization: `Bearer ${token}`,
    Accept: '*/*',
  },
});

if (!response.ok) {
  const details = await response.text();
  throw new Error(`PageCrawl request failed (${response.status}): ${details}`);
}

// Decode or save the body according to the response type documented
// for the endpoint you copied. Do not assume it is raw image bytes.

PageCrawl documents Bearer-token authentication. Avoid putting a reusable token into public client-side JavaScript, source control, or request logs. The developer guide mentions a query-string quick-test option but warns against exposing tokens in scripts and logs; use that only according to the current documentation and never as a production pattern.

3. Choose an API request or workflow integration

Route Good fit What to verify
PageCrawl API A server-side JavaScript or Node.js integration where your application controls requests. Current endpoint, authentication, request method, screenshot selection, response type, and error schema in the live API reference.
Workflow integration Event-triggered delivery into a downstream automation flow. Current availability, event payload, screenshot image URL access, and destination requirements.

PageCrawl’s Make.com help article describes a change trigger and a screenshot image URL field in the event payload. Its availability note was last updated August 20, 2026 and said the app was available by invitation while completing Make review. Treat that as a dated statement and check the current integration page before planning around it. Read the PageCrawl and Make.com integration article.

4. Troubleshooting

Symptom Likely cause Fix
The action editor cannot find page.screenshot(). Custom JavaScript runs on the monitored page to prepare state; it is not a screenshot API. Configure screenshot capture as a monitor output and retrieve it through the documented API or integration.
JavaScript actions do not run in Fast mode. Custom JavaScript requires a real browser engine. Use a mode with a real browser engine.
The action times out. The action exceeded its 30-second safety timeout, possibly due to a long delay or a wait that never resolves. Remove unnecessary waits, check selectors before interacting, and keep the sequence short. Check the current overall check timeout for your plan too.
The tracked value reflects the old page state. The action did not trigger the page’s framework event handlers, or extraction ran before the change took effect. Dispatch the appropriate bubbling input/change event when needed, and use a short bounded wait after the interaction.
The API request returns an authentication error. The Bearer token may be missing, invalid, or associated with the wrong account. Check the Authorization header and token in the server environment. Do not paste secrets into client-side code or logs.
The API call succeeds but the image cannot be saved. The integration may be treating a URL or structured response as raw image bytes, or assuming the wrong content type. Inspect the current endpoint schema and response headers. Decode or download the result using the documented response format.
The dashboard request works but a script does not. The script may omit a dashboard parameter, use a stale endpoint, or send the wrong method or headers. Regenerate the request in developer mode and compare it with the live API reference.

5. Performance, reliability, and storage considerations

  • Keep page preparation short. Every wait and interaction adds to check time. Prefer a specific condition or minimal delay over a long blanket pause.
  • Expect page variability. A page can load differently across visits. Validate the selector and resulting state rather than assuming that a click always worked.
  • Separate action failures from capture failures. First confirm the monitor action and extraction work; then validate the screenshot artifact or API response independently.
  • Account for retention needs. PageCrawl’s product page says screenshot storage is available and unlimited screenshot storage is an Enterprise upgrade. Review current plan terms for your retention requirements.
  • Protect credentials and outputs. Keep API credentials server-side and restrict access to stored screenshot URLs or files according to their sensitivity.
  • Check current limits before rollout. Timeouts, plan limits, endpoint behavior, and integration availability may change. Use the current help center and API reference as the source of truth.

Or skip the browser setup

If you need a screenshot from a URL rather than a PageCrawl monitoring workflow, ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. One GET request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for options and request details.

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up for ScreenshotNeo’s free 1,000 screenshots a month, with no card required.

FAQ

Does a PageCrawl JavaScript action return a screenshot?

No. It runs code in the page to perform side effects before tracked-element extraction. Screenshot capture and retrieval are separate monitor outputs and API or integration workflows.

Can I use JavaScript actions with Fast mode?

No. PageCrawl’s documentation says JavaScript actions require a real browser engine.

Can I call PageCrawl’s screenshot API directly from a public web page?

A public page exposes the code and any embedded reusable credential. Use a trusted server-side component and follow the current API reference for the request details.

Where do I find the exact screenshot endpoint?

Use PageCrawl’s live API reference or enable developer mode in the dashboard and copy the request generated by the screenshot workflow. The endpoint schema can change, so avoid relying on guessed paths or payloads.

Sources