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.websitedomain.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

• Prepare the custom script:

After publishing the page with the previous code, inspect the Iframe that renders the widget (with browser inspector) and copy the src string as highlighted here: