The MeetOne patient onboarding wizard lets new patients select an appointment, submit their personal details, and confirm registration inside an iframe on your website, without leaving your site.

Overview

The onboarding wizard is a multi-step flow:

  1. Appointment — select an available appointment slot
  2. Personal Data — enter patient information
  3. Confirmation — onboarding complete

Each wizard step is a full page load — the iframe reloads per step. JavaScript events communicate height changes and step progress to the parent page, so the iframe never shows scrollbars.

Prerequisites

  • A MeetOne tenant domain (for example acme.meetone.io) with the onboarding feature enabled — contact MeetOne support (support@meetone.io) if you're not sure.
  • The ability to add HTML and JavaScript to your website.

Getting the Integration URL

https://[your-tenant-domain]/onboarding?iframe=true

Example:

https://acme.meetone.io/onboarding?iframe=true

The iframe=true parameter is only required on the first request. It activates iframe mode, which is then stored in the session and persists automatically across all wizard steps.

In iframe mode, MeetOne:

  • Removes the footer
  • Removes the progress bar
  • Removes step headers (title and description text) — use the meetone.onboarding-step-change event to display your own headings
  • Adds an iframe-layout class to the page body
  • Keeps tracking scripts, the info banner, and dialogs active

Basic Integration

1. Add the following styles to your HTML document.

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

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

2. Add the iframe to your HTML document.

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

JavaScript Events

The onboarding wizard emits the following events. All events use "meetone-onboarding" as the context identifier.

meetone.iframe-ready

Emitted once per page load, when a step has finished loading and is ready.

window.addEventListener("meetone.iframe-ready", (event) => {
  if (event.detail.context === "meetone-onboarding") {
    console.log("Onboarding ready:", event.detail);
    // event.detail = {width: 768, height: 1200, context: "meetone-onboarding"}
  }
});

meetone.iframe-resize

Emitted when the current step's content dimensions change — for example, due to validation errors or field expansion.

window.addEventListener("meetone.iframe-resize", (event) => {
  if (event.detail.context === "meetone-onboarding") {
    iframe.style.height = `${event.detail.height}px`;
  }
});

meetone.onboarding-step-change

Emitted when a new wizard step loads. Use this to update your own progress indicators or analytics.

window.addEventListener("meetone.onboarding-step-change", (event) => {
  if (event.detail.context === "meetone-onboarding") {
    console.log("Step changed to:", event.detail.step);
    // event.detail = {step: "appointment", context: "meetone-onboarding"}
    // Possible step values: "appointment", "personal_data", "confirmation"
  }
});

meetone.onboarding-complete

Emitted when the onboarding flow finishes, on the confirmation step.

window.addEventListener("meetone.onboarding-complete", (event) => {
  if (event.detail.context === "meetone-onboarding") {
    console.log("Onboarding complete!");
    // event.detail = {context: "meetone-onboarding"}
  }
});

Practical Example

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

    .meetone-onboarding {
      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-onboarding iframe {
      width: 100%;
      border: none;
      display: block;
      min-height: 800px;
    }

    .page-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .step-indicator {
      text-align: center;
      padding: 10px;
      background: #e8f4fd;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <div class="page-header">
    <h1>Patient Registration</h1>
    <p>Complete the steps below to register as a patient</p>
  </div>

  <div id="step-indicator" class="step-indicator" style="display: none;"></div>

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

  <script>
    const iframe = document.getElementById("onboarding-iframe");
    const stepIndicator = document.getElementById("step-indicator");

    const stepLabels = {
      appointment: "Step 1: Select Appointment",
      personal_data: "Step 2: Personal Information",
      confirmation: "Step 3: Confirmation",
    };

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

    // Dynamically adjust the height on resize
    window.addEventListener("meetone.iframe-resize", (event) => {
      if (event.detail.context === "meetone-onboarding") {
        iframe.style.height = `${event.detail.height}px`;
      }
    });

    // Update the step indicator
    window.addEventListener("meetone.onboarding-step-change", (event) => {
      if (event.detail.context === "meetone-onboarding") {
        stepIndicator.style.display = "block";
        stepIndicator.textContent = stepLabels[event.detail.step] || event.detail.step;
      }
    });

    // Handle completion
    window.addEventListener("meetone.onboarding-complete", (event) => {
      if (event.detail.context === "meetone-onboarding") {
        stepIndicator.textContent = "Registration Complete!";
        stepIndicator.style.background = "#d4edda";
      }
    });
  </script>
</body>
</html>

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

Third-party cookies

Safari and Chrome may block session cookies in cross-origin iframes, which can interrupt the session between wizard steps. For reliable session handling, ensure the MeetOne domain uses SameSite=None; Secure cookies and that both the parent page and the iframe are served over HTTPS.

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.

Troubleshooting

Iframe not loading

Symptoms: Blank iframe or an error message.

Possible causes:

  • Onboarding feature disabled for the tenant
  • CSP blocking the iframe
  • Mixed content (an HTTP page loading an HTTPS iframe)

Solutions:

  1. Confirm the onboarding feature is enabled for your tenant — contact MeetOne support if you're not sure.
  2. Review the browser console for CSP or mixed-content errors.
  3. Ensure both your page and the iframe use HTTPS.

Session lost between steps

Symptoms: The wizard resets or loses progress between steps.

Possible causes:

  • Third-party cookie blocking (Safari ITP, Chrome Privacy Sandbox)
  • Session cookie SameSite settings

Solutions:

  1. Ensure cookies are set with SameSite=None; Secure.
  2. Test in a fresh browser profile to rule out extensions.
  3. Consider using the same domain or a subdomain for the iframe source.

Events not firing

Symptoms: The parent page doesn't receive events, or the iframe doesn't resize.

Possible causes:

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

Solutions:

  1. Ensure the initial 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.