Hashtag
Render a Screenshot

GET https://shot.screenshotapi.net/screenshot?token=TOKEN&url=URL&[OPTIONS]

The following options for the API call are:

TOKEN: The TOKEN or your API key should be replaced by your real ScreenshotAPI API, you can find your API key after you Sign Up or Log In to the service via the Dashboard page.

Note: If for any reason you need to get a new API key, simply click "Roll API Key" in the "Settings" card on the Dashboard. This will issue you a fresh API key and revoke access from the previous key.

URL: Website URL for the site you would like to render for the screenshot. We support a wide variety of websites types, such as single page apps, very long-content, and sites that require lazy loading or delays ensuring accurate and complete screenshots of these unique sites.

OPTIONS: Options indicates the different URL parameters keys and values that can be used to render your "perfect" screenshot. All the options for screenshots will be detailed below.

Note: Default options for the screenshot will be shown in the Options table below.

Example:

const axios = require("axios");
let config = {	method: "get",	maxBodyLength: Infinity,	url: "https://shot.screenshotapi.net/screenshot?token=TOKEN&url=https://apple.com",	headers: { }};
axios.request(config).then((response) => {	console.log(JSON.stringify(response.data));}.catch((error) => {	console.log(error);});

This will render the following png image output when you paste in the above string into your browsers URL bar (replacing TOKEN with your API key):

s

POST https://shot.screenshotapi.net/screenshot

POST mode accepts the exact same parameters in the request body, but you need to use a JSON.

Hashtag
Cached & Fresh screenshot

When you take a screenshot, it automatically get cached on our backend, so when you make a get request to the same URL this will return the same screenshot that got cached, but if you want to take a newer screenshot of the URL provided, you may want to use our fresh screenshot functionality.

Example:

const axios = require("axios");
let config = {	method: "get",	maxBodyLength: Infinity,	url: "https://shot.screenshotapi.net/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&fresh=true&[OPTIONS]",	headers: { }};
axios.request(config).then((response) => {	console.log(JSON.stringify(response.data));}.catch((error) => {	console.log(error);});

In the following video, you will see an example of how the 'Fresh Screenshot' functionality is used. First, we demonstrate how a regular request to a specific URL is made for the first time, which typically takes a few seconds since it's the initial request. Then, the same request is made a second time, which is much faster because it retrieves the cached screenshot. However, if you want to capture a completely new screenshot without using the cached one, you should click the checkbox labeled 'Fresh screenshot' as shown in the example during the third request in the video.

Hashtag
Remove elements from a page

You can select elements by class name, ID, or other CSS selectors and then add the display: none attribute to hide them on the inject CSS feature.

Example:

const axios = require("axios");
let config = {	method: "get",	maxBodyLength: Infinity,	url: "https://shot.screenshotapi.net/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&output=image&file_type=png&wait_for_event=load&css=.module-content%7Bdisplay%3A%20none%7D%0A",	headers: { }};
axios.request(config).then((response) => {	console.log(JSON.stringify(response.data));}.catch((error) => {	console.log(error);});

In the following video, you'll find a more illustrative example of how to use the 'Inject CSS' functionality to remove an element from a page. In the first request, you'll see a standard screenshot to observe the page's initial state. Then, in the second request, we demonstrate how to achieve this by utilizing the 'Inject CSS' feature to remove the desired element.

Hashtag
Essentials

Hashtag
URL

The url option specifies the URL of the website to be rendered as a screenshot or other format.

Hashtag
Token

The token option is your API key for authenticating requests to the Screenshot API.

Hashtag
Features

Hashtag
File Type

Available file types:

  • PNG — A widely supported lossless image format. Ideal for high-quality screenshots with transparency support.

  • JPG — A lossy image format best suited for photographs or images with gradients. It offers smaller file sizes but may lose some image quality.

  • WebP — A modern image format that provides superior compression and quality characteristics compared to PNG and JPG. It supports both lossless and lossy compression, making it a versatile choice.

  • PDF — Used for generating screenshot files in a portable document format. Suitable for documents, reports, or multi-page captures.

The default value is PNG.

Hashtag
Omit Background

Available options:

  • true — Removes the background from websites with a basic white background, making it transparent. This is only effective when the file_type is set to PNG.

  • false — Keeps the background intact (default behavior).

The default value is false.

Hashtag
Destroy Screenshot

Available options:

  • true — The screenshot (or PDF) will not be stored on the server after it is rendered. It must be downloaded immediately, as it will not be accessible again.

  • false — The screenshot (or PDF) is stored on the server and can be accessed later (default behavior).

The default value is false.

Hashtag
Fail On Error

Available options:

  • true — The API will return an error if the render encounters a 4xx or 5xxstatus code. This is useful when you want to ensure the response indicates a failure in case of server or client-side issues during rendering.

  • false — The API will ignore 4xxand 5xxstatus codes, proceeding without returning an error (default behavior).

The default value is false.

Hashtag
Longitude

Specify the longitude to be used by the browser's Geolocation API.

  • Provide a numeric value to define the geographical longitude for the rendering context.

  • Default value: null (no longitude set).

Hashtag
Latitude

Specify the latitude to be used by the browser's Geolocation API.

  • Provide a numeric value to define the geographical latitude for the rendering context.

  • Default value: null (no latitude set).

Hashtag
Proxy

Set a proxy server address for the request.

  • Format:

    • Address and port: address:port.

    • With authentication: username:password@address:port.

  • Use this to route the rendering request through a proxy server, if needed.

  • Default value: ' ' (no proxy).

Hashtag
Block Ads

Prevent advertisements from being displayed on websites during the rendering process.

  • When set to true, requests from popular ad networks will be blocked before rendering.

  • Default value: false.

Hashtag
Headers

Specify custom HTTP headers to be included when the request is sent before rendering.

  • Supports single or multiple headers.

  • Example: X-HEADER: value; X-OTHER-HEADER: otherValue;

  • Default value: " " (empty string).

Hashtag
Cookies

Define cookies to be included in the request before rendering.

  • Supports single or multiple cookies.

  • Example: cookie=value; otherCookie=otherValue;

  • Default value: " " (empty string).

Hashtag
Scroll To Element

Specify a target element for the browser to scroll to before rendering.

  • Useful for ensuring elements that load within the viewport are captured.

  • Example: #element-id, .class-name

  • Default value: " " (empty string).

Hashtag
Selector

Specify a target element for rendering based on a matching CSS selector.

  • If the specified element is not found, the render will still return the full result.

  • Example: div > .main-navigation > .logo

  • Default value: " " (empty string).

Hashtag
Inject CSS

Inject custom CSS into the render.

  • This allows you to apply specific styles to the rendered page before capturing the screenshot.

  • Example: body { background-color: #f0f0f0; }

  • Default value: " " (empty string).

Hashtag
Inject CSS URL

URL for CSS code injected into the render.

  • Provides the ability to load external CSS from a URL and apply it to the rendered page.

  • Example: https://example.com/styles.css

  • Default value: " " (empty string).

Hashtag
Inject JS

JS code injected into the render.

  • Allows for custom JavaScript code to be executed during the render process.

  • Example: document.body.style.backgroundColor = 'lightblue';

  • Default value: " " (empty string).

Hashtag
Inject JS URL

URL for JS code injected into the render.

  • Allows you to specify a URL from which JavaScript code will be loaded and executed during the render process.

  • Example: https://example.com/custom-script.js

  • Default value: " " (empty string).

Hashtag
TTL (Time to Live)

TTL (Time to Live) sets the number of seconds to keep a rendered screenshot (or PDF) in the cache.

  • This determines how long the rendered content will remain in cache before it expires and needs to be re-rendered.

  • Default value: 2592000 seconds (30 days).

Hashtag
User Agent

Sets the User-Agent string for the render for a particular request.

  • This allows you to specify a custom User-Agent, which is sent in the request headers to identify the browser or device making the request.

  • Example: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

  • Default value: " " (empty string).

Hashtag
Accept Language

Sets the Accept-Language header on the request for the specified URL rendered.

  • This allows you to specify the language preferences for the content to be rendered, determining how the server responds based on language.

  • Default value: en-US,en;q=0.8 (English - United States, with fallback to English).

Hashtag
Delay

Time delay in milliseconds (ms) before the screenshot is rendered from the browser instance (this includes PDFs).

  • This setting allows you to introduce a delay between the page load and the rendering process, ensuring all elements have fully loaded before capturing the screenshot or PDF.

  • Default value: 0 (no delay).

Hashtag
Thumbnail Width

The width in pixels of the thumbnail generated from the render. If not set, the fallback behavior is the outputted screenshot.

  • This setting controls the width of the thumbnail image. If you don’t specify a width, the original screenshot will be used.

  • Default value: null (no thumbnail generated by default).

Hashtag
Output

Set the output of the results from the render. The output can be either JSON or the raw image captured.

  • If you select JSON, the result will be returned in a structured JSON format containing metadata and other details about the render.

  • If you select image, the result will be the raw image file (PNG, JPG, WebP, PDF, etc.) depending on the file type specified.

  • Default value: image .

Hashtag
Fresh

Take a fresh screenshot or render (or PDF) vs. getting the cached version from the app's storage.

  • Set to true to ensure a fresh render is generated, bypassing the cached version.

  • Set to false to use the cached version if available.

  • Default value: false .

Hashtag
Lazy Load

If lazy load is set to true, the browser will scroll down the entire page to ensure all content is loaded before the render.

  • Set to true to ensure that all content, including lazy-loaded elements, is fully loaded.

  • Set to false to render the page with only the initially loaded content.

  • Default value: false .

Hashtag
Full Page

If full_page is set to true, the screenshot or render will capture the entire webpage, including areas that are not currently visible in the viewport. This means the full content of the page will be included, even if the user would need to scroll to see it.

  • Set to true to capture the entire page.

  • Set to false to capture only the visible portion of the page.

  • Default value: false .

Hashtag
Retina

If retina s set to true, the screenshot or render will be captured with a higher pixel density (2x). This is useful for devices with Retina or high-definition displays where images need to appear sharper. Enabling this option will result in a higher-quality image, but may increase the processing time due to the larger image size.

  • Set to true for high-definition screenshots.

  • Set to false for standard screenshots.

  • Default value: false .

Hashtag
Height

The height option specifies the viewport height of the browser when the render is captured. It determines how much of the page is visible in the viewport before the render is taken. Adjusting the height can be useful if you need to capture a larger or smaller section of the webpage in your screenshot.

  • Set to a specific integer value (in pixels) to define the height of the viewport.

  • Default value: 867 pixels .

Hashtag
Width

The width option specifies the viewport width of the browser when the render is captured. It determines how much of the page is visible horizontally before the render is taken. You can adjust the width if you want to capture a wider or narrower view of the webpage.

  • Set to a specific integer value (in pixels) to define the width of the viewport.

  • Default value: 1680 pixels .

Hashtag
Custom HTML

The custom_html option allows you to provide custom HTML content that will be rendered instead of loading a URL. This is useful if you want to capture a screenshot of a specific HTML structure or dynamically generated content.

  • Set to a string containing the HTML you want to render.

  • This will override the URL option, and the screenshot will be based on the provided HTML.

  • Default value: " " (empty string).

©2024 ScreenshotAPI. All Rights Reserved.