Viewport & Full Page Screenshot

A viewport screenshot captures only the visible area of a webpage as it appears on a user’s screen at a specific moment. It is useful when you want to represent the above-the-fold content without scrolling, such as hero sections, banners, or initial UI states. This type of capture is commonly used for quick previews, UI testing, and monitoring how a page looks in a specific screen size or device viewport. The viewport is typically controlled using width and height parameters, allowing you to simulate different device screens and precisely define the visible area that should be captured.

Copy

const axios = require("axios");

let config = {
	method: "get",
	maxBodyLength: Infinity,
	url: "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&width=1280&height=800&[OPTIONS]",
	headers: { }
};

axios.request(config).then((response) => {
	console.log(JSON.stringify(response.data));
}.catch((error) => {
	console.log(error);
});

Copy

<?php
	$client = new http.Client;
	$request = new http.Client.Request;
	$request->setRequestUrl("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&width=1280&height=800&[OPTIONS]");
	$request->setRequestMethod("GET");
	$request->setOptions(array());

	$client->enqueue($request)->send();
	$response = $client->getResponse();
	echo $response->getBody();
?>

Copy

package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {
	url := "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&width=1280&height=800&[OPTIONS]"
	method := "GET"

	client := &http.Client { }
	req, err := http.NewRequest(method, url, nil)

	if err != nil {
		fmt.Println(err)
		return
	}

	res, err := client.Do(req)
	if err != nil {
		fmt.Println(err)
		return
	}

	defer res.Body.Close()
	body, err := io.ReadAll(res.Body)
	if err != nil {
		fmt.Println(err)
		return
	}

	fmt.Println(string(body))
}

Copy

OkHttpClient client = new OkHttpClient().newBuilder().build();
MediaType mediaType = MediaType.parse("text/plain");
RequestBody body = RequestBody.create(mediaType, "");
Request request = new Request.Builder().url("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&width=1280&height=800&[OPTIONS]"
	.method("GET", body)
	.build();
Response response = client.newCall(request)
	.execute();

Copy

import requests

url = "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&width=1280&height=800&[OPTIONS]"
payload = {}
headers = {}

response = requests.request("GET", url, headers, data=payload)
print(response.text)

Copy

require "uri"
require "net/http"

url = URI("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&width=1280&height=800&[OPTIONS]")

https = Net::HTTP.new(url.host, url.port)
https.use_ssl = true

request = Net::HTTP::Get.new(url)

response = https.request(request)
puts response.read_body

A full page screenshot, on the other hand, captures the entire webpage from top to bottom, including content that requires scrolling. It provides a complete visual representation of the page layout, making it ideal for documentation, archiving, competitor analysis, and design reviews. With ScreenshotAPI, you can easily switch between viewport and full-page modes depending on your use case and rendering requirements.

Copy

const axios = require("axios");

let config = {
	method: "get",
	maxBodyLength: Infinity,
	url: "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&full_page=true&[OPTIONS]",
	headers: { }
};

axios.request(config).then((response) => {
	console.log(JSON.stringify(response.data));
}.catch((error) => {
	console.log(error);
});

Copy

<?php
	$client = new http.Client;
	$request = new http.Client.Request;
	$request->setRequestUrl("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&full_page=true&[OPTIONS]");
	$request->setRequestMethod("GET");
	$request->setOptions(array());

	$client->enqueue($request)->send();
	$response = $client->getResponse();
	echo $response->getBody();
?>

Copy

package main

import (
	"fmt"
	"net/http"
	"io"
)

func main() {
	url := "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&full_page=true&[OPTIONS]"
	method := "GET"

	client := &http.Client { }
	req, err := http.NewRequest(method, url, nil)

	if err != nil {
		fmt.Println(err)
		return
	}

	res, err := client.Do(req)
	if err != nil {
		fmt.Println(err)
		return
	}

	defer res.Body.Close()
	body, err := io.ReadAll(res.Body)
	if err != nil {
		fmt.Println(err)
		return
	}

	fmt.Println(string(body))
}

Copy

OkHttpClient client = new OkHttpClient().newBuilder().build();
MediaType mediaType = MediaType.parse("text/plain");
RequestBody body = RequestBody.create(mediaType, "");
Request request = new Request.Builder().url("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&full_page=true&[OPTIONS]"
	.method("GET", body)
	.build();
Response response = client.newCall(request)
	.execute();

Copy

import requests

url = "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&full_page=true&[OPTIONS]"
payload = {}
headers = {}

response = requests.request("GET", url, headers, data=payload)
print(response.text)

Copy

require "uri"
require "net/http"

url = URI("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fwww.apple.com%2F&full_page=true&[OPTIONS]")

https = Net::HTTP.new(url.host, url.port)
https.use_ssl = true

request = Net::HTTP::Get.new(url)

response = https.request(request)
puts response.read_body

Full Page Screenshot

This parameter controls whether the screenshot should capture the entire length of the webpage or only the visible viewport area. When enabled, the system scrolls through the page internally and stitches the content together to produce a complete full-page screenshot, including sections that are not visible without scrolling.

Options

• true: Captures the entire webpage from top to bottom, including all scrollable content outside the viewport.

• false: Captures only the visible portion of the page as it appears on the screen at the moment of rendering.

When to use

This is especially useful for long-form content such as blogs, landing pages, documentation, or e-commerce product pages where important information exists below the fold.

Default value: false.

Height

This parameter defines the viewport height (in pixels) used by the browser when capturing a screenshot or render. It controls how much vertical area of the webpage is visible within the browser window before the capture is taken, directly affecting the portion of content included in the output.

By adjusting this value, you can simulate different screen sizes and control how the page is framed in the screenshot. A larger height allows more content to be visible at once, while a smaller height focuses on a more limited section of the page.

Options

Set any integer value in pixels to define the viewport height. The maximum supported value is 4320 pixels, which allows for very tall viewport captures.

When to use

• Use a larger height when you want to include more content in a single viewport capture, such as detailed dashboards, long sections of UI, or content-heavy pages.

• Use a smaller height when you want a focused, device-like view of the page, such as mobile previews, UI testing, or layout verification.

Default value: 876 (pixels).

Width

This parameter defines the viewport width (in pixels) used by the browser during screenshot generation. It controls how much horizontal area of the webpage is visible within the viewport before the capture is taken, directly influencing the layout and responsiveness of the rendered output.

By adjusting this value, you can simulate different screen sizes such as desktop, tablet, or wide-screen displays, ensuring accurate rendering across various device formats.

Options

Set any integer value in pixels to define the viewport width. The maximum supported width is 7680 pixels, allowing ultra-wide captures when needed.

When to use

• Use a larger width when you need to capture wide layouts, desktop views, dashboards, or full-scale UI representations without responsive layout compression.

• Use a smaller width when you want to simulate mobile or tablet views, or when testing responsive design behavior of a webpage.

Default value: 1680 (pixels).

Thumbnail Width

This parameter defines the width (in pixels) of a thumbnail image generated from the original screenshot or render. It is used to create a smaller, optimized version of the captured output, which is useful for previews, listings, or performance-efficient display purposes.

When this parameter is set, the system generates a resized thumbnail based on the original screenshot while maintaining aspect ratio. If it is not provided, no separate thumbnail is generated and the original screenshot is returned as the output.

Options

Set a specific integer value in pixels to define the thumbnail width. The height is automatically adjusted to preserve the aspect ratio of the original image.

When to use

Use this parameter when you need lightweight preview images for dashboards, galleries, or bulk listings where loading full-size screenshots would be inefficient. It is also useful for improving performance in UI-heavy applications that display many screenshots at once.

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