Docs
Screenshot a single element

Screenshot a single element

Screenshot a single element on a web site

Sometimes you just want to take a screenshot of part of a page.

To do this with Urlbox, you can pass the CSS selector of the element you want to screenshot into the selector option.

Example

Request

curl -X POST \
	https://api.urlbox.io/v1/render/sync \
	-H 'Authorization: Bearer ' \
	-H 'Content-Type: application/json' \
	-d '
{
	"url": "example.com",
	"selector": "#element-to-screenshot"
}
'

What is a CSS selector?
A CSS selector is a way of identifying an element on a web page.
For example, the CSS selector for the first heading on this page is h1.
You can find out more about CSS selectors here.

How to find the CSS selector of the element you want to screenshot

The easiest way to find the CSS selector of an element is to use the Chrome DevTools.

  1. Open Chrome DevTools by right clicking on the element you want to screenshot and selecting "Inspect".
  2. In the Elements tab, right click on the element you want to screenshot and select "Copy" > "Copy selector".