Recording iframe elements
Iframe elements allow you to embed other web pages into your website. There are two types of iframe elements: same-origin and cross-origin. The following sections describe the difference between same-origin and cross-origin iframes and cover all implementation scenarios you can have on your website.
Same-origin iframe elements
Same-origin iframe elements are iframes that share the same origin as their parent. In other words, the port, scheme, and host are the same for both the parent and iframe element. Same-origin iframes are supported out-of-the-box in the Smartlook Web SDK, meaning no configuration is needed.
The following table describes a few common implementation scenarios when the SDK is integrated in the parent website:
| SDK in iframe | Does Smartlook support this implementation? |
|---|---|
| Yes | Yes — no configuration needed. The session recording contains all data from the iframe element. Note that only the track, error, properties, and navigation calls execute in the iframe. All other calls are silently ignored. |
| No | Yes — no configuration needed. The session recording contains all data from the iframe element. |
| Yes — but connected to a different project | Yes — no configuration needed.
|
Cross-origin iframe elements
Cross-origin iframe elements are iframes that do not share the same origin as their parent page. In other words, there is a difference in scheme, port, or host between the parent page and iframe element. Due to browser security policies, you cannot access any data in an iframe from within the parent context, and vice versa.
The only way to enable cross-origin communication is via Window.postMessage() API. The Smartlook Web SDK uses this API to share necessary data in order to record iframes. Data is shared only when both parent and iframe are recorded into the same project. No sensitive data, such as page structure or interaction events, are exchanged. This means that no other third-party service can read or use the data. Only the data that is necessary for the SDK to record is exchanged. Possible data is internal visitor id or session id.
The following table describes a few common implementation scenarios when the SDK is integrated in the parent website:
| SDK in iframe | Does Smartlook support this implementation? |
|---|---|
| Yes | Yes — no configuration needed. The session recording contains all data from the iframe element. Note that only the track, error, properties, and navigation calls execute in the iframe. All other calls are silently ignored. |
| No | No — not supported The session recording only contains the parent page. The iframe element is hidden with an overlay to indicate the element was not recorded. |
| Yes — but connected to a different project | Yes — no configuration needed.
|
Second-level and third-level iframes
Currently, Smartlook only supports second-level iframes. If you happen to have cross-origin iframe in cross-origin iframe, the third-level iframe is not recorded. The third-level iframe element is hidden with an overlay to indicate the element was not recorded.
API calls within an iframe element
If the Smartlook SDK is integrated into both the parent website and an iframe that records to the same project, the iframe switches to iframe mode. Iframe mode means that the parent website controls the SDK. Due to this, only the track, error, properties, and navigation API calls can be executed. All other API calls will be silently ignored and have no effect.
Am I in iframe mode?
You can use
window.smartlook.isIframeModeEnabledto find if smartlook is running in cross-origin iframe mode
Updated over 1 year ago