Dynamic Sizing Code

When embedding, use the provided scripts to resize the widget's container to be mobile-responsive. This code responds to the Widget's resize events and changes the height of it the iFrame.

This only needs to be added once to the page, even if there are multiple widgets on the page.

Dynamic Code

<script>
  window.addEventListener("message", function (event) {
    if (
      event.data &&
      event.data.currentHeight > 0 &&
      event.data.componentId
    ) {
      const iframe = document.querySelector(
        `iframe[data-component-id='${event.data.componentId}']`
      );

      if (iframe) {
        console.log(
          `** ${event.data.componentId} height * ${event.data.currentHeight}`
        );
        iframe.style.height = `${event.data.currentHeight}px`;
        iframe.height = `${event.data.currentHeight}`;
      }
    }
  }, false);
</script>