Seamless UI Customization: Didit's JavaScript SDK and Tailwind CSS

Brand Consistency is KeyMaintaining a unified brand experience across all touchpoints, including identity verification, builds user trust and loyalty. Didit's flexible integration options make this achievable.

JavaScript SDK for ControlDidit's JavaScript SDK offers full programmatic control over the verification flow, enabling deep customization and seamless integration into modern web frameworks like React, Vue, and Angular.

Tailwind CSS for Rapid StylingLeverage the utility-first approach of Tailwind CSS to quickly and efficiently style Didit's UI components, ensuring a perfect match with your existing design system without complex overrides.

Didit's White-Label SolutionBeyond direct styling, Didit provides comprehensive white-label capabilities within its Business Console, allowing for extensive branding customization, including custom domains, colors, and logos, applied effortlessly to your workflows.

The Importance of a Seamless User Experience in Identity Verification

In today's digital landscape, user experience (UX) is paramount. When users interact with your application, every touchpoint contributes to their overall perception of your brand. This includes critical processes like identity verification. A clunky, off-brand verification flow can disrupt the user journey, lead to abandonment, and erode trust. Conversely, a seamlessly integrated and beautifully branded verification process enhances professionalism and reinforces user confidence.

Many identity verification solutions offer generic, one-size-fits-all UIs that clash with a company's carefully crafted brand guidelines. This forces businesses to choose between robust security and a consistent user experience. Didit understands this challenge and provides powerful tools, like its JavaScript SDK and extensive white-label options, to ensure that you don't have to compromise. By allowing deep customization, Didit ensures that your identity verification process feels like an integral part of your application, not an external, jarring interruption.

Integrating Didit's JavaScript SDK for Ultimate Flexibility

Didit's JavaScript SDK is designed for developers seeking maximum control and flexibility. It's the recommended integration method for production applications due to its comprehensive features, including session management, event callbacks, and support for popular frameworks like React, Vue, Angular, NextJS, Nuxt, and Svelte, as well as vanilla JS. Unlike simpler iframe embeds or redirects, the JavaScript SDK allows you to programmatically manage the verification flow and handle events directly within your application.

The basic integration is straightforward:

import DiditSdk from '@didit-protocol/sdk-web';

DiditSdk.init({
  session_token: 'YOUR_BACKEND_GENERATED_TOKEN',
  onSuccess: (session) => {
    console.log('Verification completed:', session.sessionId, session.status);
    // Handle successful verification, e.g., redirect user, update UI
  },
  onError: (error) => {
    console.error('SDK error:', error.code, error.message);
    // Handle errors appropriately
  },
  onCancel: () => {
    console.log('User cancelled verification');
    // Handle user cancellation
  }
});

This SDK allows you to control whether the verification appears as a modal or inline, giving you granular control over the user's interaction. By leveraging this SDK, you gain the ability to wrap Didit's components within your own application's structure, making them amenable to custom styling.

Styling Didit Components with Tailwind CSS

Tailwind CSS has become a favorite among developers for its utility-first approach, enabling rapid UI development and highly consistent designs. When integrating Didit's JavaScript SDK, you can apply your Tailwind CSS styles to the container elements that host Didit's UI, ensuring a cohesive look and feel. While Didit's core components are designed to be robust and functional, their presentation can be influenced by the surrounding DOM structure and your application's global styles.

For instance, if Didit's SDK renders a modal or an inline component within a specific div, you can apply Tailwind classes to that div to control its sizing, spacing, and even some aspects of its appearance. For deeper customization of the actual verification flow's internal elements (like buttons, input fields, and text), Didit offers extensive white-labeling capabilities through its Business Console, which is often a more effective and maintainable approach than trying to override styles directly.

However, for wrapper elements or custom UI you build around the Didit SDK, Tailwind CSS is ideal. Imagine you want to present the verification flow within a specific card component of your application:

<div class="flex justify-center items-center h-screen bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-center">Verify Your Identity</h2>
    <!-- Didit SDK will render its UI here -->
    <div id="didit-verification-container"></div>
  </div>
</div>

In this example, all the outer styling (background, card appearance, text styles) is handled by Tailwind. The Didit SDK would then be initialized to render within #didit-verification-container, inheriting some contextual styles and ensuring it's visually consistent with the surrounding application. For the elements inside the Didit flow, Didit's white-label features provide the definitive customization.

Didit's Comprehensive White-Labeling Solution

While direct CSS manipulation can handle some aspects, Didit's primary and most powerful method for UI customization is its built-in white-labeling feature, accessible via the Didit Business Console. This goes far beyond what you could achieve with simple CSS overrides, providing a robust solution for a truly branded experience. With Didit's white-label capabilities, you can:

• Customize Colors: Control buttons, text, panels, and backgrounds to match your brand palette.
• Set Typography: Apply your brand's fonts for a consistent look.
• Upload Logos: Integrate your square and rectangular logos directly into the verification flow.
• Adjust Layout: Fine-tune border radii for panels and buttons.
• Configure Login Screen: Decide whether to show or skip the initial login screen.
• Use Custom Domains: Host the verification flow on your own domain (e.g., verify.yourcompany.com) instead of verify.didit.me, ensuring a completely seamless user journey without any external branding.

This level of customization is applied directly within your Didit workflows, meaning that once configured in the Business Console, all verification sessions initiated through that workflow will automatically reflect your branding. This is particularly effective for Didit products like ID Verification, Passive & Active Liveness, and Age Estimation, ensuring that every step of the user's interaction with these features aligns perfectly with your brand.

How Didit Helps

Didit stands out as the AI-native, developer-first identity platform that empowers businesses to fully customize their identity verification experience. With our modular architecture, you get plug-and-play identity checks that seamlessly integrate into your existing systems. Our JavaScript SDK provides the programmatic control needed for deep integration with modern web frameworks, while our comprehensive white-label features in the Business Console allow for extensive branding customization—from colors and fonts to custom domains. This ensures a consistent and trustworthy user experience across all Didit products, including our robust ID Verification (OCR, MRZ, barcodes), Passive & Active Liveness detection for fraud prevention, and privacy-preserving Age Estimation. Didit offers Free Core KYC and a pay-per-successful check model with no setup fees, making advanced identity verification accessible and efficient.

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.