Home › Guides

Using PandoAPI.js Installed Cookie Check

In addition to providing package info service, the PandoAPI.js javascript library also provides a Pando "install" check service. We (Pando) set a cookie named "installed" in the pando.com domain whenever we determine a user has Pando installed. Because it runs from a pando.com domain, PandoAPI can inspect this cookie. If a user has this cookie set, you can be reasonably sure they have Pando installed. If they do not, they still may have Pando installed but have removed the cookie.

To use this service on your own site, you pass callback function to the PandoAPI.hasPando() method. The callback function takes a single argument. This function is then called by the PandoAPI method, with the argument set to true or false depending on the status of the installed cookie. This allows you to modify the content of your pages with javascript depending on the cookie status. In this example we'll use this method to prepend pando:subscribe? to pando channel subscription links for users who have this cookie set, to provide a one-click subscription experience for Pando users.

First, we'll need to make sure we include the Pando javascript API in our <head> section:

<script type="text/javascript" src="http://cache.pando.com/soapservices/PandoAPI.js"></script>

Then, the below script does the following:

  • Uses the PandoAPI.hasPando() method to store a boolean variable with the result from the hasPando method
  • Defines a list of links indexed by their DOM id
  • After the window loads, rewrites links with appropriate pando:subscribe? URLs if the Pando installed cookie is detected

You can follow along with the comments:

<script type="text/javascript">
 
  // Assume Pando is not installed
  pandoInstalled = false;
 
  // Pass a simple callback function that sets pandoInstalled to true if cookie is present
  PandoAPI.hasPando(function(i){ if(i == true) pandoInstalled = true; });
 
  // Define list of channel feeds and pages
  var subscribeLinks = {
    'pandomonium': {
      'channelPage': 'http://channels.pando.com/channel/pandomonium',
      'channelFeed': 'http://feedburner.pando.com/pando/pandomonium'
    },
    'projectpedal': {
      'channelPage': 'http://channels.pando.com/channel/projectpedal',
      'channelFeed': 'http://feedburner.pando.com/pando/projectpedal'
    },
    'rocketboomhd': {
      'channelPage': 'http://channels.pando.com/channel/rocketboomhd',
      'channelFeed': 'http://feedburner.pando.com/pando/rocketboomhd'
    }
  };
 
    // Do not try to use pandoInstalled until the page is loaded;
    // the callback function may not have run yet and we want to
    // make sure our links are ready to modify
    window.onload = function(){
      // If Pando is installed, rewrite the links
      if(pandoInstalled == true) {
        // For each link
        for(channelId in subscribeLinks) {
          // Find the link to modify
          link = document.getElementById(channelId);
         
          // Change the href attribute to a pando:subscribe? link with the feed URL
          link.href = 'pando:subscribe?' + subscribeLinks[channelId]['channelFeed'];
        }
      }
    }
</script>

Then, in the body of your page, define your links with the appropriate id and with URLs that will work if javascript is not enabled:

  <ul>
    <li><a href="http://channels.pando.com/channel/pandomonium" id="pandomonium">Pandomonium</a></li>
    <li><a href="http://channels.pando.com/channel/projectpedal" id="projectpedal">Project Pedal</a></li>
    <li><a href="http://channels.pando.com/channel/rocketboomhd" id="rocketboomhd">Rocketboom</a></li>
  </ul> 

A version of this script lives on a stand-alone page here. Feel free to view the source and borrow what you need and ask any questions below. (This page also includes a server-side cookie inspection so you can tell when viewing the page whether you have the Pando "installed" cookie set, for testing purposes).

‹ Easy Pando RSS FeedsupBuilding a Custom Pando RSS Feed ›