Defer loading of meeting or form iFrame

This technique will allow you to show a loading gif (or any other image) while the iframe for the meeting or form is loading. This example is a combination of the default Moxie embed code with a loading image. You will need to customize to fit your exact needs.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.min.js"></script>

<script type="text/javascript">
    function iframeLoaded() {
        var iframe = document.getElementById('hectic-meeting');
        var placeholder = document.getElementById('placeholder');
        iframe.style.display = 'block'; // Show the iframe
        placeholder.style.display = 'none'; // Hide the placeholder
    }
</script>
    
<div style="width:100%; min-height:500px">
    <div id="placeholder" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1712431768806-5b1c94fc0cf3?q=80&w=1000') center center no-repeat;">
        <!-- loading div -->
    </div>
    <iframe src="https://hello.withmoxie.com/01/your-business/30-minute-meeting?inFrame=true" id="hectic-meeting" style="padding: 0px; margin: 0px; border: 0; max-width: 100%; min-width: 100%; display: none;"  onload="iframeLoaded()"></iframe>
</div>

<script type="text/javascript">
    setTimeout(() => iFrameResize({heightCalculationMethod: 'min', sizeWidth: true, sizeHeight: true, log: false, checkOrigin: false}, '#hectic-meeting'),100);
</script>