JavaScript Introduction to GrabzIt

Using the GrabzIt JavaScript Library is the simplest way of putting screenshots into your website, requiring just a <script> tag and some GrabzIt magic!

The diagnostics panel can help you debug your code!

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.

First...

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.

<script type="text/javascript"
src="http://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.

Options

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

bwidth - the width of the browser in pixels
- Default: 1024
- Maximum: 10000
bheight - the height of the browser in pixels.
- Default: 768
- Maximum: 10000
- Full Length: -1 (passing -1 means that a sceenshot of the whole web page is taken)
height - the height of the resulting thumbnail in pixels
- Default: The highest ratio of the browser height possible that fits within the maximum height for the users package
- Maximum: Maximum height for package
- Full Height: -1 (passing -1 means that the height of the thumbnail is not reduced)
width - the width of the resulting thumbnail in pixels
- Default: The highest ratio of the browser width possible that fits within the maximum width for the users package
- Maximum: Maximum width for package
- Full Width: -1 (passing -1 means that the width of the thumbnail is not reduced)
format - the format the screenshot should be in.
- Default: jpg
- Formats: bmp8, bmp16, bmp24, bmp, tiff, jpg, png
delay - the number of milliseconds to wait before taking the screenshot
- Default: 0
- Maximum: 30000
target - this parameter specifies the id of the HTML element on the target web page that is to be turned into a screenshot, all other parts of the web page are ignored.
- Default: empty
cache - this parameter specifies if the screenshot should be cached or not
- Default: 1
- Options:
  - 0 = indicates the screenshot will be cached
  - 1 = indicates the screenshot will not be cached
requestMobileVersion - request a mobile version of the target website if possible
- Default: 0
- Options:
  - 0 = indicates the standard version of the website should be returned
  - 1 = indicates the mobile version of a website should be returned
customWaterMarkId - add a custom watermark to the image
- Default: empty

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.

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