Instructions:
  • This page embeds a mobile app inside a device frame.
  • The iframe dynamically loads content and displays it inside the device frame.
  • The mobile app content adjusts its height based on its content to prevent scrollbars.
  • You can use the buttons inside the iframe to interact with the app and modify content.
  • All content is displayed responsively for mobile viewing.
How to implement this?

1. HTML Changes - Append target query param with your website's origin to the public app URL

              <iframe src="https://cloud.uipath.com/...?el=VB&target=https://mywebsite.com" id="appIframe"></iframe>

2. Script to embed on your webpage that can subscribe to App Height changes and resize the iframe.


  window.addEventListener('message', function(event) {
    if (event.origin !== "https://yourapp.com") return;
    if (event.data && event.data.type === "resize") {
      var iframe = document.getElementById("webAppIframe");
      iframe.style.height = event.data.height + 'px';
    }
  });
  function sendResizeMessage() {
    var iframe = document.getElementById("webAppIframe");
    var iframeHeight = iframe.contentWindow.document.body.scrollHeight;
    parent.postMessage({ type: "resize", height: iframeHeight }, "*");
  }
  window.onload = function() {
    var iframe = document.getElementById("webAppIframe");
    iframe.onload = sendResizeMessage;
  };