Embed the Secure Inbox Upload Form

The secure inbox upload form lets participants and third parties send documents to a professional or an organization without a MeetOne account. Embedded in an iframe, the whole flow happens on your website.

Overview

The upload form is a four-step flow inside one iframe:

1. The sender enters first name, last name, email address and an optional note.
2. They enter the 6-digit code sent to that address.
3. They upload up to 10 files (PDF, JPG, PNG or WEBP, each up to 25 MB).
4. They see a confirmation listing the uploaded files and receive a confirmation of receipt by email.

Each step emits resize events under the meetone-secure-document-inbox context, so the iframe can follow the form's height.

Getting the Integration URL

Every upload link works as an embed. In MeetOne, the link and a ready-to-copy iframe snippet are on the Secure inbox integration page:

• Personal upload link – for a single professional, under Integrations › Secure inbox.
• Organization upload link – shared by the whole organization, managed by the organization owner under Organization › Integrations › Secure inbox.

The iframe URL is the upload link with iframe=true added:

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

Basic Integration

1. Add the following styles to your HTML document.

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

  .meetone-secure-document-inbox iframe {
    width: 100%;
    border: none;
  }
</style>

The iframe's height attribute (below) is only a starting point: the events set the real height for each step. Leave out a min-height, which would keep the iframe tall on a shorter step.

2. Add the iframe to your HTML document.

<div class="meetone-secure-document-inbox">
  <iframe
    id="secure-document-inbox-iframe"
    src="https://[your-tenant-domain]/u/[INBOX_TOKEN]?iframe=true"
    width="100%"
    height="760">
  </iframe>
</div>

Customize colors (optional)

To match the form to your website, append any of these URL parameters with a hex color value (#rgb or #rrggbb; encode # as %23). Values that are not valid hex colors are ignored, and without the parameters the default colors apply.

• button_color – color of the submit button (the hover shade is derived automatically)
• button_label_color – text color of the button label (default: white)
• highlight_color – highlight color of the form fields (focus outline)

Example with a blue button and highlight color:

https://[your-tenant-domain]/u/[INBOX_TOKEN]?iframe=true&button_color=%230066FF&highlight_color=%230066FF

JavaScript Events

Each step emits meetone.iframe-ready when it loads and meetone.iframe-resize when its size changes – for example after a validation error, when files are selected, or on the next step. The form runs on a different origin than your website, so the events reach your page as postMessage messages. Each message carries type, width, height and context:

const iframe = document.getElementById("secure-document-inbox-iframe");

window.addEventListener("message", (event) => {
  if (event.origin !== "https://[your-tenant-domain]") return;

  const data = event.data;
  if (!data || data.context !== "meetone-secure-document-inbox") return;

  if (data.type === "meetone.iframe-ready" || data.type === "meetone.iframe-resize") {
    iframe.style.height = `${data.height}px`;
  }
});

Checking event.origin and context makes sure you only react to the upload form, even if the page embeds other MeetOne forms.

Security Considerations

No third-party cookies needed

The flow does not rely on any cookie reaching MeetOne, so it works in browsers that block third-party cookies. The sender's details and the confirmed code travel encrypted inside the form fields and never appear in a URL. Only the final confirmation page carries an encrypted receipt reference in its URL; it is valid for 10 minutes and contains no name, email address or message.

The protections of the standalone link apply unchanged: the email confirmation is tied to the connection that entered the code and expires after 30 minutes, and codes are rate-limited and locked after repeated failed attempts.

Content Security Policy

If your website uses a Content Security Policy, allow frames from your MeetOne tenant domain:

<meta http-equiv="Content-Security-Policy"
      content="frame-src https://[your-tenant-domain];">

HTTPS

Always embed over HTTPS. The form transmits personal data and documents.

Troubleshooting

Related

• Embed the Website Widget
• Embed the Appointment Booking Form

Questions? Contact us at support@meetone.io.