Dynamic Branding & UX: Customizing Didit's iFrame with JavaScript

Seamless IntegrationIntegrate Didit's robust identity verification directly into your web application using the InContext iFrame method, offering a quick setup and embedded experience.

Dynamic CustomizationUtilize JavaScript's postMessage API to communicate with and dynamically style the embedded iFrame, ensuring your brand's look and feel are consistently maintained throughout the verification process.

Enhanced User ExperienceHandle real-time events from the iFrame, such as verification completion or cancellation, to provide immediate feedback and guide users through a smooth, branded journey.

Didit's Flexible ArchitectureDidit's modular and developer-first approach, including the InContext iFrame and JavaScript SDK, empowers developers to build highly customized and efficient identity verification workflows with Free Core KYC.

Integrating Didit's InContext iFrame for Identity Verification

In today's digital landscape, robust identity verification is paramount for security, compliance, and fraud prevention. Didit offers a range of integration methods, and for businesses seeking a quick setup with an embedded experience, the InContext iFrame stands out. This method allows you to embed Didit's powerful ID Verification capabilities directly within your web application, keeping users on your domain. While simple to implement, the true power of the iFrame lies in its ability to be dynamically customized using JavaScript, transforming a standard verification flow into a seamlessly branded user journey.

The InContext iFrame is ideal for scenarios where you want a contained verification process without redirecting users. It supports both UniLink (no backend required for quick setup) and API Session (for full customization with a backend). By embedding the iFrame, you can leverage Didit's advanced features, including OCR, MRZ parsing, and barcode decoding for document verification, while maintaining control over the surrounding user interface.

Dynamic Customization with JavaScript's postMessage API

While an iFrame provides an embedded experience, maintaining brand consistency across the entire user journey is crucial. This is where JavaScript's postMessage API becomes invaluable. Since the iFrame loads content from a different origin (Didit's verification service), direct DOM manipulation is blocked by same-origin policy. However, postMessage enables secure cross-origin communication between your parent page and the embedded Didit iFrame.

By listening for specific events or messages from the iFrame and sending messages to it, you can dynamically adjust its appearance or behavior. For instance, you might want to:

• Change the iFrame's height or width based on the content loaded within.
• Trigger specific actions on your parent page when a verification step is completed inside the iFrame.
• Pass styling parameters to the iFrame to match your application's theme, if supported by Didit's iFrame configuration.

A typical setup involves:

1. Embedding the Didit iFrame with its src attribute pointing to the verification URL (e.g., https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64).
2. Adding an event listener to your parent window to catch messages from the iFrame:

window.addEventListener('message', (event) => {
  // Ensure the message is from a trusted origin (Didit's domain)
  if (event.origin !== 'https://verify.didit.me') return;

  const data = event.data;
  if (data.type === 'didit-verification-event') {
    console.log('Didit iFrame event:', data.payload);
    // Handle events like 'verification_completed', 'verification_failed', etc.
  }
});

This allows your application to react intelligently to the iFrame's status, guiding the user experience more effectively.

Enhancing User Experience and Event Handling

A truly seamless user experience goes beyond just embedding. It involves providing clear feedback, managing states, and gracefully handling different outcomes of the verification process. Didit's iFrame integration, especially when combined with JavaScript, allows for sophisticated event handling that can significantly improve UX.

For example, upon successful verification (which your backend would confirm via webhooks), you can programmatically close the modal containing the iFrame, display a success message, and onboard the user. If a verification fails or is canceled, you can provide options to retry or contact support.

Consider a scenario where you're using Didit's ID Verification to onboard new users. After the user completes the document capture and submission within the iFrame, Didit processes the data, including performing Passive & Active Liveness checks to prevent deepfake fraud. Your backend receives a webhook with the verification results. You can then use JavaScript to:

• Hide a loading spinner once the iFrame sends a 'verification_submitted' event.
• Update the UI to show 'Verification Pending' while your backend processes the webhook.
• Display 'Verification Approved' or 'Verification Declined' based on the final status received by your backend and communicated back to the frontend.

This level of dynamic interaction ensures that users are always informed and engaged, reducing abandonment rates and building trust in your platform.

Choosing the Right Integration: iFrame vs. JavaScript SDK

While the InContext iFrame offers quick setup and embedded convenience, Didit also provides a powerful JavaScript SDK for those requiring maximum programmatic control. The SDK, recommended for production applications, offers session management, event callbacks, and full TypeScript support, making it ideal for complex applications built with React, Vue, Angular, or vanilla JS.

The iFrame is excellent for minimal setup time, often less than 1 minute, and for scenarios where you need a contained, out-of-the-box verification flow. However, for real-time event callbacks and complete programmatic control over the user flow, the JavaScript SDK provides superior flexibility. Both methods support cross-device verification and white-labeling, ensuring brand consistency.

Didit's commitment to a developer-first approach means you have options to integrate identity verification in a way that best suits your technical stack and user experience goals. Whether through the simplicity of the iFrame or the power of the SDK, you can leverage Didit's AI-native platform to build secure and efficient identity workflows.

How Didit Helps

Didit provides the foundational building blocks for creating highly customizable and secure identity verification experiences. Our modular architecture allows you to plug-and-play identity checks like ID Verification, Passive & Active Liveness, and 1:1 Face Match & Face Search, all powered by cutting-edge AI. For embedded solutions, the InContext iFrame offers an incredibly fast setup, allowing you to deploy robust verification with minimal effort. For those requiring deeper integration and dynamic control, our JavaScript SDK provides the tools to build bespoke user journeys, handling real-time events and maintaining complete brand continuity.

Didit's platform is designed to be developer-first, offering an instant sandbox, comprehensive public documentation, and clean APIs. We eliminate setup fees and offer a Free Core KYC tier, making enterprise-grade identity verification accessible. Our AI-native approach ensures high accuracy and automation, reducing the need for manual reviews and streamlining your operations. With Didit, you can orchestrate risk and automate trust globally, ensuring a secure and user-friendly experience for your customers while meeting compliance requirements.

Ready to Get Started?

Ready to see Didit in action? Get a free demo today.

Start verifying identities for free with Didit's free tier.