# Take full page website screenshots using API

> Take full-page website screenshots with Orshot's API: pass the URL, set fullCapture, and get the image back in one request. With cURL and fetch.

- URL: https://pika.style/blog/full-page-website-screenshots-api
- Published: 2024-07-07 (updated 2026-10-02)
- Author: Rishi Mohan
- Tags: How to

---

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](https://pika.style/tool/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](https://orshot.com/templates/website-screenshot). 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](https://orshot.com/docs/quick-start/get-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:

```bash
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:

```javascript
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](https://orshot.com/templates/website-screenshot) and see the result before you write any code.

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

![Full-page screenshot of the Slack homepage](https://assets.pika.style/cdn/blog/full-page-website-screenshots-api/01.webp)

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](https://orshot.com/docs/sdks) wrap the same request. With the Node.js SDK (`npm install orshot`):

```javascript
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](https://orshot.com/docs/api-reference/generate-signed-url) 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](https://orshot.com/integrations), 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](https://pika.style/templates/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](https://pika.style/blog/best-screenshot-api).

Have any questions? DM us on Twitter [@AppPika](https://twitter.com/AppPika) or send us an email at hi@pika.style