Adding a full page iframe to a custom page
Here's how to add a full page iframe to a custom page. The benefit of this is that you can include any remote webpage you like into a custom page inside your course.
Note that your remote page URL will still be visible in the page code, and a determined individual could still determine where your remote page is.
Edit the course you want to add your iframe to
Go to Step 4. Pages & Templates and pick the page you want to add the iframe to. (Most people people do this on a custom page, but in fact you can do this on any page of your course.
Remove all existing blocks from your page, and add a HTML/JS block from the Advanced block category. Just drag it over onto the page
Edit the block and add the following code to it:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999; /* make sure it appears above everything */
}
#myIframe {
width: 100%;
height: 100%;
border: none;
}
/* Remove padding from Xperiencify default containers */
.page-wrapper .relative.px-8 {
padding: 0 !important;
}
.page-wrapper .max-w-7xl.mx-auto {
max-width: unset !important;
}
</style>
</head>
<body>
<div id="container">
<iframe id="myIframe" src="YOUR_REMOTE_PAGE_URL_HERE"></iframe>
</div>
<script>
// Optional: receive postMessage from iframe if it sends height
window.addEventListener("message", function(event) {
if (event.data && event.data.iframeHeight) {
document.getElementById("myIframe").style.height = event.data.iframeHeight + "px";
}
});
</script>
</body>
</html>
Replace "YOUR_REMOTE_PAGE_URL_HERE" in the code above with your remote page address.