WalkMe Not Loading in an iFrame

Download as PDF

Issue

WalkMe content is not loading within an iFrame. 

Solution

Follow the steps below to determine whether the iFrame is cross-domain or same domain. 

How to Check an iFrame's Domain to see if it is same-domain or cross-domain:
Sometimes it is not explicitly stated what an iFrame's URL is in the site's HTML. This is necessary to correctly set up Switch to Frame steps by confirming that any URL rule you're using will not also be applicable to other iFrames.

Chrome:

1. Right-click on an element within the iFrame and click "Inspect"
2. You will be taken to the "Elements" tab in dev tools - click over to "Console"
3. You will automatically be placed in the iFrame console of the element you inspected
   
   
   
4. Enter document.URL in the console input and hit "Enter"
5. If you see the URL of a website other than the one you're currently on - this means it's an iFrame

Firefox/IE:

1. Right-click into the site, click "Inspect", and go to the Inspector (Firefox)/DOM Explorer (IE)
2.  Locate the iFrame where your element is located and take note of its name/ID/class/any other “unique” attribute
3. Click the “Console” tab and select the drop-down menu
4. Find the iFrame that identifies most closely with what you saw in the DOM/Inspector/Elements tab.
5.  Select that Frame and in the console, enter document.URL and hit "Enter"
6. The URL returned is the source URL for that iFrame 

Same-Domain iFrame:

If the iFrame is same-domain - you do not need the WalkMe snippet added there as long as the snippet is present in the top frame.

1. 1. If you are using regular jQuery to anchor to an element within the same-domain iFrame, you will need to be sure to configure iFrame jQuery
   2. Otherwise, just use On Screen element

Cross-Domain iFrame:

If the iFrame is cross-domain - the snippet will need to be present. If using an extension - reach out to your AM/DAC to make sure that the iFrame's domain is added to the correct package's self-regex.

1. If using snippet-in-site - check if the WalkMe snippet is present in the iFrame. 
   1. To do this, follow the steps above but instead of entering document.URL, enter _walkmeInternals
   2. If you get "undefined", that means the snippet is not present (and you will need to add it)
   3. If you get something similar to the image below, WalkMe is loading inside the iFrame