Your product, a web-based application where Pendo is already installed, might have a third-party product embedded within it. This article provides guidance to help you evaluate whether you can add Pendo to the embedded part of your product so that you can understand usage behavior and display guides within it.
Use case
In the example image below, your web application is represented by the orange box, and the embedded third-party product, called "BI Tool Dashboard Widget", is represented by a pink box within the orange box. The embedded third-party product is an iFrame in your web application, and your web application is the top Frame. Pendo is already installed in your web application (the top Frame), and you would like to expand this to your third-party product (the iFrame) so that you can track usage and deliver guides within this third-party product.
Evaluation checklist
To check whether you can add Pendo to the embedded third-party product, answer the following questions.
1. Is Pendo already installed in the embedded third-party product?
First, determine whether the embedded third-party product is already using Pendo.
In the Use case described, the inner iFrame, the embedded third-party product called "BI Tool Dashboard Widget" represented in pink, is already using Pendo with their own Pendo subscription. In the top Frame, which is your web application represented by the orange box, you also have Pendo installed through your own separate subscription.
Follow the instructions below to check whether Pendo is already installed in the embedded third-party product (iFrame). We additionally recommend directly asking the third-party about Pendo.
To verify that Pendo is installed on the iFrame:
- Right-click on your iFrame and select Inspect from the dropdown menu. Ensure that you're in the correct iFrame.
- Paste
pendo.validateInstall()into the Browser Developer Console and select Enter to return metadata. - If you don't see metadata return, the following error message typically appears, which means that Pendo isn't installed. Proceed to checklist item 2 in this article.
If the embedded third-party product is already using Pendo, don’t continue with the rest of the checklist. Instead, contact the third-party to discuss what options might be available.
For more information about installing Pendo and iFrames, see the Developer's Guide to Installing Pendo and iframe Support with Visual Design Studio.
2. Is it possible to install Pendo in the embedded third-party product?
To expand Pendo to your third-party application, you must install Pendo in the code of the iFrame within your application. This might require working with the third-party to see if they allow you to add the Pendo JavaScript code. If the answer is "no", then you can’t continue.
However, you might be able to send data from the third-party app to Pendo for use in Analytics (not Guides) using the Alternative solution described at the end of this article.
3. Can you pass useful Visitor IDs from the Pendo agent installed in the third-party product?
We recommend using the same Visitor ID values in both your application and the embedded third-party product. You can then track usage for the same end-user across both your application and the embedded third-party product under the same visitor record in Pendo.
If you’re unable to use the same Visitor ID in both your application and the embedded third-party product, you can use a different set of Visitor IDs or allow Pendo to generate anonymous Visitor IDs in the third-party product. However, this isn’t recommended because:
-
Usage for the same end-user on your application and the embedded third-party product would be split across two different visitor records in Pendo.
-
This would inflate the Monthly Active User (MAU) count in your Pendo subscription. For more information, see the Monthly Active Users article.
-
There is a possibility of display issues with guides, especially for those with automatic activation.
For more information on Visitor IDs, see Choose Visitor and Account IDs in the Planning your Pendo Installation article.
Alternative solution
If you can’t add Pendo to the embedded third-party product, you can instead send data from the embedded third-party app to Pendo through Track Events. This solution is only for Pendo Analytics with the embedded third-party app, and requires developer effort to set up Track Events. You must still pass useful Visitor and Account IDs to Pendo.