Legacy Installation Snippets

New Snippet / Agent 2.0

Information on the updated installation snippet can be found in this article.

The new snippet can be found on the Install Settings page in Pendo. The new snippet works for all frameworks, and there is no longer a specific snippet for single page frameworks. This will replace any and all components of the legacy snippet.

Legacy Snippet - Most Apps

<script>
  // Please use Strings, Numbers, or Bools for value types.
  window.pendo_options = {
    apiKey: '<ACTUAL_API_KEY_HERE>',

     // If you load your user info asynchronously, set this to true
     usePendoAgentAPI: false,

    visitor: {
      id:              'VISITOR-UNIQUE-ID'   // Required if user is logged in
      // email:        // Optional
      // role:         // Optional

      // You can add any additional visitor level key-values here,
      // as long as it's not one of the above reserved names.
    },

    account: {
      // id:           'ACCOUNT-UNIQUE-ID' // Highly recommended
      // name:         // Optional
      // planLevel:    // Optional
      // planPrice:    // Optional
      // creationDate: // Optional

      // You can add any additional account level key-values here,
      // as long as it's not one of the above reserved names.
    }
  };
  (function() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.src = ('https:' === document.location.protocol ? 'https://' : 'http://' ) + 'd3accju1t3mngt.cloudfront.net/js/pa.min.js';
      var firstScript = document.getElementsByTagName('script')[0];
      firstScript.parentNode.insertBefore(script, firstScript);
  })();
</script>

Legacy Snippet - Angular

Step 1: Install Snippet

<script src="//d3accju1t3mngt.cloudfront.net/js/angular/ng-pendo.js"></script>
<script>
  window.pendo_options = {
   apiKey: '<ACTUAL_API_KEY_HERE>',

   // This is required to be able to load data client side
   usePendoAgentAPI: true
 };
</script>

Step 2: Include Pendo in your app’s modules. The library is pendolytics:

angular.module('your-app', [...,'pendolytics',...]);

Step 3: Set Visitor and Account data with $pendolytics.identify()

The following is sample code that should trigger when you know your user’s information. Your actual code will differ based on how you access your user and customer data. In the example below, the user data is stored in $rootScope.user. For your application, it may be stored in some other location.

if(Auth.isLoggedIn() ) {
   // identify function takes as parameters an Object containing two child objects: visitor and account.

   // like this
   var options = {
     visitor: {
       id: $rootScope.user.id,
       role: $rootScope.user.role,
       email: $rootScope.user.email
       // other visitor key:value pairs
     },
     account: {
       id: $rootScope.user.account.id,
       name:  $rootScope.user.account.name
       // other account key:value pairs
     }
   };

   $pendolytics.identify(options);

 }

Legacy Snippet - Ember

Step 1: Install Snippet

<script>
  window.pendo_options = {
   apiKey: '<ACTUAL_API_KEY_HERE>',

   // This is required to be able to load data client side
   usePendoAgentAPI: true
 };
  (function() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.src = ('https:' === document.location.protocol ? 'https://' : 'http://' ) + 'd3accju1t3mngt.cloudfront.net/js/pa.min.js';
      var firstScript = document.getElementsByTagName('script')[0];
      firstScript.parentNode.insertBefore(script, firstScript);
  })();
 </script>

Step 2: Include Pendo in your app’s Router

Add the following javascript code to your app, which helps pendo identify page load events.

App.Router.reopen({
      pendoPageLoad: function() {
          pendo.pageLoad();
      }.on('didTransition')
 });

Step 3: Set Visitor and Account data with $pendolytics.identify()

The following is sample code that should trigger when you know your user’s information. Your actual code will differ based on how you access your user and customer data.

if(Auth.isLoggedIn(user) && Account.isLoaded(user.account)) {
   // identify function takes as parameters an Object containing two child objects: visitor and account

   // like this
   var options = {
     visitor: {
       id: user.id,
       role: user.role,
       email: user.email
       // other visitor key:value pairs
     },
     account: {
       id: user.account.id,
       name:  user.account.name
       // other account key:value pairs
     }
   };

   pendo.identify(options);
 }