Custom UI Branding for Identity Verification

In today’s competitive landscape, a seamless and branded user experience is paramount. When it comes to identity verification, generic interfaces can disrupt the flow and erode trust. Didit provides a powerful identity verification SDK with extensive customization options, allowing you to fully white label the verification process to match your brand’s look and feel. This post explores the various methods for achieving complete UI control, from basic CSS customization to building a fully bespoke experience.

Key Takeaway 1: Didit offers a spectrum of customization options, from simple CSS overrides to a complete server-side rendering approach for maximum UI control.

Key Takeaway 2: Properly implementing white labeling enhances user trust and brand consistency throughout the verification process.

Key Takeaway 3: The Didit API is designed to support both out-of-the-box UI components and fully custom frontends.

Key Takeaway 4: Advanced CSS customization allows for granular control over the SDK’s appearance without modifying core code.

Understanding White Labeling Options

Didit recognizes that every brand has unique requirements. We offer several approaches to UI customization:

• CSS Customization (Basic): The simplest method, allowing you to override default styles using custom CSS. This is ideal for minor branding adjustments like colors, fonts, and button styles.
• Hosted Page Customization (Intermediate): Modify the hosted verification page through limited styling options available in the Didit Console.
• SDK Integration with Custom UI (Advanced): Full control. Integrate the Didit SDK into your application and build a completely custom UI using your preferred frameworks (React, Angular, Vue.js, etc.). This utilizes our APIs for backend processing.
• Server-Side Rendering (Expert): Handle the entire verification flow on your servers, using Didit’s API to perform the core identity checks and building a completely custom frontend.

Leveraging CSS Customization

For quick branding updates, CSS customization is a powerful tool. Didit’s SDK allows you to inject custom CSS rules that override the default styles. This is achieved by adding a style tag to the HTML containing the verification widget, or by providing a URL to a stylesheet.

Example:

<style>
  .didit-button {
    background-color: #2567FF !important; /* Didit Blue */
    color: white !important;
    border-radius: 5px !important;
  }
  .didit-input {
    font-family: 'Your Custom Font', sans-serif !important;
  }
</style>

Important Considerations:

• Use !important to ensure your styles override the SDK’s default styles.
• Inspect the SDK’s HTML structure to identify the relevant CSS classes.
• Test thoroughly across different browsers and devices.

Building a Custom UI with the SDK

For complete UI control, you’ll need to integrate the Didit SDK into your application and build a custom frontend. This approach requires more development effort but provides unparalleled flexibility.

Architecture:

1. Initialize the Didit SDK in your application.
2. Create custom UI elements (buttons, input fields, etc.) that match your brand.
3. Use the Didit API to trigger verification steps (ID document capture, liveness detection, etc.).
4. Handle the verification results and update your UI accordingly.

Example: Initiate ID Verification using the JavaScript SDK.

didit.launchIDVerification({
  container: '#didit-container',
  onSuccess: function(result) {
    console.log('Verification successful:', result);
  },
  onFailure: function(error) {
    console.error('Verification failed:', error);
  }
});

Advanced Styling and Extended Customization

Beyond basic CSS, you can achieve more sophisticated customization by utilizing the Didit API to control the verification flow and render custom UI elements. This allows for dynamic changes based on verification status, location, or other factors. For instance, you could dynamically show or hide elements based on the user's country, or display custom error messages.

Didit’s extended styling options include the ability to customize:

• Loading spinners
• Error messages
• Success animations
• Image assets

How Didit Helps

Didit empowers businesses to deliver a branded and frictionless identity verification experience. Our flexible SDK and comprehensive API provide the tools you need to:

• Enhance brand consistency.
• Increase user trust.
• Improve conversion rates.
• Reduce support costs.
• Maintain a seamless user experience.

Ready to Get Started?

Ready to take control of your identity verification UI? Explore our documentation and integrations resources:

• Didit Documentation
• Didit Demo Center
• Didit Pricing