The MeetOne appointment picker is a lightweight iframe widget that lets visitors browse and select an available appointment slot directly on your website.

Prerequisites

  • A MeetOne tenant domain (for example acme.meetone.io) with the appointment picker enabled — contact MeetOne support (support@meetone.io) if you're not sure whether it's available for your account.
  • The ability to add HTML and JavaScript to your website.

Add the Iframe and Basic Styles

1. Add the following styles to your HTML document.

<style>
/* Recommended height for screens up to 566px */
.meetone-appointment-picker iframe {
  height: 557px;
  max-width: 576px;
  margin: 0 auto;
}
/* Recommended height for screens from 567px */
@media (min-width: 576px) {
  .meetone-appointment-picker iframe {
    height: 361px;
  }
}
</style>

The initial height above is only a sensible default. Use the meetone.appointment-picker-ready and meetone.appointment-picker-resize events (below) to set the iframe's actual height once the widget reports it.

2. Add the iframe to your HTML document.

<div class="meetone-appointment-picker">
  <iframe
    src="https://acme.meetone.io/static_pages/appointment-picker"
    width="100%">
  </iframe>
</div>

Listen to Events

The appointment picker emits the following events.

meetone.appointment-picker-ready

Emitted when the picker has loaded and is ready to use. The event's detail object contains the current width and height of the picker.

window.addEventListener("meetone.appointment-picker-ready", (event) => {
  console.log(event.detail); // {width, height}
});

meetone.appointment-picker-resize

Emitted when the picker's dimensions change. The event's detail object contains the current width and height of the picker.

window.addEventListener("meetone.appointment-picker-resize", (event) => {
  console.log(event.detail); // {width, height}
});

meetone.appointment-picker-select

Emitted when the user selects a time slot. The event's detail object contains the selected date and time.

window.addEventListener("meetone.appointment-picker-select", (event) => {
  console.log(event.detail); // {date, time}
});

meetone.appointment-picker-deselect

Emitted when the user deselects a time slot, so that no slot is currently selected.

window.addEventListener("meetone.appointment-picker-deselect", (event) => {
  // No slot is selected
});

Practical Example

Once the picker is loaded, assign its actual height to the iframe. The width is left responsive (no fixed value), and a disabled "Submit" button is enabled only once the visitor selects a time slot:

<div class="meetone-appointment-picker">
  <iframe
    src="https://acme.meetone.io/static_pages/appointment-picker"
    width="100%"
    height="348px">
  </iframe>
  <button disabled>Submit</button>
</div>

<script>
  const iframe = document.querySelector(".meetone-appointment-picker iframe");
  const button = document.querySelector(".meetone-appointment-picker button");

  // Set the correct height when the picker is ready
  window.addEventListener("meetone.appointment-picker-ready", (event) => {
    iframe.style.height = `${event.detail.height}px`;
  });

  // Set the correct height when the picker is resized
  window.addEventListener("meetone.appointment-picker-resize", (event) => {
    iframe.style.height = `${event.detail.height}px`;
  });

  // Enable the submit button and log the selection
  window.addEventListener("meetone.appointment-picker-select", (event) => {
    button.removeAttribute("disabled");
    console.log(`${event.detail.date}, ${event.detail.time}`);
  });

  // Disable the submit button again on deselection
  window.addEventListener("meetone.appointment-picker-deselect", () => {
    button.setAttribute("disabled", true);
    console.log("No time selected");
  });
</script>

Security Considerations

If your website uses a Content Security Policy (CSP), allow iframes from your MeetOne tenant domain:

<meta http-equiv="Content-Security-Policy"
      content="frame-src https://acme.meetone.io;">

Always serve both your page and the iframe over HTTPS.

Questions? Contact us at support@meetone.io.