Skip to content

Customize websites before screenshotting

ScreenshotOne supports a few options that can help you add any customizations to any website before rendering screenshots of it.

Hide any element by CSS selectors

If you just need to quickly hide a few elements on the website, just use the hide_selectors option and specify as many CSS selectors as you wish.

For example, let’s hide the main header on the website with:<your API key>

Before hiding:

A customized version of the website

After hiding:

A customized version of the website

You can specify as many selectors as you wish, e.g.:[]=h1&hide_selectors[]=p&access_key=<your API key>

Add custom CSS styles

But often you want to do more than just hide a few elements. Maybe you want to change some colors of the elements, or font size, or whatever. Then you can simply add custom CSS styles with the styles option.

Don’t forget to encode the code. And often, you must add a !important attribute to every property you use.

Let’s try it with the website:<your API key>

Notice, that the styles parameter is URL-encoded. Let’s look at the result:

A customized version of the website

Execute custom JavaScript code

But what if hiding elements and adding styles is not enough? We got you covered! You can any custom JavaScript code you want.

You can check out a more complex example of using scripting for integrating Google Translate API when screenshotting websites.

Let’s execute an extreme example and just override the page content with:

scripts = document.body.innerHTML = "Hello, world!";

The URL would look like:"Hello,%20world!"&url=<your access key>

And the result is:

A customized version of the website


If you use scripting to only click on some element by selector, there is a popular shortcut for that the click option.<your access key>

Just specify any selector of any element and it will be clicked.