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 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 since 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 agent installed on it.
Note: While this isn't 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 doesn't 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 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 agent because its parent doesn't 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 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 agent updates include improving support when showing guides across iframes. The Pendo agent in all iframes communicates with each other as each individual iframe loads. The Pendo agent checks 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, so you can 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 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.