\`Embed Didit identity verification into my web page using an iframe. \## Two Options \### Option A: UniLink (no backend — fastest setup) Copy your UniLink URL from Didit Console > Workflows > Copy Link. It looks like: https://verify.didit.me/u/ Embed it directly: \ ```> ⚠️ **Obligatorio**: el atributo `allow` es imprescindible para acceder a la cámara durante la detección de vida.### Ventajas principales- **Configuración en menos de 1 minuto**: sin backend y sin claves de API - **Cero configuración**: la URL de callback se define en la configuración del flujo - **Ideal para MVP**: empieza de inmediato***## Iframe con sesión por API (con backend)Para integraciones avanzadas que necesitan personalización por sesión.### Cuándo usarlo- Enviar `vendor_data` o `metadata` personalizados por sesión - Definir URL de callback distintas por sesión - Hacer seguimiento de las sesiones desde el servidor antes de que empiece la verificación - Asociar las sesiones con los ID de tus usuarios### Implementación**Paso 1: Crear una sesión (backend)**La respuesta de creación de sesión incluye un campo llamado **`url`**: úsalo como `src` del iframe.```javascript theme={null} // Node.js / Express app.post('/api/create-verification', async (req, res) => { const { userId } = req.body; const response = await fetch('https://verification.didit.me/v3/session/', { method: 'POST', headers: { 'x-api-key': process.env.DIDIT_API_KEY, 'Content-Type': 'application/json', }, body: JSON.stringify({ workflow_id: process.env.DIDIT_WORKFLOW_ID, vendor_data: userId, callback: 'https://yourapp.com/verification-callback', metadata: { source: 'web-app', timestamp: Date.now() }, }), }); if (!response.ok) { return res.status(response.status).send(await response.text()); } // 201 per OpenAPI: { session_id, session_number, session_token, url, vendor_data, // metadata, status, workflow_id, workflow_version, callback } const session = await response.json(); res.json({ sessionId: session.session_id, verificationUrl: session.url }); }); ```**Paso 2: Insertar en un iframe (frontend)**```html theme={null} ```***## Escuchar eventos (postMessage)La página de verificación envía eventos a la ventana que la contiene. Todos los mensajes tienen esta estructura:```typescript theme={null} { type: 'didit:', // e.g. 'didit:completed' data: { /* payload */ }, // event-specific; may be undefined timestamp: 1718000000000 // ms epoch } ```El payload está **anidado**: lee `event.data.data.sessionId`, no `event.data.sessionId`:```javascript theme={null} window.addEventListener('message', (event) => { // Use your white-label domain here if you have one configured if (event.origin !== 'https://verify.didit.me') return; const { type, data } = event.data || {}; if (type === 'didit:ready') { console.log('Session ID:', data.sessionId); // available as soon as the page loads } if (type === 'didit:completed') { console.log('Done:', data.sessionId, data.status); // e.g. "Approved" | "Declined" | "In Review" // UI hint only — the canonical decision arrives on your backend via webhook } }); ```Eventos principales: `didit:ready` (`{ sessionId }`), `didit:started`, `didit:step_started` / `didit:step_completed` / `didit:step_changed` (`{ step, ... }`), `didit:status_updated` (`{ status }`), `didit:completed` (`{ sessionId, status }`), `didit:cancelled`, `didit:error` (`{ error, step? }`), `didit:close_request` y `didit:layout` (`{ contentHeight, colorScheme, dir }`, consulta [más abajo](#dimensionar-el-iframe-con-diditlayout)). La [referencia de eventos del SDK de JavaScript](https://docs.didit.me/es/integration/web-sdks/javascript-sdk.md#referencia-de-eventos) enumera los eventos de verificación disponibles como callbacks tipados. A partir de la versión 0.5.0, el SDK gestiona los mensajes de layout internamente en lugar de reenviarlos a `onEvent`.### Dimensionar el iframe con `didit:layout`La página de verificación te indica cuánto espacio necesita mediante un mensaje `didit:layout`. Envía uno al cargarse y otro cada vez que cambian la altura de su contenido, el tema o la dirección del texto:```typescript theme={null} { type: 'didit:layout', data: { contentHeight: 612, // CSS px colorScheme: 'light', // 'light' | 'dark' dir: 'ltr' // 'ltr' | 'rtl' }, timestamp: 1718000000000 } ```| Campo | Tipo | Descripción | | - | - | - | | `contentHeight` | `number` | La altura natural del contenido de la página en píxeles CSS, incluida la barra superior | | `colorScheme` | `'light' \| 'dark'` | El tema con el que se muestra la página. Con colores de marca blanca, lo determina tu color de fondo, no la configuración del dispositivo | | `dir` | `'ltr' \| 'rtl'` | La dirección del texto en el idioma de la página |> [!NOTE] > > Para recibir `didit:layout` en tu propio iframe, añade `sdk_presentation=embedded` a su URL de verificación. A partir de la versión 0.5.0, el [SDK de JavaScript](https://docs.didit.me/es/integration/web-sdks/javascript-sdk.md) configura la presentación por ti. Sin un parámetro de presentación, la página usa su layout independiente y no envía mensajes de layout.Este host sigue los [tamaños recomendados](#tamaño-del-iframe): una tarjeta fija a partir de 1024px de ancho, pantalla completa a 540px o menos y, entre ambos, un iframe de 500px de ancho que adopta la altura que indica la página:```html theme={null} ```Entre 541px y 1023px, este ejemplo usa una altura inicial de 700px hasta que llega un mensaje de layout, con un máximo del 90% de la altura visible de la ventana. Los tamaños para computadoras y teléfonos se aplican de inmediato. En teléfonos, el iframe cubre la ventana, así que ofrece en tu host una forma de salir de la verificación. Usa `colorScheme` y `dir` para que los controles que dibujes alrededor del iframe coincidan con el tema y la dirección del texto de la página.Si la conexión del usuario se cae, la página muestra una pantalla "No internet connection" que se cierra sola cuando se recupera la conexión. Si el usuario elige **Exit Verification** en ella, la página envía `didit:error` con `error: "network_error"` y después `didit:cancelled`: cierra el iframe al recibir `didit:cancelled`.***## Implementación en modalPara una experiencia pulida con el modal que se superpone a tu página:### HTML/CSS/JS```html theme={null} ```***## Componente de ReactUn componente de React reutilizable para la verificación en un modal:```tsx theme={null} import { useState, useEffect } from 'react'; interface DiditInContextProps { /** * Either the `url` returned by POST /v3/session/ (API session) * or your UniLink URL copied from the Console (Workflows → Copy Link). * Don't derive the UniLink yourself — the path segment is a 22-character * base64url encoding of the workflow UUID's raw bytes, not btoa(workflowId). */ verificationUrl: string; isOpen: boolean; onClose: () => void; onComplete?: (sessionId: string, status: string) => void; } export function DiditInContext({ verificationUrl, isOpen, onClose, onComplete }: DiditInContextProps) { const [iframeSrc, setIframeSrc] = useState(''); useEffect(() => { if (isOpen) { setIframeSrc(verificationUrl); document.body.style.overflow = 'hidden'; } else { setIframeSrc(''); document.body.style.overflow = ''; } }, [isOpen, verificationUrl]); // Listen for postMessage from iframe // Messages look like: { type: 'didit:', data: {...}, timestamp } useEffect(() => { const handleMessage = (event: MessageEvent) => { // Use your white-label domain here if you have one configured if (event.origin !== 'https://verify.didit.me') return; if (event.data?.type === 'didit:completed' && onComplete) { onComplete(event.data.data?.sessionId, event.data.data?.status); onClose(); } }; window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage); }, [onComplete, onClose]); // Handle escape key useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape' && isOpen) onClose(); }; document.addEventListener('keydown', handleEscape); return () => document.removeEventListener('keydown', handleEscape); }, [isOpen, onClose]); if (!isOpen) return null; return (

e.target === e.currentTarget && onClose()} >