Step 1: The embed code
This is a snippet that can be inserted into any external page to show your landing page there.
<div style="position: relative; width: 100%; padding-top: 56.25%; overflow: hidden;" id="dynamic-iframe">
<iframe
src="<YOUR LANDING PAGE URL>"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
allowfullscreen
loading="lazy"
></iframe>
</div>
<script>
window.addEventListener("message", function(event) {
if (event.data.type === "setHeight") {
const iframe = document.getElementById("dynamic-iframe");
iframe.style.height = event.data.height + "px";
}
});
</script>
The iframe
srcattribute should be set to the public url of the landing page.The
padding-top: 56.25%will be the initial aspect-ratio of the embed.The script allows the height to be set from inside the embedded landing page.
Step 2: Configuring the Landing Page inside CamBuildr
In the landing page there is a small script that is necessary. It can be added by inserting an Html block and copying this snippet in it.
<script>
function sendHeight() {
const height = document.body.scrollHeight + 5;
parent.postMessage({ type: "setHeight", height }, "*");
}
window.onload = sendHeight;
window.onresize = sendHeight;
</script>
This will allow the external page to always show the page without an internal scrollbar. It can be inserted anywhere in the landing page.