MeetOne's appointment booking form lets patients request an appointment with a specific doctor directly from your website, by embedding it in an iframe.

Overview

The appointment booking form can be embedded on any website using an iframe. It lets patients:

  • Enter their personal information (name, email, phone)
  • Select up to 4 preferred time slots
  • Add an optional message for the doctor
  • Accept the privacy policy and submit the request

The form emits JavaScript events under the meetone-appointment-form context that let you dynamically resize the iframe and react to user interactions.

Prerequisites

  • A MeetOne tenant domain (for example acme.meetone.io) with the appointment booking feature enabled.
  • The doctor's unique user_token.
  • The ability to add HTML and JavaScript to your website.

Getting the Integration URL

Finding the doctor's user token

Each doctor in MeetOne has a unique user_token that identifies them for this integration. You can find it in one of the following ways:

  1. Admin panel: As an admin or agent, open the doctor's profile in the MeetOne admin panel — the token is shown there.
  2. API: If you integrate with the MeetOne API, the token is included in doctor profile responses.
  3. MeetOne support: If you can't locate the token, contact MeetOne support (support@meetone.io) with the doctor's name or email to confirm it.

Constructing the URL

Once you have the doctor's user_token, construct the iframe URL as follows:

https://[your-tenant-domain]/appointment-bookings/[USER_TOKEN]/new?iframe=true

Example:

https://acme.meetone.io/appointment-bookings/abc123def456/new?iframe=true

The iframe=true parameter is required to activate the iframe layout. It removes the main navigation and page title, applies iframe-specific styling, and shows a "Powered by MeetOne" footer.

Basic Integration

1. Add the following styles to your HTML document.

<style>
  .meetone-appointment-booking {
    max-width: 768px;
    margin: 0 auto;
  }

  .meetone-appointment-booking iframe {
    width: 100%;
    border: none;
    min-height: 800px;
  }
</style>

The initial min-height is a reasonable starting point, but you should use the meetone.iframe-ready and meetone.iframe-resize events (below) to set the iframe's actual height based on the form content.

2. Add the iframe to your HTML document.

<div class="meetone-appointment-booking">
  <iframe
    id="appointment-booking-iframe"
    src="https://acme.meetone.io/appointment-bookings/[USER_TOKEN]/new?iframe=true"
    width="100%"
    height="800">
  </iframe>
</div>

JavaScript Events

The appointment booking form emits the following events, which you can listen to for dynamic sizing and integration.

meetone.iframe-ready

Emitted once, when the form has finished loading and is ready to use.

The event's detail object contains:

  • width — current width of the form content
  • height — current height of the form content
  • context — the context identifier ("meetone-appointment-form")
window.addEventListener("meetone.iframe-ready", (event) => {
  console.log("Form ready:", event.detail);
  // event.detail = {width: 768, height: 1200, context: "meetone-appointment-form"}
});

meetone.iframe-resize

Emitted whenever the form's dimensions change — for example, when validation errors are displayed, form fields expand, the viewport changes, or the submission success message is shown.

The event's detail object contains the same width, height, and context fields as meetone.iframe-ready.

window.addEventListener("meetone.iframe-resize", (event) => {
  console.log("Form resized:", event.detail);
  // event.detail = {width: 768, height: 1350, context: "meetone-appointment-form"}
});

Practical Example

A complete HTML page that sets the initial height when the form loads, adjusts the height dynamically as the form content changes, and avoids any internal scrolling:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Book an Appointment</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }

    .meetone-appointment-booking {
      max-width: 768px;
      margin: 0 auto;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .meetone-appointment-booking iframe {
      width: 100%;
      border: none;
      display: block;
      min-height: 800px;
    }

    .page-header {
      text-align: center;
      margin-bottom: 30px;
    }
  </style>
</head>
<body>
  <div class="page-header">
    <h1>Schedule Your Appointment</h1>
    <p>Fill out the form below to request an appointment with Dr. Smith</p>
  </div>

  <div class="meetone-appointment-booking">
    <iframe
      id="appointment-booking-iframe"
      src="https://acme.meetone.io/appointment-bookings/abc123def456/new?iframe=true"
      width="100%"
      height="800">
    </iframe>
  </div>

  <script>
    const iframe = document.getElementById("appointment-booking-iframe");

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

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

    iframe.addEventListener("error", () => {
      console.error("Failed to load appointment booking form");
    });
  </script>
</body>
</html>

Embedding Multiple Booking Forms

If you need to embed booking forms for multiple doctors on the same page:

1. Use separate iframes with unique IDs.

<div class="meetone-appointment-booking">
  <h2>Dr. Smith</h2>
  <iframe
    id="booking-form-smith"
    src="https://acme.meetone.io/appointment-bookings/TOKEN_SMITH/new?iframe=true"
    width="100%">
  </iframe>
</div>

<div class="meetone-appointment-booking">
  <h2>Dr. Jones</h2>
  <iframe
    id="booking-form-jones"
    src="https://acme.meetone.io/appointment-bookings/TOKEN_JONES/new?iframe=true"
    width="100%">
  </iframe>
</div>

2. Use the event target to identify which iframe triggered the event.

window.addEventListener("meetone.iframe-resize", (event) => {
  if (event.detail.context === "meetone-appointment-form") {
    const iframes = document.querySelectorAll("iframe");
    iframes.forEach((iframe) => {
      if (iframe.contentWindow === event.target) {
        iframe.style.height = `${event.detail.height}px`;
      }
    });
  }
});

Form Submission

When a patient successfully submits the appointment request:

  1. The form is replaced with a thank-you message.
  2. A meetone.iframe-resize event is triggered with the new dimensions.
  3. The iframe automatically adjusts to show the success message.
  4. An email notification is sent to the doctor.

The submission is saved as an appointment request, which the doctor can confirm later from the MeetOne dashboard.

Security Considerations

Content Security Policy

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;">

HTTPS requirement

Always use HTTPS for both your page and the iframe. This protects patient data in transit and is required for compliance with medical data regulations.

Cross-origin submission (no third-party cookies required)

The booking form is designed to submit from a cross-origin iframe, so it does not depend on any cookie reaching MeetOne. Because the request is cross-site, browsers do not send MeetOne's SameSite=Lax session cookie — and strict third-party-cookie blocking (for example, in Safari) would drop it entirely. The submit endpoint therefore does not rely on the session for CSRF protection or for the session-based parts of its bot protection.

You do not need to allow third-party cookies for your MeetOne tenant domain on your site for the booking form to work. Spam protection is preserved without cookies via a hidden honeypot field and a per-IP rate limit on the submit endpoint.

Troubleshooting

Iframe not loading

Symptoms: Blank iframe or an error message.

Possible causes:

  • Invalid user token
  • Appointment booking feature disabled for the tenant
  • CSP blocking the iframe
  • Mixed content (an HTTP page loading an HTTPS iframe)

Solutions:

  1. Verify the user token is correct and belongs to a doctor.
  2. Confirm the appointment booking feature is enabled for your tenant — contact MeetOne support if you're not sure.
  3. Review the browser console for CSP or mixed-content errors.
  4. Ensure both your page and the iframe use HTTPS.

Events not firing

Symptoms: The iframe doesn't resize dynamically.

Possible causes:

  • Missing iframe=true parameter
  • Event listener attached after the iframe loaded
  • JavaScript errors preventing event dispatch

Solutions:

  1. Ensure the URL includes ?iframe=true.
  2. Attach event listeners before the iframe loads.
  3. Check the browser console for JavaScript errors.

Incorrect height

Symptoms: The iframe shows scrollbars or cuts off content.

Solutions:

  1. Implement both the meetone.iframe-ready and meetone.iframe-resize listeners.
  2. Set border: none and remove fixed height constraints from your CSS.
  3. Use the exact height from event.detail.height.

Questions? Contact us at support@meetone.io.