> For the complete documentation index, see [llms.txt](https://docs.vaultid.com.br/workspace/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vaultid.com.br/workspace/cess/hubdeautenticacao/telas-e-visualizacao.md).

# Telas e Visualização

O Certifier Auth Hub oferece uma interface pronta para uso com dois fluxos de integração distintos: o **Fluxo Automatizado** (via captura de eventos em tempo real no Javascript) e o **Fluxo Manual** (onde o usuário final lê o OTP gerado na tela do Hub e o insere no formulário do seu site).

{% hint style="success" icon="user-robot" %}
**Fluxo Automatizado (Recomendado)**

A aplicação escuta o evento `signature_session_otp` enviado pelo Hub, obtém o OTP de forma invisível, envia-o para o backend e fecha o popup automaticamente.
{% endhint %}

{% hint style="warning" icon="transmission" %}
**Fluxo Manual (Alternativo)**

Caso prefira não integrar os eventos de `postMessage`, o usuário final pode ler o código OTP diretamente na interface do Hub e digitá-lo/copiá-lo manualmente no formulário do seu site. Não é necessário implementar a escuta de eventos.
{% endhint %}

#### Previsualização das Telas

Utilize os botões abaixo para alternar a visualização das telas entre o tamanho recomendado de **Popup (460x680)** e em **Tela Cheia / Fullscreen (1280x720)**.

{% tabs %}
{% tab title="Modo Poupup (460x680)" icon="optin-monster" %}

1. Seleção de Certificadoras                                   <br>

   <div align="center"><figure><img src="https://2490214185-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhabHnffC5trhqRn7hj%2Fuploads%2FNta1bTK1nKO7A3aC3rDO%2Fimage.png?alt=media&amp;token=4e50ab7d-0bbe-4ad3-bb02-727d5ce29a34" alt=""><figcaption></figcaption></figure></div>

Apresenta as opções de certificadoras disponíveis para o usuário iniciar o fluxo.

2. Exibição de Código OTP

<figure><img src="https://2490214185-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhabHnffC5trhqRn7hj%2Fuploads%2Fa1F6rYjb3KCRpL3nrEmX%2Fimage.png?alt=media&amp;token=0f14dc6c-1d55-4cf0-ad96-8ba7fa796a85" alt=""><figcaption></figcaption></figure>

Exibe o código de uso único gerado e o cronômetro com o tempo de expiração do OTP, possibilitando a cópia manual pelo usuário final.
{% endtab %}

{% tab title="Modo Tela Cheia (1280x720)" icon="chalkboard-user" %}

1. Seleção de Certificadoras

<figure><img src="https://2490214185-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhabHnffC5trhqRn7hj%2Fuploads%2FE7MzWqEjAB2CM6tLADuN%2Fimage.png?alt=media&amp;token=46b54412-7969-447c-a638-695818b71ce0" alt=""><figcaption></figcaption></figure>

Apresenta as opções de certificadoras disponíveis para o usuário iniciar o fluxo.

2. Exibição de Código OTP

<figure><img src="https://2490214185-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhabHnffC5trhqRn7hj%2Fuploads%2FPcHFXNNV7MRGtTwyZXG7%2Fimage.png?alt=media&amp;token=f2e77d5f-c6d3-4087-9313-26b3f452c48f" alt=""><figcaption></figcaption></figure>

Exibe o código de uso único gerado e o cronômetro com o tempo de expiração do OTP, possibilitando a cópia manual pelo usuário final.
{% endtab %}
{% endtabs %}