Browshot blog

The future of Browshot is coming soon

Wed, 04 Mar 2026 11:39:00 -0800

Since its creation, Browshot has focused on providing high-quality screenshots through a powerful API. Over the years, we have added many features such as automation steps, ad and pop-up blocking, dark mode support, and more. Browshot has acquired other screenshot services: Thumbalizr in 2017 and Blitapp in 2023, both using Browshot as their API. Thumbalizr offers an easy way to integrate screenshots into your website, while Blitapp provides a user-friendly interface for scheduling screenshots and storing them in your cloud.

It is time to bring all these features together into a single, more powerful version of Browshot:

Faster screenshots
Over 80 countries available
Integration with cloud storage and workflow apps
Support for alternative outputs: PDF, video
User-friendly interface

We will keep and improve the features you already use and appreciate, including:

Pay-as-you-go: pay only for what you use, no expiration date
A stable, backward-compatible, API we have maintained for 15 years and will keep maintaining
Automation steps to interact with pages before taking screenshots
Ad and popup blocking
Dark mode support
Multiple browsers, including mobile devices
Trackers to extract data from web pages
Batches to process multiple screenshots at once

To ensure a smooth transition, we are introducing ScreenshotCenter, a preview of Browshot 2.0. The new platform showcases all the features of Browshot 2.0 and will require a paid subscription.

Introducing ScreenshotCenter

We invite all Browshot users to try out ScreenshotCenter for free. We offer 500 screenshots per month during our launch period, with full access to all features. These features will make their way into the new Browshot in the coming months.

We will keep ScreenshotCenter as a service alongside Browshot 2.0. Users can choose between the subscription model at ScreenshotCenter or the pay-as-you-go model at Browshot.

The ScreenshotCenter dashboard

Looking Forward

We are excited about the future and committed to delivering the best screenshot service possible. We are committed to keeping supporting the existing Browshot API (v1) for many more years, while adding more features and improvements in Browshot 2.0.

Share your thoughts and suggestions—your feedback shapes Browshot’s direction. Join us in building the next generation of screenshot tools by reaching out and participating today!

Track your Amazon product rank, Google search rank, YouTube views, Retweets, and more

Sun, 29 Jan 2023 11:39:00 -0800

Browshot can report information from a website through trackers. Trackers are Javascript snippet that runs on the page to get information such as:

Page title
Google search rank for a website
Amazon search rank
Number of views, likes, tweets, retweets
Price, delivery dates
Anything available on the page!

This blog post shows a couple of examples of trackers. You can define your own as well

Tracker definition

A tracker returns a name and a value. For example, if you want to track the number of views of a YouTube video, you can extract the name of the video for the name and the number of views for the value.

The Browshot API takes a trackers argument as a JSON array that includes one or multiple tracker definitions. The tracker is a JSON object with these keys:

name: a fixed name or a javascript snippet to extract a name from the page
name_type (optional, default: string): javascript if name contains javascript code to run, or string for a fixed name
value: javascript code to retrieved information from the page
value_type (optional, default: string): string to return the value as found, or number to return the value as a number
selector (optional): a CSS selector that must be present on the page to run the tracker
input (optional): a value for the <input> variable to make it easier to reuse trackers. The <input> variable can be used inside the name, selector, and value parameters.

You can add arbitrary keys to a tracker definition, such as id, to help you identify the return value. These extra keys and values will be returned by the Browshot API.

Here is an example that tracks the number of views for a YouTube video using the name of the video:

{
    id: 'youtube_view',
    name: "document.querySelectorAll('#title > h1 > yt-formatted-string, h1.title > yt-formatted-string')[0].textContent + ' (Views)'",
    name_type: "javascript",
    value: "document.querySelectorAll('#formatted-snippet-text > span:nth-child(1), span.view-count')[0].textContent",
    value_type: "number"
}

Trackers run with every screenshot taken. The Browshot API screenshot/info returns the list of trackers defined with the screenshot request alongside the return values:

[{
  "name":"page title", "value":"document.title",
  "id": "test", "name_type": "string", "input": "", "value_type":"string", "selector": "",
  "return": [{
    "found": 1, "shot": 1, "value": "My Page Title", "name": "page title"
    }]
}]

return contains all the names and values found by the tracker:

found: 1 if the tracker was found, 0 if not found
shot: the shot number if which the tracker was found, starting with 1
name: tracker name
value: value retrieved

Examples

[
{
  "id": "amazon_category_rank",
  "comment": "Amazon Category Rank",
  "input_comment": "Amazon Product ID",
  "input": "ABBCCCC12345",
  "name": "document.querySelectorAll('h1')[0].textContent",
  "name_type": "javascript",
  "name_comment": "Product name",
  "selector": "//*[@id='<input>']",
  "value": "document.evaluate('//*[@id=\"<input>\"]',document,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue.parentNode.parentNode.querySelectorAll('span')[0].textContent",
  "value_type": "number"
},
{
  "id": "amazon_search_rank",
  "comment": "Amazon Search Rank",
  "input_comment": "Amazon Product ID",
  "input": "ABBCCCC12345",
  "name": "document.querySelectorAll('#twotabsearchtextbox')[0].value || document.querySelectorAll('#searchDropdownBox')[0].querySelectorAll('option[selected]')[0].textContent",
  "name_type": "javascript",
  "name_comment": "Product name",
  "selector": "div[data-asin='<input>'][data-cel-widget]",
  "value": "document.querySelectorAll('div[data-asin=\"<input>\"][data-cel-widget]')[0].getAttribute('data-cel-widget')",
  "value_type": "number"
},
{
  "id": "google_search_rank",
  "comment": "Google Search Rank",
  "input_comment": "URL or part of URL",
  "name": "document.querySelectorAll('input[aria-label]')[0].value",
  "name_type": "javascript",
  selector: "a[href*='<input>']",
  value: "(function(){\
    var className = document.querySelectorAll(\"a[href*='<input>'] > h3\")[0].getAttribute('class').split(' ').join('.');\
    var page = Array.from(document.querySelectorAll('td > span')).filter(x => x.parentNode.textContent != '').map(x => x.parentNode.textContent)[0] || 1;\
    return Array.from(document.querySelectorAll(`a > h3.${className}`)).filter(function(x){return x.offsetParent != null}).findIndex(function(x){ return x.parentNode.href.includes('<input>')}) + 1 + (page -1) * 10;\
    })()",
  value_type: "number"
},{
  "id": "youtube_view",
  "comment": "YouTube Views",
  "name": "document.querySelectorAll('#title > h1 > yt-formatted-string, h1.title > yt-formatted-string')[0].textContent + ' (Views)'",
  "name_type": "javascript",
  "value": "document.querySelectorAll('#formatted-snippet-text > span:nth-child(1), span.view-count')[0].textContent",
  "value_type": "number"
},
{
  "id": "youtube_likes",
  "comment": "Youtube Likes",
  "name": "document.querySelectorAll('#title > h1 > yt-formatted-string, h1.title > yt-formatted-string')[0].textContent + ' (Likes)'",
  "name_type": "javascript",
  "value": "document.querySelectorAll('#top-level-buttons-computed > ytd-toggle-button-renderer:nth-child(1) > a > yt-formatted-string')[0].getAttribute('aria-label')",
  "value_type": "number"
},
{
  "id": "youtube_comments",
  "comment": "Youtube Comments",
  "name": "document.querySelectorAll('#title > h1 > yt-formatted-string, h1.title > yt-formatted-string')[0].textContent + ' (Comments)'",
  "name_type": "javascript",
  "value": "document.querySelectorAll('#count > yt-formatted-string > span:nth-child(1)')[0].textContent",
  "value_type": "number"
},
{
  "id": "twitter_retweets",
  "comment": "Twitter Retweets",
  "name": "`${window.location.href} (Retweets)`",
  "name_type": "javascript",
  "value": "document.querySelectorAll(\"a[href$='/retweets']\")[0].textContent",
  "value_type": "number"
},
{
  "id": "twitter_likes",
  "comment": "Twitter Likes",
  "name": "`${window.location.href} (Likes)`",
  "name_type": "javascript",
  "value": "document.querySelectorAll(\"a[href$='/likes']\")[0].textContent",
  "value_type": "number"
},
{
  "id": "twitter_quotetweets",
  "comment": "Twitter Quote Tweets",
  "name": "`${window.location.href} (Quote Tweets)`",
  "name_type": "javascript",
  "value": "document.querySelectorAll(\"a[href$='/retweets/with_comments']\")[0].textContent",
  "value_type": "number"
},
{
  "id": "browshot",
  "comment": "Browshot Screenshots Count",
  "name": "Browshot Screenshots Count",
  "name_type": "string",
  "value": "document.querySelectorAll('body > section.bg1.hero.center > div > div > i:nth-child(9)')[0].textContent",
  "value_type": "number"
},
{
  "id": "title",
  "comment": "Page Title",
  "name": "Page Title",
  "name_type": "string",
  "value": "document.title",
}]

Cost

Browshot charges 1 credit for each tracker successfully retrieved.

Make it your own

We'd love to hear what our users want to track on web pages. Blitapp is using the Browshot trackers to show trends of Amazon product ranking or Google SEO ranks in their application.

Brave Browser available - Ad and tracker blocker

Sun, 02 Jan 2022 15:39:00 -0800

Brave Browser is a modified version of Chromium, the open-source version of Chrome, with privacy protection such as ad blocker, tracking blocker and anti-fingerprint solution. We have added the Brave browser to Browshot to make it easy to test sites with an ad blocker enabled.

We have done a screenshot of https://d3ward.github.io/toolz/adblock.html, a page that tests your browser's ability to block various ads, analytics and other tracking tools. You can see that Brave blocks most of these sites (around 90%) whereas Chrome blocks none of them.

Like other Chrome-based desktop and mobile browsers, Brave supports the dark mode we introduced last year.

Brave browser in action

The Brave browser is available in the USA, Germany, UK and as a private instance for other countries.

New iPhone 12 instances

Sun, 25 Apr 2021 16:39:00 -0700

We have added the iPhone 12 as mobile device. It comes with many improvement for all mobile devices, such as improved support for mobile-only API. These new instances support the dark mode we introduced recently.

Wikipedia on iPhone 12 in dark mode

The iPhone 12 is available in the USA, Germany, UK and as a private instance for other countries.

Support for dark mode

Sun, 18 Apr 2021 14:39:00 -0700

We have added support for dark mode in Chrome, for both desktop browsers and mobile devices. Dark mode changes the way web page look, for example by switching a white background to a black color.

Wikipedia on iPhone 12 in dark mode

dark=1 API parameter

Add dark=1 to your API calls to enable the dark mode native to Chrome. This option is available with all API calls that generate screenshots:

You will find the new option in the dashboard under Advanced options:

And on the Batch page under Advanced options:

Hide popups, ads, overlays automatically

Thu, 17 Dec 2020 20:39:00 -0800

We've added an option to automatically hide most ads and popups. This option can hide ads, subscriptions, and most popups on many websites. You may find websites on which this option does not hide an ad or messes up the layout of the site. Please report these issues to help us improve our ad blocker.

hide_popups=1 API parameter

Add hidepopups=1 to your API calls. This option is available with all API calls that generate screenshots:

You will find the new option in the dashboard under Advanced options:

And on the Batch page under Advanced options:

A couple of examples

Here are a few sites with the feature turned off (hide_popups=0) and enabled (hide_popups=1).

Le Monde, cookie popup (hide_popups=0)

Le Monde, hide_popups=1

Common advertising over the main content (hide_popups=0)

hide_popups=1

If this does not work

This new feature works on most websites. If it does not work on a page, you can use the automation steps to handle more complex cases. You can find examples on our blog.

Take thousands of screenshots in a couple of clicks

Sun, 06 Sep 2020 11:39:00 -0700

With Browshot, you can take thousands of screenshots at once without writing a line of code. Using the batch feature, you can upload a list of URLs (from a text file, an Excel spreadsheet, etc.) and downloads all the screenshots in a ZIP archive. In this post, we'll explain:

How to prepare the batch
How to follow the progress
How to specify the image file you want
How to download all screenshots at once
Examples of batch to download
The Batch API for advanced users

There is no limit to the number of screenshots you can request. One of our users took nearly a million screenshots in a single batch. The batch takes care of trying screenshots multiple times if the requested URL is temporarily unavailable.

Prepare the batch: screenshot name, S3 upload, etc.

All you need is the list of URLs for which you want screenshots. You can start with a text file, with open URL per line. In this case, Browshot will generate "random" names for each screenshot.

You can also specify the file names for each screenshot in your text file. Add the image file separated by a comma:

https://browshot.com/,site/browshot.com.png
https://thumbalizr.com/,site/thumbalizr.com.png
https://blitapp.com/,site/blitapp.com.png

If you use spreadsheet software like Excel, with the first column for the URL and the second column for the file name, you can export the spreadsheet as a CSV file and use it for your batch.

You can use folders in the file name. If you choose the S3 upload when you create your batch, these file names will be used in your S3 bucket.

Now that you have your text file (or CSV file) with the list of URLs, and maybe file names as well, you are ready to create a batch. In the Browshot dashboard, go to Batch from the left menu. At the top of the page, you'll find your previous batches and a link to download the results:

Then, you'll find the form to create a new batch. You can set a name for your batch to make it easier to find later. Just like for regular screenshots, you can change many parameters, such as what browser to use, the country of origin, the size of the browser, etc. Click on Advanced options to customize the HTTP request (cookie, referrer, etc.) or inject a script. Finally, choose the image format (PNG or JPEG) and the size of the screenshot or thumbnail. If you want your screenshots to be uploaded to AWS S3 as they are done, add your S3 bucket name. Upload your text or CSV file and hit Request.

I want to highlight the choice of image format (PNG or JPEG). PNG offers the best image quality, while JPEG has a much smaller file size. A JPEG file can be 10x smaller than the same PNG with just slightly lower quality. Having smaller files might be important if you're taking many screenshots.

Note: We recommend creating a test batch with just one or two URLs to verify all your settings.

Follow the progress

Once you hit Request, Browshot will process the batch-create. Your batch will be added to the list of batch requests at the top of the page. The table will show how many unique URLs have been found in your file (Finished/Total), how many screenshots have been completed ( Processed), how many have failed (Failed), and a rough estimate of how long it should take (Status). Press the refresh button at the bottom right of the table to get updated information.

Note that the batch will take longer if some URLs are not reachable or take a long time to load. Each failed screenshot will be retried up to three times.

When the batch is done, the last row will show a link to one or more files to download.

Download the screenshots

If you take a lot of full-page screenshots, the resulting ZIP file might be very big, several GB. To make it easier to download and unzip on your computer, we split large files into smaller files of 100MB. You must download all the files on your computer before you can decompress them. Then, follow the instruction on the Batch screen: Open the first file with 7-Zip (Windows) or Keka (Mac OS X).

When you decompress the files, you'll find a CSV file, along with all the image files, that contains all the details of your screenshots:

URL
Status: finished or error
ID: the screenshot ID
filename: the local file name for the screenshot
status code: the HTTP status code of the URL (200, 404, etc.)

The CSV file can be opened with any spreadsheet software like Excel, Google Sheet, etc.

Examples of batches

Here are a couple of batches you can download to better understand what to expect:

Batch with no image files: text file - ZIP archive
Batch with an image file requested: text file - ZIP archive
Batch from a text file with more than two columns: text file - ZIP archive

The Batch API

Batches can also be created, checked and downloaded using the API. If you want to take 10 or fewer screenshots at once through the API, consider using screenshot/multiple instead of a batch.

Don't hesitate to contact us if you need help creating batches.

Hide a cookie notice or other banners

Mon, 17 Aug 2020 11:39:00 -0700

Update: we have added an API parameter to hide most ads and popups automatically. See this blog post for more information.

Many websites prompt the user to accept a cookie or some other terms of service, or show an ad that covers most of the page. You can easily remove these banners and popups from your screenshot by leveraging the automation steps. We'll review a couple of examples in this blog post.

Yahoo UK privacy banner

If you visit https://www.yahoo.co.uk/, you'll be presented with this banner about their new privacy policy:

If you want to take a screenshot of the home page, you must to click on "I agree". You can add an automation step to click the button. All you need is the CSS selector that corresponds to this button. Follow these steps to get it:

In Chrome, right click on the "I agree" button and choose Inspect. Other browsers, such as Firefox, have a similar option.
This opens the Chrome Developer Tools. The corresponding HTML code is highlighted in light gray. Right-click on it. Choose Copy, and then Copy selector
The CSS selector has been copied to your clipboard. Paste it anywhere to find out what it is:
```
#consent-page > div > div > div > div.wizard-body > div.actions.couple > form > button
```

You can now use the CSS selector with the automation step, either through the API or through the dashboard. To test it through the dashboard, click on Advanced Web Options. Add this step:

Action: click
Element: #consent-page > div > div > div > div.wizard-body > div.actions.couple > form > button

USA Today cookie banner

USA Today (https://www.usatoday.com/) displays a banner to accept cookies at the bottom of the page. Like in the previous example, you can click on "Accept Cookies" to hide it.

To get the CSS selector of the "Accept Cookies" button, do this:

Right click on the "Accept Cookies" button and choose Inspect
This opens the Chrome Developer Tools. The corresponding HTML code is highlighted in light gray. Right-click on it. Choose Copy, and then Copy selector
The CSS selector has been copied to your clipboard. Paste it anywhere to find out what it is:
```
#onetrust-accept-btn-handler
```

You can now use the CSS selector with the automation step, either through the API or through the dashboard. To test it through the dashboard, click on Advanced Web Options. Add this step:

Action: click
Element: #onetrust-accept-btn-handler

You can test the automation steps with your free account. Contact us if you need help getting the CSS selector for any website.

Take screenshots of a carousel

Wed, 08 Apr 2020 15:39:00 -0700

The new automation steps make it easy to take several screenshots of the same page in different states. This is particularly useful if you want to capture all the positions of a carousel or slider. In this post, we will show you how to take screenshots of all carousel elements shown at https://walmart.com/. At the top of the page, the carousel rotates five different products:

The carousel has five dots that allow the user to manually display an element. With the automation steps, we can click on each dot to move the carousel, and then take a screenshot of the new position. We must get the CSS selector that corresponds to each dot. To do this, press F12 in your browser to open the Developer Tools. In the top left corner of the Developer Tools, click on the mouse cursor highlighted in red below.

Then, click on the first dot in the carousel to select it. This highlights the corresponding HTML code in the Developer Tools. Right-click on the highlighted code and choose Copy > Copy selector:

This copied the CSS selector of the first dot. If you paste it in a test editor, you get this value:

body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(2) > div

With the CSS selector, we can create the steps to take a screenshot of the first carousel element. We click on the first dot, then take a screenshot:

{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(2) > div"},
{"command":"screenshot"}

We repeat the same process for the next four dots to get the full list:

{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(2) > div"},
{"command":"screenshot"},
{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(3) > div"},
{"command":"screenshot"},
{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(4) > div"},
{"command":"screenshot"},
{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(5) > div"},
{"command":"screenshot"},
{"command":"click", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) > div > div.slider-decorator-0 > div > div > ul > li:nth-child(6)"},
{"command":"screenshot"}

With one call to Browshot, and these 10 steps, you will get five screenshots showing the 5 positions of the carousel. If you want to capture just the carousel content, and not the entire page or screen, you can specify to take a screenshot of just the carousel:

{"command":"screenshot", "element":"body > div.js-content > div > div > div.js-body-content.page-content-wrapper > div > div > section:nth-child(1) > div:nth-child(1)"}

Creating this kind of automation can be difficult at first. We are here to help. Don't hesitate to contact us if you need assistance.

Login to a website to take a screenshot

Mon, 06 Apr 2020 15:39:00 -0700

With the introduction of automation steps, it is easier to log in to any website before taking a screenshot. In this post, we'll show you how to log in to a website, Browshot, and take a screenshot after authentication.

To log in from the home page of https://browshot.com/, a user must click on Login. This displays a login form where the user has to enter his username and password. Then the user clicks on "Login" to obtain access to his dashboard.

Find the element to interact with

We're going to build the different steps to log in; then we'll navigate to a different page in the dashboard and take a screenshot. The hardest part of the process is to get the identifier (called CSS selector) for each element we want to interact with: the button to click on, the input box in which to enter our username, etc. In order to find this identifier, we need to use the Developer Tools from your web browser. Press F12 to open the Developer Tools. Navigate to https://browshot.com/. In the Developer Tools, click on the mouse cursor in the top left corner (highlighted in red below).

Then, move your mouse over the Login button at https://browshot.com/. The HTML code corresponding to the button is now highlighted in the Developers Tools. Right-click on it and choose Copy > Copy selector:

If you paste the value in a text editor, you get:

#login-btn

This is the CSS selector that identifies the Login button. We're ready to take the first step to click on the Login button:

{"command":"click", "element":"#login-btn"}

The next steps are to enter the username and the password in the login form. In your browser, manually click on the Login button to show the form. In the same way, use the Developer Tools to copy the CSS selector for the username and password input fields:

#login-form > input[type=text]:nth-child(1)
#login-form > input[type=password]:nth-child(2)

We use the "type" command to type the username and passwords in their respective input fields:

{"command":"type", "element":"#login-form > input[type=text]:nth-child(1)", "value":"username@email.com"},
{"command":"type", "element":"#login-form > input[type=password]:nth-child(2)", "value":"PASSWORD"},

Then, we click on the Login button at the bottom of the form:

{"command":"click", "element":"#login"}

This last step authenticates the user and loads https://browshot.com/dashboard. We can take a screenshot of the dashboard, or any other page. After login in, we wait a couple of seconds for the login to work, then navigate to https://browshot.com/dashboard/settings:

{"command":"sleep", "value":"5"},
{"command":"navigate", "value":"https://browshot.com/dashboard/settings"}

Finally, we wait a few seconds to allow the page to load. Then we take a screenshot of it:

{"command":"sleep", "value":"5"},
{"command":"screenshot"}

The complete list of steps is:

[
  {"command":"click", "element":"#login-btn"},
  {"command":"type", "element":"#login-form > input[type=text]:nth-child(1)", "value":"username@email.com"},
  {"command":"type", "element":"#login-form > input[type=password]:nth-child(2)", "value":"PASSWORD},
  {"command":"click", "element":"#login"},
  {"command":"sleep", "value":"5"},
  {"command":"navigate", "value":"https://browshot.com/dashboard/settings"},
  {"command":"sleep", "value":"5"},
  {"command":"screenshot"}
]

You can add more steps to navigate to multiple pages and take multiple screenshots, click on elements in the pages, etc. We will post more examples on this blog.

Creating this kind of automation can be difficult at first. We are here to help. Don't hesitate to contact us if you need assistance.