Full page screenshots

In order to take full page screenshots, you can set the full_page option to true in your API request.

curl -X POST \
	https://api.urlbox.io/v1/render/sync \
	-H 'Authorization: Bearer YOUR_URLBOX_SECRET' \
	-H 'Content-Type: application/json' \
	-d '
{
	"url": "https://urlbox.com",
	"full_page": true
}
'

Skipping the initial scroll

By default, Urlbox will scroll to the bottom of the page before taking the screenshot. This is to ensure that any lazy loaded elements are loaded before taking the screenshot, and to determine the final scrollable height of the page before screenshotting.

If you want to disable this behaviour, you can set the skip_scroll option to true. This should also shave a few seconds off your render time, depending on how tall the website you are rendering is.

curl -X POST \
	https://api.urlbox.io/v1/render/sync \
	-H 'Authorization: Bearer YOUR_URLBOX_SECRET' \
	-H 'Content-Type: application/json' \
	-d '
{
	"url": "https://urlbox.com",
	"full_page": true,
	"skip_scroll": true
}
'

Setting the full page mode

Urlbox has two different modes for taking full page screenshots.

The default mode is stitch which uses Urlbox's proprietary algorithm to intelligently scroll the page, triggering animations and lazy loaded elements, freezing fixed and sticky elements, detecting 100% height backgrounds, taking multiple screenshot sections and stitching them together. This mode is the most reliable and will work on most websites. It is optimised for accuracy over speed.

The second mode is native which uses the browser's native screenshot functionality to take a screenshot of the entire page. This mode is faster but may not work well across all websites. It is optimised for speed over accuracy.

You can switch between full page modes using the full_page_mode parameter.

curl -X POST \
	https://api.urlbox.io/v1/render/sync \
	-H 'Authorization: Bearer YOUR_URLBOX_SECRET' \
	-H 'Content-Type: application/json' \
	-d '
{
	"url": "https://www.stripe.com",
	"full_page": true,
	"full_page_mode": "native"
}
'

Stitch and scroll options

There are several options that affect the full page algorithm when in stitch mode.

By default the height of each section is set to 4096px, unless Urlbox detects a strected background, but when a height is set along with full_page, the height will set the browsers viewport height, meaning that the individual screenshot sections will also be capped at the height passed in.

The scroll_increment option sets the number of pixels to scroll the page by when taking each screenshot section. The default is 4096px. Sometimes it is necessary to set a smaller scroll incrememnt to trigger certain actions such as animations, or lazy loading elements.

The scroll_delay option sets a delay in milliseconds between each scroll. The default is 100ms. This can also be useful for ensuring animations have enough time to complete.

The max_sections option sets the maximum number of screenshot sections to take.

The max_section_height option allows control over the height of individual screenshot sections but without setting the viewport height at the same time.

Viewing the full page sections

It's possible to view the individual sections that Urlbox captures when taking a full page screenshot by setting the show_seams option to true. This can be useful for debugging purposes.

Detecting fixed and sticky elements

Because Urlbox scrolls the page and takes multiple screenshot sections, it is possible that fixed or sticky elements such as headers and footers will be captured multiple times, in each section. Urlbox uses heuristics to detect most fixed elements and only captures them once.

To disable this behaviour, you can set the freeze_fixed option to false.

Detecting popups and modals

Sometimes by scrolling the page, Urlbox will trigger a popup or modal to appear. You can attempt to hide these by setting the hide_cookie_banners option and click_accept option to true.

• hide_cookie_banners will attempt to hide cookie banners by setting their display property to none,
• whereas click_accept will attempt to send a click event to the detected accept button on cookie banners.

In addition to these settings, you can also enable the adblocker, by setting block_ads to true.

There is also the ability to block certain domains from being loaded by the page, by setting the block_urls option to a comma separated list of domains to block. Wildcards can also be used.

curl -X POST \
	https://api.urlbox.io/v1/render/sync \
	-H 'Authorization: Bearer YOUR_URLBOX_SECRET' \
	-H 'Content-Type: application/json' \
	-d '
{
	"url": "https://urlbox.com",
	"full_page": true,
	"hide_cookie_banners": true,
	"click_accept": true,
	"block_ads": true,
	"block_urls": [
		"*.optimizely.com",
		"everesttech.net",
		"userzoom.com",
		"doubleclick.net",
		"googleadservices.com",
		"adservice.google.com/*"
	]
}
'

Allowing infinite scroll

Sometimes a page will have infinite scroll, meaning that when the page is scrolled to the bottom, more content is added. This can end up in a never ending loop. Urlbox detects infinitely scrolling web pages and sets the maximum sections to 3 by default when this happens.

If you want to allow infinite scroll, you can set the allow_infinite option to true.

Detecting 100% height backgrounds

Some web pages deploy certain CSS rules to create 100% or 100vh height image backgrounds or hero sections, meaning that a backgroud image or hero section will be set to the same height as the browsers viewport, which when taking full page screenshots will be 4096px tall by default. Urlbox detects these scenarios and limits the maximum section height and browser viewport to 1024px when this happens, to avoid the image or section being stretched out of proportion.

It is possible to disable this check by setting the detect_full_height option to false.

Setting the max height

If you want to limit the height of the full page screenshot, you can set the max_height parameter to the number of pixels you want to limit the screenshot to.

Setting a scroll offset

If you only want to capture the full page screenshot from a certain point, you can set the scroll_to parameter to either the number of pixels you want to offset the screenshot from the top of the page, or a CSS selector of an element you would like to start capturing from.

Horizontally scrolling pages

When measuring the page dimensions, Urlbox uses the clientWidth property of the scrolling element by default. If the page scrolls horizontally, and you want to capture the full width of the page as well as the full height, you can set full_width to true. Urlbox will now use the scrollWidth property of the scrolling element to determine the width of the page.

Limitations on image size

Please bear in mind that there are limitations to the size of images that can be captured.

For jpeg, the maximum image dimensions are 65,535 by 65,535pixels.

For webP, the maximum image dimensions are 16,383 by 16,383 pixels.

It is best to use png format when using the full page option as there are no limitations on image size.