> ## Documentation Index
> Fetch the complete documentation index at: https://docs.symmetry.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed the I-9 experience in an iframe

> Configure the iframe attributes and feature policy permissions needed to embed the employee and administrator I-9 experiences.

Both the employee and administrator I-9 experiences are delivered as embeddable URLs that you load in an `<iframe>` inside your own platform. To make sure every feature works (including camera-based document capture during Section 1) your iframe must be configured with the correct attributes and feature policy permissions.

## Recommended iframe configuration

Use the following attributes when embedding the `embeddedUri` returned by the access token endpoints:

```html theme={null}
<iframe
  class="embedded-iframe"
  width="100%"
  height="1200"
  frameBorder="0"
  allow="geolocation *; camera *"
  :src="placeholder"
  title="embedded-demo"
  sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-storage-access-by-user-activation"
></iframe>
```

### Attribute reference

| Attribute        | Required    | Purpose                                                                                                                                                                                                                         |
| :--------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `:src`           | Yes         | Vue shorthand for `v-bind:src`. Binds `src` to the value set within, which is the `embeddedUri` returned from the employee access token or administrator access token endpoint.                                                 |
| `allow`          | Yes         | Enables the browser feature policies the embedded experience needs. `camera` is required for in-browser document scanning during Section 1. `geolocation` should also be allowed to cover all supported document capture flows. |
| `sandbox`        | Yes         | Applies a security sandbox that restricts everything by default, then re-enables specific capabilities via tokens. See additional details below.                                                                                |
| `width`/`height` | Recommended | The embedded experience is responsive; a full-width container at least `1200px` tall avoids internal scrollbars on most viewports.                                                                                              |
| `frameBorder`    | Optional    | Visual only.                                                                                                                                                                                                                    |
| `title`          | Recommended | Improves accessibility for screen readers.                                                                                                                                                                                      |

#### Sandbox tokens

The `sandbox` attribute starts fully locked down and only re-enables what's listed:

| Token                                     | Effect                                                                                                                        |
| :---------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------- |
| `allow-scripts`                           | Lets the embedded content run JavaScript.                                                                                     |
| `allow-same-origin`                       | Allows the iframe to be treated as same-origin, which is necessary for `sessionStorage` access and cookie-based session auth. |
| `allow-popups`                            | Allows the embedded app to open new windows/tabs (for example, document downloads or external links).                         |
| `allow-forms`                             | Allows form submission.                                                                                                       |
| `allow-storage-access-by-user-activation` | Needed in browsers (Safari, Firefox) that partition third-party cookies, so the embedded session cookie can be accessed.      |

## Why the camera permission matters

During Section 1, the embedded experience presents a scan or upload document dialog so the employee can capture identity and work authorization documents directly from their device.

If the parent `<iframe>` does not include `camera` in its `allow` attribute (or if the browser/user has blocked camera access), the in-browser scan dialog will not appear for that employee. The behavior you will observe is intermittent: the dialog shows for some employees or document types and not others, depending on:

* **Document Verification coverage.** The scan dialog is only offered for document types supported by Document Verification. Unsupported document types fall back to a manual upload control by design.
* **Camera feature policy.** If the parent iframe is missing `allow="camera"`, the embedded experience cannot request camera access from the browser and the scan dialog is suppressed. The employee will still see a manual upload control, but not the scan flow.
* **Browser/OS permission.** Even with the correct `allow` attribute, the end user must grant camera permission when prompted by the browser. A denied or previously blocked permission produces the same symptom.

<Tip>
  **Document Verification**

  If Document Verification is being used, ensure that the iOS webview is configured with `allowsInlineMediaPlayback` set to `true`. This prevents iOS from automatically launching the native full-screen video recorder and allows the recording experience to remain inline within the webview.
</Tip>

## Troubleshooting checklist

* The `embeddedUri` is loaded inside an `<iframe>` whose `allow` attribute contains `camera` (and ideally `geolocation`).
* The `sandbox` attribute includes `allow-scripts`, `allow-same-origin`, `allow-popups`, `allow-forms`, and `allow-storage-access-by-user-activation`.
* The parent page is served over HTTPS. Browsers will not grant camera access to insecure origins.
* The end user has not blocked camera access for your domain in their browser settings.
* The document type the employee is uploading is supported by Document Verification; unsupported documents intentionally fall back to manual upload.