Developers can hook into Tinypass meter functionality by providing callback methods. To register a callback provide a reference to the your callback method in the _tpm configuration object.

 5: <script type="text/javascript">
 6:
 7:     window._tpm = window._tpm || [];
 8:     window._tpm['paywallID'] = 'MYID';
 9:     window._tpm['trackPageview'] = true;
10:
11:     //register your callback here
12:     window._tpm['onMeterExpired'] = 'myExpiredMethod';
13:
14: </script>

This callback is executed when a user's meter is expired.

Arguments:

• meterDetails: JS data object containing details about the current meter

This callback is executed when a user's meter is active. The user has not made a purchase yet and access is not yet denied.

Arguments:

• meterDetails: JS data object containing details about the current meter

This callback is executed when a user has access to the protected content.

Arguments:

• accessDetails: data object containing details about the current user's access information

This callback is executed when the page is about to show the end-user the curtain or reminder offer. This method can also cancel this event by returning false. A return value of 'false' will prevent the Tinypass code from showing the offer and instead this responsibility will be with the publisher's code.

Arguments:

• meter: This object is internal but features the property 'offerElem' which is the embeddable iframe element of your curtain or reminder

Example of Embedding the Curtain in a custom element:

 5: window._tpm['onShowOffer'] = function(meter){
 6:
 7:   myHTMLElement.append(meter.offerElem);
 8:   animate(myHTMLElement)
 9:
10:   //return false to stop default behaviour
11:   return false;
12:
13: }

This JS object contains data around the current user's meter as well as global meter information.

The relevant fields are:

• max_views: the total number of views allowed in this meter
• views: number of views the current user has
• views_left: remaining number of views for the current user

Example:

{
    "max_views": 10,
    "views": 6,
    "views_left": 4
}

This object contains data for the current user's access information

• max_views: the total number of views allowed in this meter
• expires: epoch/unix time when the current user's access period will end

Example:

{
    "expires": 1373481184,
    "max_views": 3,
}

Below is sample code showing basic integration with the meter callbacks.

For demonstration purposes we are using the JQuery library but you could use any library of your choose as there is no dependency on JQuery.

 8: <script>
 9:     /**
10:      * onMeterActive
11:      */
12:     window._tpm['onMeterActive'] = function(meterDetails){
13:         console.log("Meter is active");
14:         //display the meter info for the user in a friendly way
15:         $("body").append('<div class="status">' + meterDetails.views + ' of ' + meterDetails.max_views + '</div>');
16:     }
17:     /**
18:      * onMeterExpired
19:      */
20:     window._tpm['onMeterExpired'] = function(meterDetails ) {
21:         console.log("Meter is expired");
22:
23:         //display the meter info for the user in a friendly way
24:         $("body").append('<div class="status">' + meterDetails.views + ' of ' + meterDetails.max_views + '</div>');
25:     }
26:     /**
27:      * onAccessGranted
28:      */
29:     window._tpm['onAccessGranted'] = function(accessDetails) {
30:         //format the epoch using Date
31:         var exp = new Date(0);
32:         exp.setUTCSeconds(accessDetails.expires);
33:         console.log("Access granted (Expires: " + exp + ")");
34:         $("body").append('<div class="status">Member</div>');
35:     }
36:
37:     /**
38:      * onCheckoutSuccess
39:      */
40:     window._tpm['onCheckoutSuccess'] = function(){
41:         console.log("Checkout success!");
42:         //simple reload of page when purchase is successfull
43:         location.reload();
44:     }
45:     /**
46:      * onShowOffer
47:      */
48:     window._tpm['onShowOffer'] = function(meter){
49:         console.log("onShowOffer");
50:         $("#offer-holder").append(meter.offerElem);
51:         $("#offer-holder").fadeIn('slow');
52:         return false;
53:     }
54:
55: </script>