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 🙂
