Install Pendo on a multi-page web application

This article summarizes how to install Pendo on your multi-page web application using some standard defaults. For more detailed configuration options, see the Installation section of the Knowledge Base.

If your application is built on a single-page framework, see Install Pendo on a single-page web-application.

Your install script

Pendo is installed into your application with an install script that must be included on every page of your application. The install script consists of a short JavaScript code block (snippet) that securely and asynchronously loads the Pendo agent, which is a JavaScript file (pendo.js). The install script includes your unique API key and the initialize method needed to activate the Pendo agent. The initialize method also determines what values you pass as Visitor and Account IDs, and the metadata that you provide to Pendo. For more information about the main components of Pendo installation, see the Developer's guide to implementing Pendo using the install script.

Pendo admins can find the install script in Install Settings in Pendo.

1. Navigate to Settings > Subscription Settings from the bottom of the left-side menu.
2. Open the Applications tab.
3. Find and open your application from the Applications list.
4. Open the Install Settings tab.

For most apps, you can copy and paste the install script into your common HTML template as-is.

Raw events are passed to Pendo immediately, but it can take up to two hours for data to be processed for use in the Pendo UI. You receive an email when we begin receiving data.

Step 1. Define your data mappings

When initializing Pendo, you pass the following data to Pendo:

• Visitor ID (required).
• Visitor metadata (strongly recommended).
• Account ID (required for Pendo Feedback).
• Account metadata (strongly recommended if passing Account ID).

Define and test these values before the installation process to ensure that you're using globally unique identifiers as well as using meaningful metadata that enhances your ability to segment data in Pendo. 

Warning: Updating the Visitor and Account IDs after initial installation can result in anomalies in analytics and segmentation, and repeat guide experiences. All other metadata can be added or removed later with little disruption.

Step 2. Add the install script to your application

The Pendo install script for multi-page applications is typically a single code block. The top part pulls in the Pendo agent.

<script>
(function(apiKey){
        (p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};o._q=o._q||[];   

v=['initialize','identify','updateOptions','pageLoad','track'];for(w=0,x=v.length;w<x;++w)(function(m){       

o[m]=o[m]||function(){o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));};})(v[w]);   

y=e.createElement(n);y.async=!0;y.src='https://cdn.pendo.io/agent/static/'+apiKey+'/pendo.js';       

z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);})(window,document,'script','pendo');

The bottom part initializes Pendo, which allows you to collect analytics and deliver guides through Pendo. This is where you pass the variable that you identified in Step 1 for your IDs and associated metadata.

pendo.initialize({
        visitor: {
            id: 
        },
    });
})('<YOUR_API_KEY_HERE>');

Step 3. Verify the installation

To check the status of your install and that metadata is set for a particular user:

1. Open your application in a browser tab.
2. Sign in as a user.
3. Open the Browser Developer Console.
4. Type pendo.validateEnvironment() into the console and press enter.

This returns information on the Visitor IDs and metadata you set up, for example:

Visit the Pendo Academy for a video with step-by-step instructions on how to verify your Pendo installation. 

Once installed and initialized successfully, you can see raw events recorded in the Raw Events tab of your Subscription Settings. To view raw events:

1. Navigate to Settings > Subscription Settings from the bottom of the left-side menu.
2. Open the Applications tab.
3. Find and open your application from the Applications list.
4. Open the Raw Events tab.

For information about advanced configuration settings, such as Track Events or metadata, see Configure Track Events, Configure visitor and account metadata, and the Pendo Agent API documentation.

Example install script

Below is an example of the full install script that would be added to all pages of your application that you want to run Pendo on.

(function (apiKey) {
     (function(p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};o._q=o._q||[];    v=['initialize','identify','updateOptions','pageLoad','track'];for(w=0,x=v.length;w<x;++w)(function(m){       o[m]=o[m]||function(){o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));};})(v[w]);   y=e.createElement(n);y.async=!0;y.src='https://cdn.pendo.io/agent/static/'+apiKey+'/pendo.js';       z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);})(window,document,'script','pendo');
    pendo.initialize({
        visitor: {
            id: user.ID,
            email: user.email,
            full_name: user.full_name,
            role: user.accessLevel,
            creationDate: user.creationDate
        },
        account: {
            id: account.ID,
            name: account.name,
            is_paying: account.is_paying,
            monthly_value: account.monthly_value,
            planLevel: account.subscriptionCost,
        }
    });
})('<YOUR_API_KEY_HERE>');