1. First step

• Add an HTML block in the Wix page and paste the calendar widget code you copied from the bsport backoffice.

It should be like this example code:

<script id="insert-bsport-widget-cdn">!function (b, s, p, o, r, t) { !typeof window.BsportWidget !== "undefined" && !document.getElementById("bsport-widget-cdn") && !function () { m = b.createElement(s), m.id = "bsport-widget-cdn", m.src = p, b.getElementsByTagName("head")[0].appendChild(m) }() }(document, "script", "https://cdn.bsport.io/scripts/widget.js")</script>
    <script id="bsport-widget-mount">
        function MountBsportWidget(config, repeat=1) {
            if (repeat > 50) { return }
            if (!window.BsportWidget) {
                return setTimeout(() => {
                    MountBsportWidget(config,repeat+1)
                }, 100 * repeat || 1)
            }
            BsportWidget.mount(config)
        }
    </script>
    <script>
        MountBsportWidget({
                "parentElement": "bsport-widget-485205",
                "companyId": companyId,
                "franchiseId": null,
                "dialogMode": 1,
                "widgetType": "calendar", 
                "showFab": false,
                "fullScreenPopup": false,
                "styles":undefined,
                "config": {
                    "calendar": {}
                }  
            })
    </script>
<div id="bsport-widget-485205"></div>

• Right under this code, always inside the HTML block, add this script:

<aside> ⚠️

Remember to add the correct website domain inside the variable → domain (at line number 3)

</aside>

<script type="module">
  let height = 0;
  let popupDetected = false;
  const domain = "https://www.domain.com";
  function sendEmbedHeight() {
    window.parent.postMessage(
      {
        embedHeight: height,
      },
      domain
    );
  }
  window.addEventListener("message", (event) => {
    if (event.source !== window.parent) return;
    if (event.data !== "getEmbedHeight") return;
    sendEmbedHeight();
  });
  function notifyPopupPresent() {
    popupDetected = true;
    window.parent.postMessage(
      {
        popupOpened: true,
      },
      domain
    );
  }
  function notifyPopupRemoved() {
    popupDetected = false;
  }
  const observer = new ResizeObserver((entries) => {
    if (entries.length !== 1) return;
    const entry = entries[0];
    if (entry.target !== document.body) return;

    height = entry.contentRect.height;
    sendEmbedHeight();
  });
  observer.observe(document.body);
  const popobserver = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === "childList") {
        const popupDescription = document.querySelector(
          "#bs-activity--dialog__content"
        );
        const popupAuth = document.querySelector(
          ".bsport-user-interaction-modal__innerContainer"
        );
        if ((popupDescription || popupAuth) && !popupDetected) {
          notifyPopupPresent();
        }
        if (!popupDescription && !popupAuth && popupDetected) {
          notifyPopupRemoved();
        }
      }
    }
  });
  popobserver.observe(document.body, { childList: true, subtree: true });
</script>
<script>
  window.addEventListener("message", (event) => {
    if (event.data && event.data.popUpTopPosition !== undefined) {
      document.documentElement.style.setProperty(
        "--popup-top-position",
        event.data.popUpTopPosition + "px"
      );
      document.documentElement.style.setProperty(
        "--popup-height",
        event.data.popUpHeight + "px"
      );
    }
  });
</script>
<style>
  body {
    overflow: hidden !important;
  }
  :root {
    --popup-top-position: 0px;
    --popup-height: 600px;
  }
  div[id*="bsport-widget"] {
    display: flex !important;
  }
  .bs-activity--dialog_paper,
  .bsport-user-interaction-modal__innerContainer {
    position: absolute !important;
    top: var(--popup-top-position, 0px) !important;
    max-height: var(--popup-height, 600px) !important;
  }
  .bs-week__cardMode__offerRow__offer-wrapper {
    height: fit-content;
  }
</style>
  

• Publish the page.

2. Second Step

• Replace domain in iframeDomain and in checkIframeLoaded for your real company name.

<script>
(function () {
    const iframeDomain = "https://www-domain.filesusr.com";
    let scrollListenerAttached = false;
    
    const checkIframeLoaded = setInterval(() => {
        const iframe = document.querySelector('iframe[src*="https://www-domain.filesusr.com"]');
        
        if (!iframe) {
            return;
        }
        const iframeUri = iframe.src;
        
        if (iframeUri) {
            clearInterval(checkIframeLoaded);
            
            const section = iframe.closest("section");
            const wixIframe = iframe.closest("wix-iframe");
            const outerDiv = wixIframe ? wixIframe.parentElement : null;
            
            window.addEventListener("message", (event) => {
                if (event.data?.embedHeight) {
                    const roundedEmbedHeight = Math.round(event.data.embedHeight);
                    iframe.style.height = `${roundedEmbedHeight}px`;
                    if (roundedEmbedHeight > 500 && section && outerDiv) {
                        section.style.height = `${roundedEmbedHeight + 150}px`;
                        outerDiv.style.height = `${roundedEmbedHeight + 150}px`;
                    }
                    sendDialogValuesToIframe();
                }
                
                if (event.data?.popupOpened) {
                    scrollToCenterPopup();
                }
            });
            
            function scrollToCenterPopup() {
                const iframeRect = iframe.getBoundingClientRect();
                const scrollY = window.scrollY || document.documentElement.scrollTop;
                const viewportHeight = window.innerHeight;
                const iframeTopInView = iframeRect.top >= 0;
                const iframeBottomInView = iframeRect.bottom <= viewportHeight;
                
                if (!iframeTopInView && !iframeBottomInView) return;
                
                const scrollAmount = !iframeTopInView
                    ? iframeRect.bottom - viewportHeight
                    : iframeRect.top;
                
                window.scrollTo({
                    top: scrollY + scrollAmount,
                    behavior: "smooth",
                });
            }
            
            const updateIframeOnLoad = () => {
                if (iframe.contentWindow) {
                    iframe.contentWindow.postMessage("getEmbedHeight", iframeDomain);
                }
            };
            
            function sendDialogValuesToIframe() {
                if (!iframe.contentWindow) return;
                const viewportHeight = window.innerHeight;
                const popUpHeight = viewportHeight * 0.8;
                const baseTopMeasure = (viewportHeight - popUpHeight) / 2;
                const scrollY = window.scrollY || document.documentElement.scrollTop;
                const iframeRect = iframe.getBoundingClientRect();
                const iframeHeight = iframeRect.height;
                const iframeAbsoluteTop = iframeRect.top + scrollY;
                const topMaxValue = iframeHeight - popUpHeight - baseTopMeasure;
                let popUpTopPosition = Math.max(
                    baseTopMeasure,
                    Math.min(
                        scrollY - iframeAbsoluteTop + baseTopMeasure,
                        topMaxValue
                    )
                ) +70;
                
                iframe.contentWindow.postMessage({
                    popUpTopPosition: Math.round(popUpTopPosition),
                    popUpHeight: Math.round(popUpHeight),
                }, iframeDomain);
            }
            
            if (!scrollListenerAttached) {
                window.addEventListener("scroll", sendDialogValuesToIframe);
                scrollListenerAttached = true;
            }
            
            updateIframeOnLoad();
            
            const observer = new MutationObserver(() => {
                if (!document.body.contains(iframe)) {
                    window.removeEventListener("scroll", sendDialogValuesToIframe);
                    scrollListenerAttached = false;
                    observer.disconnect();
                }
            });
            
            observer.observe(document.body, { childList: true, subtree: true });
        }
    }, 300);
})();
</script>

• Go to the website Dashboard → Settings → Custom code

   And click Add Custom Code