Step 1: The embed code
Insert this snippet into any external page to display your landing page.
<div style="width: 100%; overflow: hidden;">
<iframe
src="<YOUR LANDING PAGE URL>"
style="width: 100%; height: 800px; border: 0;"
loading="lazy"
allowfullscreen
></iframe>
</div>
Set the
srcto the public URL of your landing page.The
heightis static in this basic version. If your landing page is longer/shorter, adjust it manually or use Step 2.
Step 2: Responsive (dynamic height + safe initial aspect ratio)
This version starts with a responsive aspect ratio and then auto-adjusts the height based on the landing page content (no internal iframe scrollbar).
<div
id="dynamic-iframe"
style="position: relative; width: 100%; padding-top: 56.25%; overflow: hidden;"
>
<iframe
id="dynamic-iframe-inner"
src="<YOUR LANDING PAGE URL>"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
loading="lazy"
allowfullscreen
></iframe>
</div>
<script>
window.addEventListener("message", function (event) {
if (event.data && event.data.type === "setHeight") {
const container = document.getElementById("dynamic-iframe");
container.style.paddingTop = "0"; // switch away from aspect-ratio sizing
container.style.height = event.data.height + "px";
}
});
</script>
Notes
padding-top: 56.25%is the initial aspect ratio (16:9). Change it if you want a different initial layout before the real height is known.Once a height is received, it switches to a fixed pixel height on the container.
CamBuildr automatically sends the
setHeightevent when it detects that it runs in an iframe, so you only needs to have the eventListener added for this to work
Step 3: Donation redirection handling (payments + embed_return_url)
If your landing page includes donations/payments, you can let CamBuildr redirect the parent page (the embedding page) during/after the payment flow.
3a) Add embed_return_url to the iframe src
Append embed_return_url to the iframe URL. It should be the URL of the page that embeds the landing page.
Example:
<iframe
src="<YOUR_LANDING_PAGE_URL>?embed_return_url=<THE_URL_WHERE_YOU_EMBED_THIS_PAGE>"
...
></iframe>
What it does
If
embed_return_urlis provided, CamBuildr will redirect the user back to that URL at the end of the payment flow.
3b) External page script: handle redirect messages
Extend the Step 2 listener with redirect handling:
<script>
window.addEventListener("message", function (event) {
// Dynamic height
if (event.data && event.data.type === "setHeight") {
const container = document.getElementById("dynamic-iframe");
container.style.paddingTop = "0";
container.style.height = event.data.height + "px";
}
// Redirects from CamBuildr (payments, form submissions)
if (event.data && event.data.source === "cambuildr-redirect") {
const payload = JSON.parse(event.data.payload);
// payload.type is either 'payment' or 'signup'
window.location.href = payload.url;
}
});
</script>
Notes
This is useful when payments or signups need to navigate the top-level page (not just the iframe).
embed_return_urlis recommended so the user lands back on the embedding page after completing the payment flow.