Getting Started with AutoWebShot

Posted by Darwin Biler on December 8, 2013

AutoWebShot is a free service to capture screenshots of any website.  There are many situations wherein this could be useful to you, some of the use cases were:

  • Generate a screenshot of a particular page of your website via script when someone changed the source codes.
  • You need to have a screenshot of many pages/websites, that manually getting the screenshot is not possible.
  • Get the screenshot of your website at regular interval, thus give you the ability to see the "history" of the layout of your website.
  • You want to embed a "live" preview thumbnail of your site to your admin panel.

There are many way this API could be useful. Feel free to write your own application that leverages the service according to your own need. Being that said let me clarify as well what this service is not:

  • It is not a Testing framework - although you can use it to see if the pages is not messed up after changing some codes in your website, AutoWebShot is not meant to be used as Acceptance Testing framework, for those cases, I recommend you use CasperJS or similar for a full blown Testing Framework.
  • It is not like browsershots.com or your fancy browser extensions to capture screenshots -- those are something meant to be used by humans, while this service is an API, which meant to be used programmatically by writing scripts.

Using the API

The api is exposed via this url:

http://autowebshot.cloudapp.net/api/

In able to use the service, you need to get an API key first. This is required so that we can track each screenshot associated for each user. Getting the API key is free and only requires a valid email and password. In case you doesn't have an API key, signup in here first to continue.

After acquiring an API key, all you need to do is pass the API key and the domain name (without the http:// part) to the API, like this:

http://autowebshot.cloudapp.net/api/index.php/screenshot/create?key=YOUR_API_KEY&domain_name=www.yourdomain.com

It should return a JSON response upon success:

{"requested_url":"http:\/\/www.darwinbiler.com\/","status":"success","message":"image created","image_url":"http:\/\/autowebshot.cloudapp.net\/screenshots\/30351e7fbb97263ab20e06b96bd47b5d-2013-12-09-06-48.png"}

The JSON response is an object with three properties:

  • requested_url - this is the full URL to the page we generated screenshot from.
  • image_url - this is the actual rendered image. Since the URL is inside a JSON object, you will see backslashes ( \ ) for each forward slashes in the url, this is because forward slash has special meaning in JSON and it needs to be escaped.
  • status - the status of the request, either can be "success" or "error"
  • message - either on success or error, the api will provide you a descriptive text indicating what happened on the request, this is very useful on debugging api calls that failed.

Did you find this useful?

I'm always happy to help! You can show your support and appreciation by Buying me a coffee (I love coffee!).

Do you need some help with your projects?

I do freelance work, you can reach out to me via UpWork or grab a copy of my CV!