Display modes

The optional config parameter on launchMdlVerification() accepts a LaunchConfig object. See the SDK API Reference for the full type definition.

await session.launchMdlVerification('container', namespaces, {
  displayMode: 'embedded',
  supportEmail: 'support@yourapp.com',
});

Display modes

Mode	Behavior
'modal' (default)	Full-screen overlay with backdrop, close button, and step indicators. Drop-in — no layout work needed.
'embedded'	Content card without backdrop. Fills the container <div>. For multi-step flows where verification is one step among several.
'minimal'	Raw content only (QR code, status screens). No card wrapper. You handle all surrounding styling.

Container considerations

The container <div> must exist in the DOM before you call launchMdlVerification().

• Modal mode (default): The iframe is positioned as a full-screen overlay (position: fixed). The container div just needs to exist — its size doesn’t matter.
• Embedded mode: The iframe fills the container div (width: 100%; height: 100%). Size the container to fit your layout. The demo app uses 600px height.
• Minimal mode: Same sizing as embedded, but the iframe renders raw content only (no card wrapper). You handle all surrounding styling.

Framework notes:

• React: Use a ref or useEffect to ensure the container div is mounted before calling launchMdlVerification().
• Svelte: The container div is available after mount. Call from an onMount callback or event handler.
• Vue: Ensure the container is rendered before calling. Use nextTick() if needed.