CSS & JavaScript Injection

ScreenshotAPI allows you to inject custom CSS and JavaScript before capturing a screenshot, giving you full control over how the final output looks. You can modify the appearance of any webpage in real time, such as changing colors, hiding elements, adjusting layouts, or applying custom branding styles directly before the capture is taken.

In addition to inline code, you can also load external CSS or JavaScript files via URLs to dynamically modify the page. This enables use cases like adding your company logo, removing unwanted sections, highlighting specific content, or applying theme-based styling. These pre-processing capabilities ensure the final screenshot matches your exact visual 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&css=.unwanted-section&css_url=https%3A%2F%2Fexample.com%2Fstyles.css&js_url=https%3A%2F%2Fexample.com%2Fscript.js&js=console.log('Hello, World!');&[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&css=.unwanted-section&css_url=https%3A%2F%2Fexample.com%2Fstyles.css&js_url=https%3A%2F%2Fexample.com%2Fscript.js&js=console.log('Hello, World!');&[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&css=.unwanted-section&css_url=https%3A%2F%2Fexample.com%2Fstyles.css&js_url=https%3A%2F%2Fexample.com%2Fscript.js&js=console.log('Hello, World!');&[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&css=.unwanted-section&css_url=https%3A%2F%2Fexample.com%2Fstyles.css&js_url=https%3A%2F%2Fexample.com%2Fscript.js&js=console.log('Hello, World!');&[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&css=.unwanted-section&css_url=https%3A%2F%2Fexample.com%2Fstyles.css&js_url=https%3A%2F%2Fexample.com%2Fscript.js&js=console.log('Hello, World!');&[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&css=.unwanted-section&css_url=https%3A%2F%2Fexample.com%2Fstyles.css&js_url=https%3A%2F%2Fexample.com%2Fscript.js&js=console.log('Hello, World!');&[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

Inject CSS

It allows you to inject custom CSS styles into the webpage before the screenshot or render is captured. This enables you to modify the appearance of the page dynamically without changing the original source code.

It is useful for adjusting layouts, hiding or styling elements, changing colors, improving readability, or preparing a page for clean and consistent screenshot output. The injected CSS is applied at runtime just before rendering, ensuring the final screenshot reflects the updated styles.

Options

Provide any valid CSS string, for example:

• body { background-color: #f0f0f0; }

• .header { display: none; }

• .content { font-size: 18px; line-height: 1.6; }

When to use

• Use this parameter when you need to customize the visual appearance of a webpage or where controlled styling is required before capturing it. It is especially useful for removing unwanted UI elements, improving layout clarity, or creating branded or presentation-ready screenshots.

Default value:' '(empty string).

Inject CSS URL

It allows you to inject external CSS into the webpage by providing a URL to a stylesheet. Instead of passing inline styles, this option loads a complete CSS file and applies it to the page before the screenshot is captured.

This is useful when you want to apply consistent styling across multiple screenshots or manage complex styles separately from your API request.

Options

Provide a valid URL pointing to a CSS file, for example:

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

When to use

• Use this parameter when you have a predefined stylesheet that needs to be applied across multiple renders, such as branding styles, layout adjustments, or UI cleanups.

• It is ideal for scalable workflows where maintaining inline CSS would be difficult or repetitive.

Default value:' '(empty string).

Inject JS

It allows you to inject and execute custom JavaScript code on the webpage before the screenshot is captured. This enables you to dynamically modify the page content, trigger events, or manipulate the DOM at runtime without changing the original website.

The injected JavaScript runs inside the browser context just before the final capture, ensuring that any changes made are reflected in the output.

Options

Provide any valid JavaScript code as a string, for example:

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

• document.querySelector('.popup').remove();

• window.scrollTo(0, 500);

When to use

• Use this parameter when you need advanced control over page behavior, such as modifying content, removing elements, triggering animations, or simulating user interactions before capturing the screenshot.

• It is especially useful for automation, testing, and creating customized or branded outputs.

Default value:' '(empty string).

Inject JS URL

This parameter allows you to load and execute external JavaScript on the webpage during the rendering process. Instead of passing inline code, you can provide a URL to a JavaScript file, and the system will fetch and run it before capturing the screenshot or render.

This is useful for applying reusable scripts, handling complex logic, or maintaining cleaner API requests by keeping JavaScript code separate from the request itself.

Options

Provide a valid URL pointing to a JavaScript file, for example:

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

When to use

• Use this parameter when you have reusable or complex JavaScript logic that you want to apply across multiple renders, such as modifying layouts, triggering UI interactions, or injecting custom behavior.

• It is best suited for workflows that can scale and are hard to manage with direct inclusion of your JS code inside your request.

Default value:' '(empty string).