Seamless Identity: Didit Iframe Integration Guide

In today’s digital landscape, a frictionless user experience is paramount. Identity verification is often a necessary evil, introducing friction into onboarding and conversion funnels. Didit addresses this challenge with a powerful and easy-to-implement iframe integration, allowing you to embed a secure and compliant identity verification flow directly within your web application. This guide provides a comprehensive overview of the Didit iframe integration process, configuration options, and best practices for maximizing user experience and security.

Key Takeaway 1: Didit’s iframe integration provides a secure and compliant way to embed identity verification directly into your web application without complex server-side integrations.

Key Takeaway 2: The iframe approach minimizes development effort and allows for rapid deployment of identity verification features.

Key Takeaway 3: Customization of the iframe appearance and behavior is available through readily available parameters and event listeners.

Key Takeaway 4: Didit’s pay-as-you-go pricing ensures you only pay for successful verifications, making it a cost-effective solution.

Understanding the Didit Iframe Integration

The embedded identity verification process using an iframe involves hosting Didit’s verification flow within a secure iframe element on your website. This approach offers several benefits:

• Reduced Development Effort: Minimal server-side code is required. The heavy lifting of identity verification is handled by Didit’s platform.
• Enhanced Security: Didit’s security infrastructure is isolated within the iframe, minimizing the risk of data breaches.
• Improved UX: Users remain on your website throughout the verification process, creating a seamless experience.
• Faster Time to Market: Quickly deploy identity verification features without extensive development cycles.

The core principle is to generate a secure verification URL from Didit’s API, then embed that URL within an <iframe> tag in your HTML. This URL contains all the necessary parameters to initiate the verification flow, including the user's identifier, verification type, and any custom configurations.

Iframe Configuration & Parameters

The iframe configuration is controlled through several key parameters appended to the verification URL. Here are some essential parameters:

• user_id: (Required) A unique identifier for the user.
• verification_type: (Required) Specifies the type of verification flow (e.g., id_verification, liveness, document_verification).
• redirect_url: (Optional) The URL to redirect the user to after verification is complete (success or failure).
• theme: (Optional) Customize the appearance of the iframe (e.g., light, dark).
• width: (Optional) Sets the iframe width in pixels (default: 600px).
• height: (Optional) Sets the iframe height in pixels (default: 700px).
• language: (Optional) Specifies the language of the verification flow (e.g., en, es, fr).

Example URL:

https://business.didit.me/iframe?user_id=user123&verification_type=id_verification&redirect_url=https://yourwebsite.com/verification-complete&theme=dark&width=800&height=800

Implementing the Iframe in Your Web Application

Integrating the Didit iframe integration into your application is straightforward. Here's a basic HTML example:

<iframe src="https://business.didit.me/iframe?user_id=user123&verification_type=id_verification&redirect_url=https://yourwebsite.com/verification-complete" width="800" height="800" frameborder="0"></iframe>

Important Considerations:

• HTTPS: Ensure your website is served over HTTPS to maintain security.
• CORS: Didit’s iframe is configured to support cross-origin requests.
• Responsiveness: Consider using responsive design techniques to ensure the iframe adapts to different screen sizes.

Handling Verification Events & Callbacks

Didit provides event listeners and callbacks to notify your application about the verification process. The primary mechanism is the postMessage API. You can listen for events such as verification_started, verification_completed, verification_failed, and verification_error. These events contain data about the verification status, including any error messages or verification results.

Example JavaScript Event Listener:

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://business.didit.me') {
    return;
  }

  const data = JSON.parse(event.data);

  switch (data.event) {
    case 'verification_completed':
      console.log('Verification completed successfully:', data.result);
      // Redirect user or update UI
      break;
    case 'verification_failed':
      console.error('Verification failed:', data.error);
      // Display error message to user
      break;
  }
});

How Didit Helps

Didit simplifies the embedded identity verification process with:

• Comprehensive Verification Suite: Access a wide range of verification modules, including ID verification, liveness detection, AML screening, and more.
• Developer-Friendly API: Well-documented API and SDKs for seamless integration.
• Scalable Infrastructure: Handle high volumes of verification requests with ease.
• Global Coverage: Support for 14,000+ document types across 220+ countries.
• Competitive Pricing: Pay-as-you-go pricing with no hidden fees.

Ready to Get Started?

Start building a more secure and user-friendly experience today! Explore our documentation and get started with a free Didit account:

• Didit Documentation
• Didit Business Console
• Didit Pricing