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 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. Retrieve your Event or Project's embed URL or an iframe embed code from Studio and add it to your page

2. Make sure the Experience is on-brand, hide the Experience's own header

3. Enable responsive behaviour of the iframe and infinite scrolling

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.

🔗 Read more here.

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 to be 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

Prevent double-scrolling

One of the landmark UX flaws of an iframe is a "double scroll" effect when the iframe content scrolls independently from the rest of the page. This happens when the iframe's content is higher than the iframe itself, so it doesn't fit. This effect, unfortunately, can not be completely eliminated from within the iframe itself, as for security reasons the "iframed" page has only limited access to the "parent" page, so some modifications will be required on your site. This chapter will guide you through the required steps.

Hide the scroll bar of the iframe

Further steps laid out in this guide will ensure that eventually, the height of the iframe will match the height of its content exactly, eliminating the need for the scroll bar, but as this process is asynchronous, there may be sub-second periods when these do not yet match, so the browser will display – and then quickly remove – the scroll bar in the iframe. That creates a "jerky" visual effect as the layout shifts horizontally and could be prevented by disabling the scroll bar in the iframe:

• Set the scrolling attribute of the iframe "no"

• Set the overflow attribute of the iframe's style to hidden

<iframe scrolling="no" style="overflow: hidden;" ... ></iframe>

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:

<iframe
  id="monterosa-iframe"
  scrolling="no"
  style="overflow: hidden;"
  src="https://apps.monterosa.cloud/<path_to_your_experience>"
></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.