How to implement an iFrame into Shopify page

Store Design
1

Hi,

I’m don’t have the biggest knowledge about coding, so hope someone can help me.

I have to imbed a custom iFrame into a page on my Shopify shop. I got this code from the developer:

In the <HEAD> section of your website, include the following:

<!-- VOCAST HEAD SCRIPT -->
<script type="text/javascript" src="https://presscloud.com/nr/lib/iframe-resizer/js/iframeResizer.min.js"></script>

<!-- VOCAST RESIZING SCRIPT -->
    
<script type="text/javascript">
    window.addEventListener("hashchange", function () {
        document.getElementById("digitalshowroom").contentWindow.postMessage("route=" + location.hash, "*");
    });
    reportDimentions = function (event) {
        var element = document.getElementById("digitalshowroom");
        if (element) {
            var bounding = element.getBoundingClientRect();
            var elementWidth = parseInt(element.style.width, 10);
            var elementHeight = parseInt(element.style.height, 10);
						// Calculate the rect of the iframe that is currently visible on screen
            //var visibleTop = bounding.top < 0 ? -bounding.top : 0;   
            var visibleLeft = bounding.left < 0 ? -bounding.left : 0;
            var visibleWidth = window.innerWidth - (bounding.left > 0 ? bounding.left : 0);
            if (visibleWidth > elementWidth) visibleWidth = elementWidth;
            var visibleHeight = window.innerHeight - (bounding.top > 0 ? bounding.top : 0);
            if (visibleHeight > elementHeight) visibleHeight = elementHeight;
          	var scrollYdefaultHeight = 40;
          	var scrollY = event.currentTarget.window ? event.currentTarget.window.scrollY : scrollYdefaultHeight;
            var visibleRect = {
                top: scrollY <= scrollYdefaultHeight ? scrollYdefaultHeight : scrollY,
                left: visibleLeft,
                width: visibleWidth,
                height: visibleHeight,
            };
            document
                .getElementById("digitalshowroom")
                .contentWindow.postMessage(
                { message: "scroll", visibleRect: visibleRect },
                "*"
            );
        }
    };
  // Force a iframe height to fit the modal. If only one item in basket the iframe height is too lov to fit the modal.
    minResizeFrame = function (){
        document.getElementById("digitalshowroom").style.minHeight = "600px";
    };
    window.addEventListener("scroll", (event) => reportDimentions(event));
    window.addEventListener("resize", (event) =>
        reportDimentions(event));
    document.addEventListener("DOMContentLoaded", function (event) {      
        document.getElementById("digitalshowroom").src="https://101copenhagenb2b.presscloud.com/digitalshowroom" + location.hash;
        var iframes = iFrameResize(
            {
                scrolling: true,
                checkOrigin: false,
                heightCalculationMethod: "taggedElement",
              	initCallback: function() {
                  minResizeFrame();
              }
            },
            "#digitalshowroom"
        );
        reportDimentions(event);
    });
    window.addEventListener(
        "message",
        function (event) {
            if (event.data && typeof event.data === "string") {
                let routeString = "routeChanged=";
                let hasRouteChanged = event.data.indexOf(routeString);
                if (hasRouteChanged !== -1) {
                    let routeHash = "#" + event.data.substring(routeString.length);
                    if (routeHash !== location.hash) {
                      window.scrollTo(0,0);
                      history.replaceState(null, '', routeHash);
                    }
                }
            }
        },
        false
    );
</script>

PUT THIS IFRAME ON WHERE YOU WANT THE IFRAME ON THE FRONTPAGE:

<!-- VOCAST IFRAME -->
<iframe allow="clipboard-write" id="digitalshowroom" name="" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe>

I can’t find any guides to this, so hope you can help :slightly_smiling_face: