> ## Documentation Index > Fetch the complete documentation index at: https://docs.didit.me/llms.txt > Use this file to discover all available pages before exploring further. # Iframe-Identitätsverifizierung: Eingebettetes Web-KYC > Didit: KYC, KYB, AML und Liveness per Iframe einbetten. UniLink ohne Code oder API. Ab $0.33 pro vollständiger KYC-Prüfung, $10 gratis/Monat. Iframe-Integrations-Prompt Prompt in die Zwischenablage kopieren \

\`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:

\
```> ⚠️ **Erforderlich**: Das Attribut `allow` ist für den Kamerazugriff bei der Liveness-Erkennung zwingend erforderlich.### Wichtige Vorteile- **Weniger als 1 Minute Einrichtung**: Kein Backend, keine API-Schlüssel
- **Keine Konfiguration nötig**: Die Callback-URL wird in den Workflow-Einstellungen festgelegt
- **Ideal für MVPs**: Sofort loslegen***## API-Sitzungs-iframe (mit Backend)Für fortgeschrittene Integrationen, die eine Anpassung pro Sitzung benötigen.### Wann verwenden- Übergeben Sie pro Sitzung eigene `vendor_data` oder `metadata`
- Legen Sie pro Sitzung unterschiedliche Callback-URLs fest
- Verfolgen Sie Sitzungen serverseitig, bevor die Verifizierung beginnt
- Ordnen Sie Sitzungen Ihren Benutzer-IDs zu### Implementierung**Schritt 1: Sitzung erstellen (Backend)**Die Antwort beim Erstellen der Sitzung enthält ein Feld namens **`url`**. Verwenden Sie diesen Wert als `src` des iframes.```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 });
});
```**Schritt 2: Im iframe einbetten (Frontend)**```html theme={null}



```***## Auf Ereignisse lauschen (postMessage)Die Verifizierungsseite sendet Ereignisse an das übergeordnete Fenster. Jede Nachricht hat diese Struktur:```typescript theme={null}
{
  type: 'didit:',   // e.g. 'didit:completed'
  data: { /* payload */ }, // event-specific; may be undefined
  timestamp: 1718000000000 // ms epoch
}
```Der Payload ist **verschachtelt**: Lesen Sie `event.data.data.sessionId`, nicht `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
  }
});
```Wichtige Ereignisse: `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` sowie `didit:layout` (`{ contentHeight, colorScheme, dir }`, siehe [unten](#iframe-größe-anhand-von-diditlayout-festlegen)). Die [Referenz der Ereignisse im JavaScript-SDK](https://docs.didit.me/de/integration/web-sdks/javascript-sdk.md#ereignisreferenz) listet die Verifizierungsereignisse auf, die als typisierte Callbacks verfügbar sind. Ab Version 0.5.0 verarbeitet das SDK Layout-Nachrichten intern, anstatt sie an `onEvent` weiterzugeben.### Iframe-Größe anhand von `didit:layout` festlegenDie Verifizierungsseite teilt Ihnen mit einer `didit:layout`-Nachricht mit, wie viel Platz sie benötigt. Sie sendet eine Nachricht beim Laden und eine weitere, sobald sich Inhaltshöhe, Design oder Textrichtung ändern:```typescript theme={null}
{
  type: 'didit:layout',
  data: {
    contentHeight: 612,    // CSS px
    colorScheme: 'light',  // 'light' | 'dark'
    dir: 'ltr'             // 'ltr' | 'rtl'
  },
  timestamp: 1718000000000
}
```| Feld | Typ | Beschreibung |
| - | - | - |
| `contentHeight` | `number` | Die natürliche Höhe des Seiteninhalts in CSS-Pixeln, einschließlich der oberen Leiste |
| `colorScheme` | `'light' \| 'dark'` | Das Design, in dem die Seite angezeigt wird. Bei White-Label-Farben entscheidet Ihre Hintergrundfarbe darüber und nicht die Geräteeinstellung |
| `dir` | `'ltr' \| 'rtl'` | Die Textrichtung der Sprache der Seite |> [!NOTE]
>
> Um `didit:layout` in Ihrem eigenen iframe zu empfangen, fügen Sie `sdk_presentation=embedded` zur Verifizierungs-URL hinzu. Ab Version 0.5.0 legt das [JavaScript-SDK](https://docs.didit.me/de/integration/web-sdks/javascript-sdk.md) die Präsentationsart für Sie fest. Ohne Präsentationsparameter verwendet die Seite ihr Standalone-Layout und sendet keine Layout-Nachrichten.Dieser Host folgt den [empfohlenen Größen](#iframe-größe): eine feste Karte ab 1024px Breite, Vollbild bei 540px und darunter, und dazwischen ein iframe mit 500px Breite, das die von der Seite gemeldete Höhe einnimmt:```html theme={null}





```Zwischen 541px und 1023px verwendet dieses Beispiel eine Starthöhe von 700px, bis eine Layout-Nachricht eintrifft, begrenzt auf 90% der sichtbaren Fensterhöhe. Die Größen für Desktop und Mobilgeräte gelten sofort. Auf Mobilgeräten deckt das Iframe das Fenster ab, daher sollten Sie in Ihrer Anwendung eine Möglichkeit bereitstellen, die Verifizierung zu verlassen. Verwenden Sie `colorScheme` und `dir`, um Steuerelemente, die Sie um das iframe herum platzieren, an das Design und die Textrichtung der Seite anzupassen.Wenn die Verbindung des Benutzers abbricht, zeigt die Seite einen Bildschirm „Keine Internetverbindung“, der sich von selbst schließt, sobald die Verbindung wieder besteht. Wählt der Benutzer dort **Exit Verification**, sendet die Seite `didit:error` mit `error: "network_error"` und danach `didit:cancelled`. Schließen Sie das iframe bei `didit:cancelled`.***## Modal-ImplementierungFür ein ausgereiftes Modal-Erlebnis, das sich über Ihre Seite legt:### HTML/CSS/JS```html theme={null}



  


  

  

    

      
      
    

  


  


```***## React-KomponenteEine wiederverwendbare React-Komponente für die Verifizierung im 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()}
    >