RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.20% (5.24%*) • Home Loan Fixed: 5.48% (6.24%*) • Fixed: 5.48% (6.24%*) • Variable: 5.20% (5.24%*) • Investment IO: 5.78% (6.81%*) • Investment PI: 5.49% (6.32%*)

Updated Website Screenshot API and WordPress Shortcode

Updated Website Screenshot API and WordPress Shortcode

We’ve had a Screenshot API for around 15 years, introduced mainly to support preview pages for our Shor.tt and Fat.ly Short URL services and SEO analytics tools, but it is also used as a general tool available to clients. We've recently updated the API and this article introduces how the revised tool is used.

The former Screenshot API would return an image of a website as an image or PDF file and embed it to a page, but over the years, the quality of the rendering has diminished. In the olden days, images were fairly easy to create because of the limited JavaScript on pages, and CSS was relatively simple. Over the years, websites have become more complex, so even the most advanced engines usually returned malformed images. The relatively new Google Chrome developer library mitigates the need for emulation tools and binaries by taking a screenshot of what the Chromium browser actually shows on various devices, and the result is a near pixel-perfect image. The Chrome features are now the basis of our updated API.

Screenshot Shortcode

The most common method of returning a screenshot to a page is with shortcode. As an example, the shortcode of [screenshot url="https://www.anz.com.au"] returns the following image.

How to Embed a Website Screenshot in a Page With Shortcode

  Pictured: ANZ website, anz.com.au, captured at 2355 on the 2nd April 2023. Interestingly, and slightly off-topic, in the course of writing this article that I noticed ANZ split test their front  page  in various ways to assess better performing assets. Clever... but expected (high-trafficked broker websites should do the same). Note that the image served on your website is appropriately scaled and optimised, and the website title is applied as the title and alt tags.

Note that the image is scaled to 1920x1080 pixels by default when it's created, so we import the image into your screenshot cache, import it into your image library, and then apply our image shortcode which scales and optimises the image according to Yabber options, so the image renders in the same way as every other image on your website.

In the next example, we'll create a square image of 1920px x 1920px. Shortcode of [screenshot url="https://www.nab.com.au" w="1920" h="1920"] returns the following (the image returned via our function will scale down to 560px but quality is available up to the requested resolution):

Updated Website Screenshot API and WordPress Shortcode

  Pictured: NAB website, nab.com.au, captured at 0036 on the 3rd April 2023. It's possible that we'll include a screenshot of lender websites in lender archive pages - TBA. Note that because the Chrome developer tools allow the full manipulation of a page via automation (clicks, form submissions, altering of HTML etc.), many financial provides detect automated actions and prevent any action from taking place. This barrier rarely applies outside the financial space.

The shortcode presents a number of options that alter the image returned to your page. The following attributes apply.


This url is the fully-qualified URL to any page. A check if made that the page exists before the screenshot is rendered, and if a 404 (Not Found) error is returned that same error is applied as the error code when returned. The URL is base64url encoded as the filename. A png, jpg, or json extension is requried. Images are created as jpg files by default. The handling of 'everything' is obviously managed by the shortcode function.

w & h

The width and height of the created image. The default of 1920 x 1080 should normally be left as is because it returns a good quality image that can be scaled down for use on your website. TO emulate a mobile screenshot you might use a width or around 800 pixels.

x & y

If you would like to screenshot a specific portion of a page, the x and y attributes are used to define the top left corner (x is lateral and y is vertical). Both positive integers, and used in company with the height attribute, you may capture a specific portion of a page.


The q attribute is the quality of the resulting jpg image. The value is required in all cases but ignored when rendering png images.


To render a full page beyond the defined viewport, use f="1". This will capture an entire page from top to bottom.

rh & new

The rh attribute is the 'Refresh Hash' and it can be ignored in most cases. It is used to reference a specific screenshot when multiple screenshots exist. The new attribute may be used to force the creation of a new screenshot regardless of the cache interval applied.


The import attribute is used to ensure backwards compatibility with the previous versions of the API, so it can generally be ignored. In previous versions, importing your image into the WP Media Library was an option - it is now used by default as best practice.


The resulting screenshot copied from Yabber, and a cache file of the rendered HTML, is cached for what is essentially 'forever'. To alter the cache interval (for those cases where you might need to screenshot a page every day), set the cache interval as required.

Various other attributes apply for native scaling (not required since this is handled by the WP media library), effects (rarely used), and creating size libraries (for testing appearance across a range of devices), but it's highly unlikely any of these options will be used on client websites.

Note that generation of an image for the first time can take a couple of seconds, but once created it is obviously returned quickly. Any created image belongs to you, and no image is recycled to other users. If accessing via the server, a rh (Refresh Hash) parameter should be applied as a URL parameter to ensure that the same image isn’t repeatedly generated… although this can be excluded if you wish to regenerate the image after a certain time period.

Once an image is created, it is assigned to your Yabber library, and a full record of each image is returned to you via Yabber’s Screenshot panel.

Screenshot API

The screenshot API is designed to return an image directly to your page, or return JSON data. The standard format for the API request is as follows:


The values in the URL are width, height, x crop, y crop, image quality, full screen, based64URL encoded URL, and the applicable file extension (all introduced in the shortcode attribute section above). In all cases, a mutating API key should be applied as a URL parameter to validate each request (?k=12345). The key is generated using the bm_simple_encrypt function that creates a short-lived key based on your public_key (pkey), domain, and timestamp. The key ensures that no unauthorised shots may be taken, and it prevents hot-linking to any image created on our server.

While you may access the images directly on the BM server by way of a key assigned to each request, the standard and expected method of use is to import the image into your own library, so the json extension is most commonly used. The returned json data includes the url, page title, filename, filesize, and various other values that might assist.

As with screenshots created with shortcode, once an image is created, it is assigned to your Yabber library.

Screenshots in Yabber

You may create screenshots directly in Yabber via the Image Factory module. For default usage, simply enter a URL and submit. For advanced usage, select the 'Advanced Options' text to return the available options.

Yabber Screenshots

  Pictured: Creating a screenshot in Yabber. Enter a URL and submit. For advanced usage, select the 'Advanced Options' text to return the available options. A textbox with the full archived image is returned.

Select the 'Review' panel to show all screenshots created via any means.


The tool we've just introduced isn't going to be of huge value to our core finance market, but it's nice to know it's available if required. Certainly, if you're interested in building a project that requires regular programmatic access to a most recent screenshot, the tool is an excellent solution.

Availability at this stage is made only to our clients. Access is introduced in version of the BM Yabber plugin, expected to be released in a few days.

  Featured Image: Commonwealth Bank Head Office, public Banking Chamber, 6th September 1916. Pictured here  is the foyer in 1934 and 2018. [ View Image ]

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  E. Australia Standard Time [ UTC+10, Default ] [ CHECK TO CHANGE ]

  Want to have a chat?


Like this article?

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest

Leave a comment