Dynamically Adjusting iFrame Height in Wix: Embedding External Booking Site

Ask the community
, , ,
1

Question:
I’m trying to embed an external site (Secure Online Booking) using an iFrame on a page created with Wix. Since the height of the external site changes dynamically, I want the parent site (Wix) to detect this height and perform dynamic page rendering to avoid creating unnecessary white space.

Product:
Wix Editor

What have you already tried:
I’ve set up the following code in respective areas to detect and synchronize with the height of the external site, but it’s not working as expected. The height of the parent site remains fixed.

HTML embedded in Wix:

<iframe id="beds24" width="100%" height="100%" src="https://beds24.com/booking2.php?propid=66288&layout=1" frameborder="0" scrolling="no"></iframe>

Velo code on the Wix page:

import wixWindow from 'wix-window';

$w.onReady(function () {
    console.log("Page is ready");

    if ($w("#beds24")) {
        console.log("HTML component found");
        wixWindow.addEventListener('message', (event) => {
            console.log("Message received:", event.data);
            if (event.data && event.data.type === 'setHeight') {
                $w("#beds24").height = event.data.height + 'px';
                $w('#section2').height = event.data.height + 'px';
                console.log("Height updated:", event.data.height);
            }
        });
    } else {
        console.log("HTML component not found");
    }
});

Code embedded at the end of the head in the external site:

<!-- Wix test -->
<script>
function sendHeight() {
    var height = document.documentElement.scrollHeight;
    window.parent.postMessage({type: 'setHeight', height: height}, '*');
}

window.onload = sendHeight;
window.onresize = sendHeight;
</script>