Overview
Pendo built the Visual Design Studio to provide the best iframe experience possible across Guides, page tagging, and feature tagging, especially with sites using multiple iframes. The Visual Designer is “iframe aware” - it is able to detect the existence of iframes in your application, and can surface them in an easy-to-use UI that allows you to tag them for analytics and Guide targeting. This also means that the Visual Designer supports iframes natively without requiring the use of a plugin or an extension. This approach is inherently more secure since it does not require browsers to have additional extensions installed beforehand.
iFrame Configuration Support & Rules
Here are best practice guidelines to ensure that Pendo can provide the best possible experience with iframes:
- Rule 1: The top window should have the Pendo Agent installed on it.
Note: While this is not strictly necessary for Pendo to work in iFrame sites it does provide the best experience when using the Visual Designer.
- Rule 2: A single “top most” window or iFrame must have the Pendo Agent installed. If the top window does not have the Pendo Agent installed, there must be one “parent” iframe which contains all child iframes.
- Rule 3: The Pendo Agent must be installed in every iframe between the “top most” window/iframe and the child iFrame that you desire to have Pendo in.
Note: Here is an example of an invalid configuration, there is an iFrame that cannot trace back to the “top most” Pendo Agent because its parent does not have the Pendo Agent installed
- Rule 4: All instances of the Pendo Agent must use the same subscription key as the “top most” window/iFrame.
Note: Your subscription key is included in your install snippet at the bottom of your JavaScript snippet.
- Rule 5: As long as Rule #3 is followed, Pendo supports all your nested iframes!
Guides and iFrames
With Visual Design Studio, Pendo Agent updates include improving support when showing Guides across iframes. The Pendo Agents in all iframes will communicate with each other as each individual iframe loads. This allows the Pendo Agent to check Page Rules and Target Elements across each iframe to determine the best iframe to show a Guide at any given moment. In addition, the communication established by the Pendo Agent allows walkthroughs to continue across multiple iframes empowering you to guide your customer throughout your entire app seamlessly!
As you build a walkthrough, you can target an individual Guide step to a distinct iframe or a distinct page / feature (combination or both). This will allow you to create Guide content that spans across multiple iframes.
Page & Feature Tagging and iFrames
Tag pages and features across any number of iframes with the Visual Design Studio after you’ve installed Pendo in each iframe. Visual Design Studio allows you to easily identify iframes both visually and by URL so you can tag them appropriately. Feature tagging will also use the same exact workflow as if your application didn’t have iframes.
