> 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/caf-product-guides-pt-br/guias-de-inicio-rapido/onboardings-integration/iframe.md).

# iFrame

Para integrar o processo de Onboarding em um iFrame, siga o exemplo de código fornecido abaixo. Certifique-se de conceder acesso à câmera do dispositivo usando o atributo allow e habilitar a geolocalização para capturar a localização para o painel da plataforma de confiança. Se o seu template incluir recursos de Liveness ou FaceAuthenticator, você precisará permitir os seguintes parâmetros: `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>
```

### Requisitos de permissão de sensores no iOS para iProov

Quando o seu template de Onboarding inclui uma `LIVENESS HUB` etapa e está configurado para usar o provedor iProov para verificação facial, a implementação do botão abaixo é **obrigatória** para o funcionamento correto em dispositivos iOS. Isso garante que as permissões dos sensores de movimento sejam concedidas pela página pai antes de o iframe ser carregado.

#### Exemplo completo de implementação

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Exemplo de iframe de Onboarding</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>
    <!-- Etapa 1: Exibir botão para solicitar permissão do sensor -->
    <button id="startButton">Iniciar Onboarding</button>

    <!-- Etapa 2: iframe de Onboarding (oculto inicialmente) -->
    <!-- IMPORTANTE: Substitua :token pelo seu token real de onboarding -->
    <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>
      // IMPORTANTE: Este script deve ser executado na PÁGINA PAI que hospeda o iframe
      // O iOS exige que as permissões do sensor sejam solicitadas a partir da página pai, e não de dentro do iframe
      
      // Quando o usuário clicar no botão
      document
        .getElementById("startButton")
        .addEventListener("click", async () => {
          try {
            // Verifique se o dispositivo requer permissão de movimento (Safari do iOS 13+)
            if (typeof DeviceMotionEvent.requestPermission === "function") {
              // Solicite permissão a partir da página pai (necessário para iOS)
              const permission = await DeviceMotionEvent.requestPermission();

              if (permission === "granted") {
                // Permissão concedida - exibir iframe
                showIframe();
              } else {
                // Permissão negada
                alert(
                  "O acesso ao sensor é necessário para a verificação facial. Permita o acesso nas configurações do seu navegador."
                );
              }
            } else {
              // Nenhuma permissão necessária (Android, desktop, iOS mais antigos)
              showIframe();
            }
          } catch (error) {
            console.error("Erro:", error);
            alert(
              "Erro ao solicitar permissões. Tente novamente ou verifique as configurações do seu navegador."
            );
          }
        });

      // Função para exibir o iframe
      function showIframe() {
        document.getElementById("startButton").style.display = "none";
        document.getElementById("onboardingIframe").style.display = "block";
      }

      // Opcional: ouvir mensagens do iframe
      window.addEventListener("message", (event) => {
        // Validar a origem por segurança
        // IMPORTANTE: Substitua pelo seu domínio de onboarding
        if (event.origin !== "https://cadastro.io") return;
        
        // Tratar a conclusão do onboarding ou outros eventos
        console.log("Evento de onboarding:", event.data);
      });
    </script>
  </body>
</html>
```

{% hint style="warning" %}
O serviço de Onboarding pode não funcionar corretamente dentro de um iFrame se o usuário tiver **Bloqueio de cookies de terceiros ativado** no navegador.
{% endhint %}

{% hint style="warning" %}
Se você encontrar problemas com o pop-up de permissão não aparecendo, considere especificar a origem permitida no atributo allow ou criar uma Política de Segurança de Conteúdo (CSP) para definir as fontes confiáveis de forma mais explícita.
{% 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/caf-product-guides-pt-br/guias-de-inicio-rapido/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.
