\`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: \ ```> ⚠️ **आवश्यक**: लाइवनेस डिटेक्शन के दौरान कैमरा एक्सेस के लिए `allow` एट्रिब्यूट अनिवार्य है।### मुख्य लाभ- **1 मिनट से कम सेटअप**: कोई बैकएंड नहीं, कोई API कुंजी नहीं - **शून्य कॉन्फ़िगरेशन**: कॉलबैक URL वर्कफ़्लो सेटिंग्स में सेट होता है - **MVP के लिए आदर्श**: तुरंत शुरू करें***## API सत्र iframe (बैकएंड के साथ)उन उन्नत इंटीग्रेशन के लिए जिन्हें प्रति-सत्र अनुकूलन चाहिए।### कब उपयोग करें- हर सत्र के लिए कस्टम `vendor_data` या `metadata` पास करें - हर सत्र के लिए अलग-अलग कॉलबैक URL सेट करें - सत्यापन शुरू होने से पहले सर्वर-साइड पर सत्र ट्रैक करें - सत्रों को अपनी उपयोगकर्ता ID से जोड़ें### इम्प्लीमेंटेशन**चरण 1: सत्र बनाएँ (बैकएंड)**सत्र-निर्माण रिस्पॉन्स में **`url`** नाम का फ़ील्ड होता है, इसे iframe के `src` के रूप में उपयोग करें।```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 }); }); ```**चरण 2: iframe में एम्बेड करें (फ़्रंटएंड)**```html theme={null} ```***## इवेंट सुनना (postMessage)सत्यापन पेज पैरेंट विंडो को इवेंट भेजता है। हर मैसेज का यह एनवेलप होता है:```typescript theme={null} { type: 'didit:', // e.g. 'didit:completed' data: { /* payload */ }, // event-specific; may be undefined timestamp: 1718000000000 // ms epoch } ```पेलोड **नेस्टेड** है: `event.data.sessionId` नहीं, `event.data.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 } }); ```मुख्य इवेंट: `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`, और `didit:layout` (`{ contentHeight, colorScheme, dir }`, देखें [नीचे](#diditlayout-से-iframe-का-आकार-तय-करें))। [JavaScript SDK इवेंट संदर्भ](https://docs.didit.me/hi/integration/web-sdks/javascript-sdk.md#इवेंट-संदर्भ) में वे सत्यापन इवेंट सूचीबद्ध हैं जो टाइप्ड कॉलबैक के रूप में उपलब्ध हैं। संस्करण 0.5.0 से, SDK layout मैसेज को अंदर से संभालता है और उन्हें `onEvent` को नहीं भेजता।### `didit:layout` से iframe का आकार तय करेंसत्यापन पेज `didit:layout` मैसेज के साथ बताता है कि उसे कितनी जगह चाहिए। यह लोड होने पर एक बार भेजता है, और जब भी उसकी कंटेंट की ऊँचाई, थीम या टेक्स्ट दिशा बदलती है, तब फिर से भेजता है:```typescript theme={null} { type: 'didit:layout', data: { contentHeight: 612, // CSS px colorScheme: 'light', // 'light' | 'dark' dir: 'ltr' // 'ltr' | 'rtl' }, timestamp: 1718000000000 } ```| फ़ील्ड | टाइप | विवरण | | - | - | - | | `contentHeight` | `number` | पेज के कंटेंट की स्वाभाविक ऊँचाई CSS पिक्सेल में, शीर्ष बार सहित | | `colorScheme` | `'light' \| 'dark'` | वह थीम जिसमें पेज दिखाया जाता है। व्हाइट लेबल रंगों के साथ, पृष्ठभूमि का रंग तय करता है, डिवाइस सेटिंग नहीं | | `dir` | `'ltr' \| 'rtl'` | पेज की भाषा की टेक्स्ट दिशा |> [!NOTE] > > अपने iframe में `didit:layout` प्राप्त करने के लिए, उसके सत्यापन URL में `sdk_presentation=embedded` जोड़ें। संस्करण 0.5.0 से, [JavaScript SDK](https://docs.didit.me/hi/integration/web-sdks/javascript-sdk.md) यह प्रेज़ेंटेशन स्वयं सेट करता है। प्रेज़ेंटेशन पैरामीटर के बिना, पेज अपना स्टैंडअलोन लेआउट उपयोग करता है और layout मैसेज नहीं भेजता।यह होस्ट [अनुशंसित आकार](#iframe-का-आकार) का पालन करता है: 1024px और उससे अधिक चौड़ाई पर एक निश्चित कार्ड, 540px और उससे कम पर पूरी स्क्रीन, और इनके बीच 500px चौड़ा iframe जो पेज द्वारा बताई गई ऊँचाई लेता है:```html theme={null} ```541px से 1023px के बीच, यह उदाहरण layout मैसेज आने तक 700px की शुरुआती ऊँचाई का उपयोग करता है, जो दिखाई दे रही विंडो की ऊँचाई के 90% तक सीमित है। कंप्यूटर और फ़ोन के आकार तुरंत लागू होते हैं। फ़ोन पर iframe पूरी विंडो को ढक लेता है, इसलिए अपने होस्ट में सत्यापन से बाहर निकलने का तरीका दें। iframe के चारों ओर बनाए गए कंट्रोल को पेज की थीम और टेक्स्ट दिशा से मिलाने के लिए `colorScheme` और `dir` का उपयोग करें।यदि उपयोगकर्ता का कनेक्शन टूट जाता है, तो पेज "No internet connection" स्क्रीन दिखाता है, जो कनेक्शन वापस आने पर अपने आप बंद हो जाती है। यदि उपयोगकर्ता वहाँ **Exit Verification** चुनता है, तो पेज `error: "network_error"` के साथ `didit:error` भेजता है, फिर `didit:cancelled`। `didit:cancelled` मिलने पर iframe बंद करें।***## मोडल इम्प्लीमेंटेशनआपके पेज पर ओवरले होने वाले एक परिष्कृत मोडल अनुभव के लिए:### HTML/CSS/JS```html theme={null} ```***## React कंपोनेंटमोडल-आधारित सत्यापन के लिए एक पुन: उपयोग योग्य React कंपोनेंट:```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()} >