GrabzIt
Tools to Capture and Convert the Web

Take Website Screenshots with JavaScriptJavaScript API

The diagnostics panel can help you debug your code!

Using the GrabzIt JavaScript API is the simplest way of putting image or PDF screenshots, as well as video to animated GIF conversions and more into your website. Requiring just a <script> tag and some GrabzIt magic!

Add Web Captures to a Webpage

To take a screenshot you pass your required parameters to GrabzIt in the scripts URL and then when the screenshot is ready the image will load in the same location within the page as the script tag.

By default once a capture has been created it will remain cached on our servers for the time determined by your package. Then if a call to GrabzIt's JavaScript API is made using the same parameters as a previously cached screenshot that will be returned instead, to prevent unnecessarily using your screenshot allowance. This behaviour can be disabled by using the cache parameter.

Set up your Account

To get started you need to get your free Application Key, then in order to prevent other people just copying your JavaScript code and stealing all your GrabzIt account resources, you must authorize what domains can use your Application Key.

The Simplest Example

Simply copy the below JavaScript into the location, within the <body> tags were you want the screenshot to appear. You will need to replace the APPLICATION KEY with your Application Key and replace http://www.google.com with the website you want to take a screenshot of.

Edit in JSFiddle
<script type="text/javascript"
src="//api.grabz.it/services/javascript.ashx?key=APPLICATION KEY&url=http://www.google.com">
</script>
Note to avoid errors the URL parameter should always be URL encoded.

Then simply wait a short while and the image will automatically appear at the script tag location, without you needing to reload the page.

Customizing your screenshots

While the key and url parameters are required and therefore always need to be supplied in the JavaScript URL, all the other parameters are optional.

A parameter is added by appending the parameter in the following format to the URL for every optional parameter you require. Where PARAMETER NAME is one of the above parameter names and VALUE is the value you want the parameter to have.

&PARAMETER NAME=VALUE

For instance if you wanted to have a screenshot with a width of 400px and a height of 400px, in a PNG format and wanted to wait 10 seconds before the screenshot was taken you would do the following.

Edit in JSFiddle
<script type="text/javascript"
src="//api.grabz.it/services/javascript.ashx?key=APPLICATION KEY&url=http://www.google.com
&width=400&height=400&format=png&delay=10000">
</script>

Dynamically setting parameters

The best way to set parameters dynamically in JavaScript is to use the Core Plugin, which will build the script tag for you.

The AddTo method below accepts the id of a element or a DOM element as the location within the HTML document to add the resulting screenshot to. In the below example the screenshot will be added to the insertCode div, then the URL of the web page to capture is passed to the function.

Finally pass any required parameters as a JSON dictionary to the AddTo method. In the example below the delay has been set to 1000ms and the format to png. However if you do not require any other additional options you do not need to specify this parameter at all.

<html>
<head>
<script type="text/javascript" src="grabzit.min.js"></script>
</head>
<body>
<div id='insertCode'></div>
<script type='text/javascript'>
    GrabzIt("APPLICATION KEY").AddTo('insertCode', 'http://www.yahoo.com', {"delay": 1000, "format": "png"});
</script>
</body>
</html>
Try all our premium features for free with a 3 day free trial. Then from $5.99 a month, unless cancelled.
  • More Captures
  • More Features
  • More API's
  • Bigger Scrapes
  • Bigger Screenshots
  • Bigger Everything
Start Free Trial