Officially we don't support Iframes and thus this feature is disabled by default. If your application uses iframes, contact us and we can enable some experimental functionality for you but we can only offer this functionality as is.
Product Fruits tour and hint target elements can be placed inside of iframes. Once the Iframes support is active, you can create and target steps/hints as ordinary. The only visible difference is that you will see a new parent iframe CSS selector field in the editor.
However, there are some limitations because of the security restrictions of internet browsers.
The biggest limitation is the same origin policy. Browsers don't allow interaction with iframe content from the parent application if the same origin rule doesn't match. That means:
my-app.example.com
, the iframe src
must be also loaded from my-app.example.com
iframe.example.com
, then you can force the same origin policy by setting document.domain = 'example.com'
in your code for both the application and the iframe