Iframe embedding

Use this article when OmniLab must appear inside an existing web page instead of opening as its own full-page destination. You can either paste a direct iframe or use the OmniLab JavaScript tag to inject the iframe dynamically.

Choose the right web embed pattern

Manual iframe: use an embed-ready URL

Use the campaign landing page when visitors should choose among multiple experiences. Use a direct touchpoint URL when visitors should enter one specific experience immediately.

<iframe
  id="omnilab-embed"
  src="https://experience.example.com/<campaign-public-link>?c=<touchpoint-id>&embedded=1"
  title="OmniLab campaign"
  loading="lazy"
  allow="camera; microphone; geolocation"
  style="width:100%;min-height:900px;border:0;overflow:hidden"
></iframe>

Adjust the allow permissions to match the experience you are embedding. Camera, microphone, or geolocation permissions are especially important for scanning, media capture, or location-aware flows.

Resize the iframe automatically

Embedded OmniLab pages can send resize messages to the parent page. Listen for those messages so the iframe height follows the content instead of showing an internal scrollbar.

<script>
  window.addEventListener("message", (event) => {
    const data = event.data;

    if (data?.type !== "resize" || data?.target !== "body") return;

    const iframe = document.querySelector("#omnilab-embed");
    if (iframe && typeof data?.data?.height === "number") {
      iframe.style.height = data.data.height + "px";
    }
  });
</script>

JavaScript tag: use one reusable host page

Use the OmniLab JavaScript tag when the same host page must load different campaigns or touchpoints based on the current page URL. The tag injects the iframe into a target container and reads the campaign path from a page parameter.

If your deployment includes a specific script URL, use that exact URL. The example below keeps the script host generic on purpose.

<div id="omnilab-container"></div>

<script>
  (function (b, o, n, u, s) {
    var a, t;
    a = b.createElement(u);
    a.async = 1;
    a.src = s;
    t = b.getElementsByTagName(u)[0];
    t.parentNode.insertBefore(a, t);
    o[n] = o[n] || [];
  })(document, window, "_om_async", "script", "https://<omnilab-script-host>/omplayer.js");

  _om_async.push([
    "init",
    {
      domain: "experience.example.com",
      targetId: "omnilab-container",
      queryParam: "id",
    },
  ]);
</script>

With that setup, the host page URL can choose the OmniLab path to load:

• Simple campaign: https://www.example.com/promo?id=summer-campaign
• Direct touchpoint with additional parameters: https://www.example.com/promo?id=summer-campaign%3Fc%3D<touchpoint-id>%26embedded%3D1%26utm_source%3Dnewsletter

The value passed in id should contain the path after the OmniLab domain. If you include its own query string, URL-encode that value before you publish the link.

Delivery notes

• Let the iframe fill the available width instead of fixing it to a narrow desktop size.
• Start with a generous minimum height, then let the resize listener adjust the final height.
• Test login steps, camera permissions, redirects, and mobile layout inside the real host page, not only in a standalone OmniLab tab.
• If the host page uses sticky headers or constrained containers, test touchpoints that open drawers, forms, keyboards, or camera prompts.

Related