iframe support with Visual Design Studio

Last updated:

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 Designer 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 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 agent in all iframes communicate 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, 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 or Feature (combination or both). This allows you to create guide content that spans across multiple iframes. 



Page and 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 also uses the same exact workflow as if your application didn’t have iframes. 



Was this article helpful?
3 out of 12 found this helpful