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 designer is “iframe aware.” It can 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 Design Studio supports iframes natively without requiring the use of a plugin or an extension. This approach is inherently more secure because it doesn't require browsers to have additional extensions installed beforehand.
iFrame configuration support and rules
Here are best-practice guidelines to ensure that Pendo can provide the best possible experience with iframes:
- Rule 1: The top window must have the Pendo Web SDK installed on it.
Note: While this isn't strictly necessary for Pendo to work on 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 Web SDK installed. If the top window doesn't have the Pendo Web SDK installed, there must be one “parent” iframe that contains all child iframes.
- Rule 3: The Pendo Web SDK must be installed in every iframe between the “top-most” window/iframe and the child iframe that you want to have Pendo in.
Note: Here's an example of an invalid configuration. This is an iframe that can't trace back to the “top-most” Pendo Web SDK because its parent doesn't have the Pendo Web SDK installed.
- Rule 4: All instances of the Pendo Web SDK must use the same app key as the “top most” window/iframe.
Note: Your app key is included in your install script 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 Web SDK updates include improving support when showing guides across iframes. The Pendo Web SDK in all iframes communicates with each other as each individual iframe loads. The Pendo Web SDK checks Page rules and target elements across each iframe to determine the best iframe to show a guide at any given moment. Additionally, the communication established by the Pendo Web SDK enables walkthroughs to continue across multiple iframes, allowing you to guide your customer seamlessly throughout your entire app.
As you build a walkthrough, you can target an individual guide step to a distinct iframe or a distinct Page or Feature (combination or both). This allows you to create guide content that spans across multiple iframes.
Page and Feature tagging and iframes
You can 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 uses the same workflow as if your application didn’t have iframes.