Full page screenshots
How to take full page screenshots with Urlbox
In order to take full page screenshots, you can set the full_page
option to true
in your API request.
Request
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.
Request
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.
Request
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 tonone
,- 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.
Request
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.