Typically, Pendo is installed through an install script consisting of JavaScript code, copied into your application. There are multiple options for installing Pendo. This article provides a brief overview of different installation options for a direct web implementation of Pendo.
On a single-page application
In single-page frameworks, the first part of the Pendo install script is included on the main HTML page, while the call to initialize Pendo typically occurs in a separate component. For instructions, see Install Pendo on a single-page web application.
On a multi-page application
In multi-page application frameworks, Pendo must be installed and initialized on every HTML page of your application. For instructions, see Install Pendo on a multi-page web application.
In iframes
Install Pendo in each frame where you want analytics or guides. If guides are expected to cross frames or be coordinated across the frames, use the same apiKey and visitor/account metadata across all frames.
Additional iframe configuration options include:
-
frameIdentitySyncto sync changes to the identity or metadata of the visitor across frames. -
autoFrameInstallto auto-install and initialize the Web SDK in any child frames that have the same origin
Learn more in Pendo's Web SDK docs.
On the login page of your application
If you want to capture analytics on your login page, you will likely need to install using anonymous Visitor IDs in Pendo. After the user signs in, you must then either:
- Re-initialize Pendo if using a multi-page framework
- Re-identify the visitor if using a single-page framework.
For full instructions, see Install Pendo on a login page.
With the Twilio Segment integration
Pendo offers integration with Twilio Segment (formerly, Segment.io and Segment.com), allowing you to send data to Pendo from Segment. Pendo can be installed through the Twilio Segment integration. Often, you can complete this installation without any code changes to your application, making it a quicker option for installing Pendo. For instructions, see the Install Pendo through Twilio Segment article.
Through Google Tag Manager
Pendo can be installed through Google Tag Manager. Often, you can complete this installation without any code changes to your application, making it a quicker option for installing Pendo. For instructions, see Install Pendo through the Google Tag Manager.
Through other tag managers
Most tag managers operate by having a small installation script embedded in the code of your application. After the install script is installed, they usually provide the option to add additional code to your application through the tag manager, rather than the code-based approach. Pendo is installed using plain JavaScript, so it's possible to inject the Pendo install script through most tag managers.
Through the npm package
You can install the Pendo Web SDK using the npm package @pendo/web-sdk instead of adding the install script directly to your application. This bundles the SDK with your app, so updating to a new version requires deploying a new build.
For installation and initialization steps, see our Pendo Web SDK documentation.
On Microsoft apps
Microsoft Power Apps is a low-code application-building framework that allows Microsoft customers to build and customize internal business applications. There are two major categories of Microsoft Power Apps: model-driven apps and canvas apps.
On a Salesforce digital experience
You can install Pendo on a Salesforce digital experience using JavaScript. Without additional engineering effort in Salesforce, you can only send Visitor ID to Pendo using this method. You can't send Account ID or visitor and account metadata unless you can also develop custom Salesforce components. For more information, see Install Pendo on a Salesforce digital experience.
On other third-party apps
For third-party apps that you have access to add a code snippet to, you can insert the Pendo install script on apps like Zendesk Guide.
On a browser extension
The Pendo Web SDK can collect events on any window or frame where the install script is added. Because browser extensions can run on top of third-party applications, it’s important to ensure that Pendo only captures events from the extension, not from the underlying application.
You can install Pendo in a browser extension if it meets one of the following conditions:
- The extension opens a separate iframe that’s hosted by the extension and has its own document object. In this case, install the Pendo install script inside that iframe.
- The extension opens a new window, either to your own web application or using an extension-based URL (for example,
chrome-extension://for Chrome extensions). In this case, install the Pendo install script in the new window.
If your extension uses Manifest V3, additional steps are required. You must install the Pendo Web SDK using npm to ensure that no remote code is fetched. For setup instructions, see the Manifest V3 Extension section in the README.