Take full page website screenshots using API

There are many uses for an API that captures website screenshots: generating link previews, showing site previews on a directory website, archiving pages, or feeding screenshots into your favourite apps through Zapier.

With a screenshot API, you automate it once and forget about it. The API does its work and you don't have to worry about it (unless you've missed your screenshot subscription's payment :P)

In case you're looking for something that doesn't involve an API and code, here's a free website screenshot generator where you paste a URL and tick "Capture full page".

So let's get started, but first, the prerequisites:

• We'll be using Orshot's Website Screenshot API. Orshot is made by the team behind Pika, and Pika's screenshot API now lives there, so if you used it before, the template and its options are the same.
• Get your API key from the API Keys page in the Orshot dashboard. The free plan includes 100 credits a month, so you can test it without paying.
• Keep the key on your server, for example in an ORSHOT_API_KEY environment variable, and never ship it in frontend code.

Taking a full-page screenshot with cURL

The quickest way to try it is from your terminal. This request captures the whole of slack.com and saves it as a PNG:

curl -X POST "https://api.orshot.com/v1/generate/images" \
  -H "Authorization: Bearer $ORSHOT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "website-screenshot",
    "response": { "type": "binary", "format": "png" },
    "modifications": {
      "websiteUrl": "https://slack.com",
      "fullCapture": true,
      "width": 1200
    }
  }' \
  --output slack.png

With "type": "binary", the response body is the image file itself, so --output writes it straight to disk.

Taking a full-page screenshot with JavaScript

Here's the same request with fetch, which works in Node.js 18+ and in any server-side JavaScript runtime. This time we ask for a URL to the hosted image instead of the file:

const response = await fetch("https://api.orshot.com/v1/generate/images", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${process.env.ORSHOT_API_KEY}`,
  },
  body: JSON.stringify({
    templateId: "website-screenshot",
    response: { type: "url", format: "png" }, // type can be "url", "base64" or "binary"
    modifications: {
      websiteUrl: "https://slack.com",
      fullCapture: true,
      delay: 1000,
      width: 1200,
    },
  }),
});

const result = await response.json();

if (!response.ok) {
  throw new Error(result.error);
}

console.log(result.data.content); // link to the full-page screenshot

Code explanation:

• https://api.orshot.com/v1/generate/images is the endpoint for every Orshot image template, and templateId: "website-screenshot" picks the screenshot one.
• The Authorization header carries your API key as Bearer <key>.
• response.type is how you get the result back: "url" returns a link to the hosted image, "base64" returns a data URI like data:image/png;base64,..., and "binary" returns the raw file. For url and base64, the result is in data.content of the JSON response.
• response.format is the file type: png, jpg, webp, avif or pdf.
• modifications configure the capture. websiteUrl is the page you want, and it's the only required one. fullCapture: true captures the full length of the page instead of just the visible area; it takes a little longer since it waits for the whole page to load. width sets how wide the page is rendered, and the image runs as tall as the page. Without fullCapture, set both width and height to get a screenshot of a specific size.
• delay waits that many milliseconds before capturing. Increase it for pages that load slowly or have heavy animations.

Two more options are worth knowing: captureElement takes a CSS selector (like #pricing or .hero) and captures only that element, and blockMedia: true skips videos for a faster, lighter capture. You can try every option in the playground on the Website Screenshot template page and see the result before you write any code.

Here's the full-page output for slack.com:

If something's wrong with the request, like a missing or invalid websiteUrl, the API responds with an error status and a JSON body with an error message, which is what the throw above surfaces.

Using an SDK

If you have a Node.js, Python, PHP or Ruby backend, Orshot's official SDKs wrap the same request. With the Node.js SDK (npm install orshot):

import { Orshot } from "orshot";

const orshot = new Orshot(process.env.ORSHOT_API_KEY);

const result = await orshot.renderFromTemplate({
  templateId: "website-screenshot",
  modifications: {
    websiteUrl: "https://slack.com",
    fullCapture: true,
    width: 1200,
  },
  responseType: "url",
  responseFormat: "png",
});

console.log(result.data.content);

If you want to put a screenshot straight into an <img> tag on a public page without exposing your key, Orshot can also create signed URLs for a template and its modifications.

Using Zapier and other no-code tools

If you prefer a no-code setup, Orshot connects to Zapier, Make and n8n, so you can take website screenshots from a Google Sheets or Airtable row, or any other trigger.

And once you have a screenshot, you can make it presentable in Pika's screenshot editor: add a background, padding, rounded corners and a shadow, then export it. If you're still choosing an API, here's our comparison of the best screenshot APIs.

Have any questions? DM us on Twitter @AppPika or send us an email at hi@pika.style