<script src="https://msrt-integration-api.fittingbox.com/index.js" type="text/javascript"></script>

<body>
  <h3>Pupillary distance (PD)</h3>
  <div style="display: flex; gap: 1rem">
    <div>
      <input type="radio" id="single-pd" name="pd" value="pd" checked />
      <label for="mono-pd">Unique PD</label>
    </div>
    <div>
      <input type="radio" id="double-pd" name="pd" value="double-pd" />
      <label for="double-pd">Double PD</label>
    </div>
  </div>
  <div style="margin-top: 1rem; display: flex; align-items: center; gap: 1rem">
    <input id="pd-input" type="number" min="40" max="70" style="width: 3rem" />
    <button style="width: fit-content" onclick="launchMsrt()">
      MEASURE PD
    </button>
  </div>
  <div class="overlay"></div>
  <div id="msrt-container"></div>
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

#msrt-container {
  display: none;
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: 690px;
  max-width: 384px;
}

@media (min-width: 768px) {
  #msrt-container {
    inset: 2rem;
    max-width: 700px;
  }
}

const msrtDiv = document.querySelector("#msrt-container");
const overlayDiv = document.querySelector(".overlay");
const singlePdInput = document.querySelector("#single-pd");
const doublePdInput = document.querySelector("#double-pd");
const pdInput = document.querySelector("#pd-input");

window.launchMsrt = function () {
  msrtDiv.style.display = "block";
  overlayDiv.style.display = "block";
  Msrt.createWidget("msrt-container", {
    apiKey: "J31RjpMySewnZu8LNyjzQgjUochRFiZIqTsGMJsL",
    onGetResultPd: (result) => {
      // if we have a left and right pd in the result, it is a double pd
      if (result.left) {
        doublePdInput.checked = true;
      } else {
        singlePdInput.checked = true;
      }
      pdInput.value = result.pd;
    },
    onTooManyErrors: () => console.log("too many errors"),
    onClose: () => {
      console.log("close");
      closeMsrt();
    }
  });
};

window.closeMsrt = function () {
  msrtDiv.style.display = "none";
  overlayDiv.style.display = "none";
};
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.