> For the complete documentation index, see [llms.txt](https://docs.caf.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.caf.io/caf-docs/quick-start-guides/onboardings-integration/iframe.md).

# iFrame

To integrate the Onboarding process into an iFrame, follow the example code provided below. Ensure that you grant access to the device's camera using the allow attribute and enable geolocation to capture the location for the trust platform dashboard. If your template includes Liveness or FaceAuthenticator features, you'll need to allow the following parameters: `fullscreen`, `accelerometer`, `gyroscope`, `magnetometer`.

```html
<iframe
  src="https://cadastro.io/:token"
  allow="geolocation;camera;fullscreen;accelerometer;gyroscope;magnetometer;"
  allowfullscreen="true"
  style="width: 100vw; height: 100vh; border: 0"
></iframe>
```

### iOS Sensor Permission Requirements for iProov

When your Onboarding template includes a `LIVENESS HUB` step and it is configured to use iProov Provider for face verification, the button implementation below is **required** for proper functionality on iOS devices. This ensures motion sensor permissions are granted from the parent page before the iframe loads.

#### Complete implementation example

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Onboarding iframe Example</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #f5f5f5;
      }

      #startButton {
        padding: 16px 32px;
        font-size: 18px;
        background: #051f61;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
      }

      #startButton:hover {
        background: #1fd660;
      }

      iframe {
        display: none;
        width: 100%;
        height: 100vh;
        border: none;
      }
    </style>
  </head>
  <body>
    <!-- Step 1: Show button to request sensor permission -->
    <button id="startButton">Start Onboarding</button>

    <!-- Step 2: Onboarding iframe (hidden initially) -->
    <!-- IMPORTANT: Replace :token with your actual onboarding token -->
    <iframe
      style="width: 100vw; height: 100vh; border: 0"
      id="onboardingIframe"
      allow="geolocation; camera; fullscreen; accelerometer; gyroscope; magnetometer"
      src="https://cadastro.io/:token"
      allowfullscreen="true"
    ></iframe>

    <script>
      // IMPORTANT: This script must run on the PARENT PAGE that hosts the iframe
      // iOS requires sensor permissions to be requested from the parent page, not from within the iframe
      
      // When user clicks the button
      document
        .getElementById("startButton")
        .addEventListener("click", async () => {
          try {
            // Check if device requires motion permission (iOS 13+ Safari)
            if (typeof DeviceMotionEvent.requestPermission === "function") {
              // Request permission from the parent page (required for iOS)
              const permission = await DeviceMotionEvent.requestPermission();

              if (permission === "granted") {
                // Permission granted - show iframe
                showIframe();
              } else {
                // Permission denied
                alert(
                  "Sensor access is required for face verification. Please allow access in your browser settings."
                );
              }
            } else {
              // No permission needed (Android, Desktop, older iOS)
              showIframe();
            }
          } catch (error) {
            console.error("Error:", error);
            alert(
              "Error requesting permissions. Please try again or check your browser settings."
            );
          }
        });

      // Function to show the iframe
      function showIframe() {
        document.getElementById("startButton").style.display = "none";
        document.getElementById("onboardingIframe").style.display = "block";
      }

      // Optional: Listen for messages from the iframe
      window.addEventListener("message", (event) => {
        // Validate origin for security
        // IMPORTANT: Replace with your onboarding domain
        if (event.origin !== "https://cadastro.io") return;
        
        // Handle onboarding completion or other events
        console.log("Onboarding event:", event.data);
      });
    </script>
  </body>
</html>
```

{% hint style="warning" %}
The Onboarding service may not function correctly within an iFrame if the user has **Block third-party cookies enabled** in their browser. This is particularly common in anonymous browser sessions.
{% endhint %}

{% hint style="warning" %}
If you encounter issues with the permission pop-up not appearing, consider specifying the allowed origin in the allow attribute or creating a Content Security Policy (CSP) to define the trusted sources more explicitly.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.caf.io/caf-docs/quick-start-guides/onboardings-integration/iframe.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
