# Embed the Secure Inbox Upload Form

> Embed the MeetOne secure inbox in an iframe so senders can verify their email and upload documents on your website, with resize events and CSP setup.

Source: https://help.meetone.io/developers/integrations/embed-secure-document-inbox
Last updated: 2026-09-30

---

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.

> **Note**
>
> If the organization uses the [website widget](https://help.meetone.io/developers/integrations/embed-website-widget), you don't need a separate embed: the owner enables **Send documents** in the widget settings, and the widget opens this form in its dialog. That option always delivers to the organization's upload link.

## 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
```

> **Warning**
>
> Renewing the link on the integration page changes the token, and the previous URL stops working immediately. Update the embed on your website afterwards.

## Basic Integration

**1. Add the following styles to your HTML document.**

```html
<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.**

```html
<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`:

```javascript
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:

```html
<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

| Symptom | Cause |
| --- | --- |
| "Upload currently not possible" inside the iframe | The upload link is switched off on the integration page. |
| "Link not found" inside the iframe | The token is wrong, or the link has been renewed. |
| Blank iframe or "not found" page | The secure inbox is not enabled for the account. |
| The form shows as a full standalone page inside the iframe | The URL is missing `iframe=true`. |
| No resize messages arrive | The listener checks the wrong origin or context, or was attached after the iframe loaded. |

## Related

- [Embed the Website Widget](https://help.meetone.io/developers/integrations/embed-website-widget)
- [Embed the Appointment Booking Form](https://help.meetone.io/developers/integrations/embed-appointment-booking-form)

Questions? Contact us at [support@meetone.io](mailto:support@meetone.io).