--- title: "Scrolling Screenshot | ScreenshotAPI Docs" slug: "/docs/scrollingScreenshot" description: "Capture full-page scrolling screenshots seamlessly with ScreenshotAPI. Learn how to take complete snapshots of websites, including content beyond the viewport." --- # Scrolling screenshots You can access the 'Scrolling Screenshot' functionality, which allows you to capture a video (in webm, gif, or mp4 format) of a web page with various customizable options. These options include the ability to scroll backward, adjust scrolling speed, set the duration, and start recording instantly **Example:** ```js const axios = require("axios"); let config = { method: "get", maxBodyLength: Infinity, url: "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true", headers: { } }; axios.request(config).then((response) => { console.log(JSON.stringify(response.data)); }.catch((error) => { console.log(error); }); ``` ```php setRequestUrl("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true"); $request->setRequestMethod("GET"); $request->setOptions(array()); $client->enqueue($request)->send(); $response = $client->getResponse(); echo $response->getBody(); ?> ``` ```go package main import ( "fmt" "net/http" "io" ) func main() { url := "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true" 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)) } ``` ```java 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%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true" .method("GET", body) .build(); Response response = client.newCall(request) .execute(); ``` ```py import requests url = "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true" payload = {} headers = {} response = requests.request("GET", url, headers, data=payload) print(response.text) ``` ```ruby require "uri" require "net/http" url = URI("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&url=https%3A%2F%2Fgoogle.com&output=json&file_type=gif&wait_for_event=load&scrolling_screenshot=true") 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 ``` In the following video, you'll find a more illustrative example of how to utilize the 'Scrolling Screenshot' functionality. When you click the 'Take Screenshot' button, it will take a few seconds to capture the video and provide you with JSON containing the video information. ![Image](https://screenshotapi.net/_next/image?url=%2Fimages%2Fdocs%2F4.gif&w=3840&q=75) Here is the recorded video demonstrating the example. ![Image](https://screenshotapi.net/_next/image?url=%2Fimages%2Fdocs%2F5.gif&w=3840&q=75) ## Multiple Scrolling screenshots In addition to the 'Scrolling Screenshot' functionality, our application offers the feature of 'Multiple Scrolling Screenshots'. With this feature, you can capture multiple scrolling screenshots of web pages, each with different sizes in terms of width and height. This means you have the flexibility to customize the dimensions of the screenshots according to your specific requirements. **Example:** In the parameters of the endpoint, we will pass an array of objects with different sizes. To achieve this, we need some code to pass this array in the 'sizes' parameter. ```js let sizesArr = [ { id: 1 , width: 1920 , height: 1080 }, { id: 2 , width: 1280 , height: 720 }, { id: 3 , width: 800 , height: 450 }, ]; let SIZES = JSON.stringify(sizesArr); console.log(SIZES); ``` ```php 1,"width" => 1920,"height" => 1080], ["id" => 2,"width" => 1280,"height" => 720], ["id" => 3,"width" => 800,"height" => 450] ]; $SIZES = json_encode($sizesArr); echo $SIZES; ?> ``` ```go package main import ( "fmt" "encoding/json" ) func main() { sizesArr := []map[string]interface{}{ {"id" : 1,"width" : 1920,"height" : 1080}, {"id" : 2,"width" : 1280,"height" : 720}, {"id" : 3,"width" : 800,"height" : 450}, } SIZES, err := json.Marshal(sizesArr) if err != nil { fmt.Println("Error marshaling JSON:", err) return } fmt.Println(string(SiZES)) } ``` ```java import org.json.JSONArray; import org.json.JSONObject; public class Main{ public static void main(String[] args) { JSONArray sizesArr = new JSONArray(); JSONObject size1 = new JSONObject(); size1.put("id", 1); size1.put("width", 1920); size1.put("height", 1080); sizesArr.put(size1); JSONObject size2 = new JSONObject(); size2.put("id", 2); size2.put("width", 1280); size2.put("height", 720); sizesArr.put(size2); JSONObject size3 = new JSONObject(); size3.put("id", 3); size3.put("width", 800); size3.put("height", 450); sizesArr.put(size3); String SIZES = sizesArr.toString(); System.out.println(SIZES); } } ``` ```py import json sizesArr = [ {"id" : 1,"width" : 1920,"height" : 1080}, {"id" : 2,"width" : 1280,"height" : 720}, {"id" : 3,"width" : 800,"height" : 450} ] SIZES = json.dumps(sizesArr) print(SIZES) ``` ```ruby require "json" sizes_arr = [ {"id" => 1,"width" => 1920,"height" => 1080}, {"id" => 2,"width" => 1280,"height" => 720}, {"id" => 3,"width" => 800,"height" => 450} ] SIZES = sizes_arr.to_json puts SIZES ``` ```js const axios = require("axios"); let config = { method: "get", maxBodyLength: Infinity, url: "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D", headers: { } }; axios.request(config).then((response) => { console.log(JSON.stringify(response.data)); }.catch((error) => { console.log(error); }); ``` ```php setRequestUrl("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D"); $request->setRequestMethod("GET"); $request->setOptions(array()); $client->enqueue($request)->send(); $response = $client->getResponse(); echo $response->getBody(); ?> ``` ```go package main import ( "fmt" "net/http" "io" ) func main() { url := "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D" 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)) } ``` ```java 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&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D" .method("GET", body) .build(); Response response = client.newCall(request) .execute(); ``` ```py import requests url = "https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D" payload = {} headers = {} response = requests.request("GET", url, headers, data=payload) print(response.text) ``` ```ruby require "uri" require "net/http" url = URI("https://shot.screenshotapi.net/v3/screenshot?token=TOKEN&output=json&file_type=mp4&scrolling_screenshot=true&url=https%3A%2F%2Fgoogle.com%2F&multiple_scrolling=true&sizes=%5B%7B%22id%22%3A1%2C%22width%22%3A%221920%22%2C%22height%22%3A%221080%22%7D%2C%7B%22id%22%3A2%2C%22width%22%3A%221280%22%2C%22height%22%3A%22720%22%7D%2C%7B%22id%22%3A3%2C%22width%22%3A%22800%22%2C%22height%22%3A%22450%22%7D%5D") 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 ``` In the following video, you'll find a more illustrative example of how to utilize the 'Multiple Scrolling Screenshot' functionality. When you click the 'Take Screenshot' button, it will take a few seconds to capture the video and provide you with JSON containing the video information. ![Image](https://screenshotapi.net/_next/image?url=%2Fimages%2Fdocs%2F6.gif&w=3840&q=75) ## Features ### File Type **Parameter Name :** `file_type` The file type determines the format in which the rendered content (such as video or animation) will be returned. Available file types: * **WEBM** - Optimized for web use with good compression and quality. * **MP4** - Widely supported format, ideal for compatibility across devices. * **GIF** - Best for short, looping animations with no sound. The default value is`MP4`. ### Scroll Speed **Parameter Name :** `scroll_speed` The scrolling speed affects how quickly the page is scrolled during rendering, which can impact the render time and the final output. Available options: * **fast** * **normal** * **slow** The default value is`normal`. ### Duration **Parameter Name :** `duration` This value determines how long the scrolling action will take, measured in seconds. * You can set a value between`0`and`60`to adjust the scrolling time. * A higher value will result in a longer scrolling duration and a longer video. * A lower value will reduce the video duration. ### Scroll Back **Parameter Name :** `scroll_back` The`scroll_back`option, when set to true, allows the scrolling action to return to the top of the page after reaching the bottom. * If enabled, the browser will scroll to the end of the page, and once it reaches the bottom, it will automatically scroll back up to the top. * This option creates a looping scrolling effect, useful for video renderings that require the entire page to be revisited. The default value is`false`(no scrolling back to the top). ### Start Immediately **Parameter Name :** `start_immediately` when set to`true`, ensures that the recording begins instantly without waiting for the website to fully load. The recording will start as soon as the page navigation begins, capturing content even if some elements have not finished loading. * This option is useful for scenarios where immediate capture is required, such as tracking loading behavior or capturing dynamic content as it appears. The default value is`false`(waits for the website to load before starting the recording). ### Video **Parameter Name :** `video` when set to`true`, records the visible viewport only for a specified duration. This feature is intended to be used together with the`duration` parameter. * It continuously captures what appears within the viewport, making it especially useful for monitoring dynamic dashboards, animations, or real-time updates on a page. The default value is`false`.