Model not responding to parent UI button clicks after load

Hi Alexander, It seems that Verge loads first and doesn’t attach listeners to the buttons that appear later.

Is there a way to add a loading/initialization delay inside Verge, within the puzzles?

For now, I’ve managed to add a temporary fix to the index.html file

<script>
  let lastButtonCount = 0;
  let stableChecks = 0;

  function startVergeWhenUIReady() {
    const iframe = document.querySelector(".model_component");
    const optionsReady = !!document.querySelector("#options-items");
    const buttonCount = document.querySelectorAll("[data-option-btn][id]").length;

    if (buttonCount > 0 && buttonCount === lastButtonCount) {
      stableChecks++;
    } else {
      stableChecks = 0;
      lastButtonCount = buttonCount;
    }

    if (iframe && iframe.dataset.src && optionsReady && buttonCount > 0 && stableChecks >= 3) {
      if (!iframe.getAttribute("src")) {
        iframe.setAttribute("src", iframe.dataset.src);
        console.log("3D iframe started after UI. Buttons:", buttonCount);
      }
      return;
    }

    setTimeout(startVergeWhenUIReady, 100);
  }

  window.Webflow = window.Webflow || [];
  window.Webflow.push(function () {
    setTimeout(startVergeWhenUIReady, 300);
  });
</script>

• This reply was modified 1 month ago by 3dma.

Thanks for the suggestion!
1. Could you please explain why delaying the Verge3D iframe startup is not the most efficient approach? In my quick test seems to prevent the issue, so I’d like to understand the possible downsides
2. If possible could you please clarify deeper how the postMessage solution should look in Puzzles?
I attached a screenshot of how I understood it. Is this structure correct? And if yes, does it mean I need to move all ~100+ click event puzzles there inside that do slot Or turn all of this in procedure to make list shorter?
Thanks!