diff --git a/pages/docs/session-replay.mdx b/pages/docs/session-replay.mdx index 60dca3602b..0f976f51e2 100644 --- a/pages/docs/session-replay.mdx +++ b/pages/docs/session-replay.mdx @@ -209,3 +209,7 @@ When you enable Session Replay, use the above proxy metric to determine a starti #### Am I able to sample our Session Replay collection rate? Yes, you can configure the percentage of total replays that our SDK will capture as a sampling rate or manually trigger/end replay capture. + +#### Can I record cross-origin iframes within my page? + +Yes, Session Replay supports recording cross-origin iframes embedded within your page (Web only, SDK v2.77.0+). Both the parent page and child iframe must have the Mixpanel SDK initialized with `record_allowed_iframe_origins` configured to include each other's origins. For detailed setup instructions, see [Cross-Origin Iframe Recording](/docs/tracking-methods/sdks/javascript/javascript-replay#cross-origin-iframe-recording). diff --git a/pages/docs/tracking-methods/sdks/javascript/javascript-replay.mdx b/pages/docs/tracking-methods/sdks/javascript/javascript-replay.mdx index 442012c98b..8fb0e8d613 100644 --- a/pages/docs/tracking-methods/sdks/javascript/javascript-replay.mdx +++ b/pages/docs/tracking-methods/sdks/javascript/javascript-replay.mdx @@ -264,6 +264,59 @@ List of currently supported remote settings: Settings that are not yet supported, will not appear in the remote configuration. These non-included options will use the value that was initially set by the user for all `remote_settings_mode` options. +## Cross-Origin Iframe Recording + + +Cross-origin iframe recording requires SDK version 2.77.0 or later. + + +Session Replay can capture content from cross-origin iframes embedded within your page, providing a unified replay experience across parent pages and embedded third-party content. This is useful when your application embeds widgets, checkout flows, or other cross-origin content that you want to include in your replays. + +The SDK handles the communication between parent and child frames automatically using a secure handshake mechanism. + +### Configuration + +Both the parent page and the child iframe page must be configured to allow cross-origin recording. + +#### Parent Page Setup + +On your parent page, add the origins of any iframes you want to record to the `record_allowed_iframe_origins` array: + +```javascript +mixpanel.init('YOUR_PROJECT_TOKEN', { + record_sessions_percent: 100, + record_allowed_iframe_origins: [ + 'https://embedded-widget.example.com', + 'https://partner-checkout.example.com' + ] +}); +``` + +#### Child Iframe Page Setup + +On the child iframe page, add the parent page's origin to `record_allowed_iframe_origins`: + +```javascript +mixpanel.init('YOUR_PROJECT_TOKEN', { + record_sessions_percent: 100, + record_allowed_iframe_origins: [ + 'https://yoursite.com' + ] +}); +``` + +### Origin Format Requirements + +Origins must be specified in the format `protocol://domain[:port]`. The SDK performs exact matching, so ensure your origins are formatted correctly. + +| Format | Example | Valid | +|--------|---------|-------| +| HTTPS domain | `https://example.com` | ✓ | +| HTTP with port | `http://localhost:3000` | ✓ | +| No protocol | `example.com` | ✗ | +| With path | `https://example.com/page` | ✗ | +| Wildcard | `https://*.example.com` | ✗ | + ## Replay ID When a replay capture begins, a Replay ID is generated by the SDK and is attached as an event property (`$mp_replay_id`) to events tracked by the SDK during the capture session. Events containing the same `$mp_replay_id` will appear in the same Replay.