Links

Web Page Embed

Generally for simpler Experiences that operate as modules within a web page
Often, simpler Experiences make more sense when they exist in the flow of a page or an article, or within a rectangular space allocated on a page. For example, illustrated here.

Embed with the SDK

Monterosa / Interaction SDK v2 is currently in beta. Please contact sales if you're interested in access.
Monterosa / Interaction SDK v2 includes Embed which allows you to add the Experience on the page with just a few lines of JavaScript code instead of creating and managing the iframe manually. You will also get responsive behaviour and various performance improvements out-of-the-box. Please refer to the SDK embed guide for details.
🔗 A demo page is provided here.

Custom Embed with an iframe

This is how to embed an Experience via an iframe:
  1. 1.
    Retrieve your Event or Project's embed URL or an iframe embed code from Studio and add it to your page
  2. 4.
    Integrate with your SSO, or other systems
When embedding an Experience via an iframe, newer versions of the Safari browser will block analytics cookies due to Apple’s ITP (Intelligent Tracking Prevention) initiative. In order to enable analytics in the Experience iframe, the iframe has to be embedded using the same domain as the parent window domain, usually via a subdomain.

Hide Experience header

Some Experiences will be shipped with an included header, which, in case you plan to embed them into an iframe or a WebView, you'd likely want hidden. To do that you will need to un-tick one checkbox in App Setup in your Project in the Studio. This is applied to the Experience immediately and does not require a build or a code change on your end:
How to hide a header

Make the iframe height responsive

Within the iframe, the Experience page is built to be responsive, adjusting the sizing and layout of the experience upwards from a minimum width of 320px.
For the height of the iframe, initially set the height to a nominal value, 1200px or whatever you find works best for your design. When the contents of the iframe loads, it will submit a postMessage to the parent of the Experience page (your page) containing details of the full rendered height of the Experience page. Here's an example of the message you will receive:
{
identifier: 'FK resize',
width: 600,
height: 1200
}
You can use this to reset the height of the iframe. This snippet of JavaScript is included in the example below.
To avoid double scrolling (i.e. scrolling the parent page and separately having to scroll the child experience page), set the iframe to not allow scrolling. Here's how:
<iframe
id="monterosa-iframe"
height="1200"
width="100%"
scrolling="no"
style="border: none"
src="https://<examplemonterosaexperiencepage>"
></iframe>
<script>
window.addEventListener(
'message',
(event) => {
if (
event &&
event.data &&
event.data.height &&
event.data.identifier == 'FK resize'
) {
let height = event.data.height;
document.getElementById('monterosa-iframe').height = height;
}
},
false
);
</script>

Infinite scrolling

When a user scrolls to the bottom of your parent page (or wherever you want to trigger an infinite load within the Experience) pass a postMessage to the iframe to trigger the Experience to load more content:
{
data: 'LOAD_MORE'
}
After the iframe has loaded more, the parent page will again receive a postMessage containing details of the new full rendered height of the Experience page, to use to expand the height of the iframe to show all the content. The user can then continue scrolling.