GrabzIt
Tools to Capture and Convert the Web
GrabzIt Web Recorder Plugin

Web Recorder Plugin

The Web Recorder Plugin allows you to screenshot a users browser by capturing changes to HTML elements after they have been altered by the user or by other means. However this plugin can not capture all the changes made to a page you must choose a small part of the page were you wish to capture changes the user has made.

Sometimes content that has changed due to user actions inside a target element needs to be captured. This could for example be caused by a user filling in a form. As the screenshot service is based on a seperate server you need to pass the data that has changed in the URL that you send to GrabzIt so that your page can use this information and JavaScript to repopulate the changes before the screenshot is taken.

An example of this is shown below, were a screenshot is taken of just the form containing what the user filled in.

<div id="divSection">
    <form id="myForm">
        <label>Name</label><input type="text" name="name" />
        <label>Age</label><input type="text" name="age" />
        <input type="button" value="Save"/>
    </form>
</div>

One way to achieve this is to use GrabzIt's Web Recorder Plugin, which records any changes to the part of the page you specify should be moinitored. So for example when using the Web Recorder to record changes to the form the example would be altered like so.

<script>
    GrabzItWebRecorder.Record('myForm');
</script>
<div id="divSection">
    <form id="myForm">
        <label>Name</label><input type="text" name="name" />
        <label>Age</label><input type="text" name="age" />
        <input type="button" value="Save" onclick="GrabzItWebRecorder.AddTo('Sign in to view your Application Key', 'screenshot', 
        {'target':'#myForm','width':-1,'height':-1,'bheight':-1});"/>
    </form>
</div>
<div id="screenshot"></div>

The first change is to add GrabzItWebRecorder.Record('myForm') this records any changes to the contents of the myForm element. It is a good idea only to record the dynamic part of the page you are interested in to avoid exceeding the allowed URL size. Next an onclick event containing the Web Recorders AddTo function was added to the Save button. This function call also specifies the Application Key to use and the id of the element the resultant screenshot should be added to, in this case the screenshot div.

GrabzIt Web Recorder Methods

  • AppendURL([url to append changes to]) - this returns the current URL with a querystring parameter that represents the changes made to the web page.
  • AddTo([application key], [element | element id], [options]) - creates a capture, which includes the altered HTML elements and adds it to the specified element.
  • Create([application key], [url to capture], [options]) - creates a capture, which includes the altered HTML elements and returns it as a script tag.
  • IsRecording() - the capture is currently taking place.
  • Record(element id) - the specified element id to record any changes for.

By default the AppendURL will add a querystring parameter that represesents the changes made to the webpage to the current url. However if you don't want the querystring parameter addded to the currrent URL you can pass the URL you would like the querystring parameter appended to.

GrabzItWebRecorder.AppendURL('http://www.example.com');

The AddTo method can accept an element id or element so both of the following calls will work. Remember to replace 'APPLICATION KEY' with your actual application key.

<html>
    <body>
        <div id="screenshot"></div>
        <script>
            //Call One
            GrabzItWebRecorder.AddTo('Sign in to view your Application Key', 'screenshot');

            //Call Two
            var elem = document.getElementById('screenshot');
            GrabzItWebRecorder.AddTo('Sign in to view your Application Key', elem);
        </script>
    </body>
</html>

The options parameter takes all of the standard parameters, except the URL and application key parameters in the form of a JSON dictionary. For instance in the below example we are setting the country that we are taking the screenshot from to be the United States.

GrabzItWebRecorder.AddTo('Sign in to view your Application Key', 'div_id', {"country": "US"});

If you need to test to see if the target webpage is currently being accessed by GrabzIt's screenshot servers then use the isRecording method. This could be useful to disable unwanted page features, when the capture is taken.

if (GrabzItWebRecorder.IsRecording())
{
	//disable something that shouldn't appear when a capture is taken.
}

Download Now


This JavaScript plugin is completely open source! If you want to view or improve the source code you can find it on GitHub.
Try all our premium features for free with a 7 day free trial. Then from $5.99 a month, unless cancelled.
  • More Captures
  • More Features
  • More API's
  • Bigger Scrapes
  • Bigger Captures
  • Bigger Everything
Start Free Trial