White-Labeling Didit SDK: Complete Branding Guide

In today’s competitive landscape, maintaining brand consistency is crucial, even within third-party integrations. The Didit SDK offers extensive SDK customization options, allowing you to deliver a seamless, branded identity verification experience to your users. This guide provides a comprehensive overview of Didit SDK white-labeling, covering CSS overrides, theming, and best practices to ensure a fully branded integration.

Key Takeaway 1 The Didit SDK is designed for deep customization. You can completely alter the look and feel to match your brand guidelines.

Key Takeaway 2 White-labeling is primarily achieved through CSS overrides, providing granular control over visual elements.

Key Takeaway 3 Consider using a CSS-in-JS solution for managing complex themes and maintaining consistency across your application.

Key Takeaway 4 Thorough testing is essential after applying customizations to ensure a smooth and consistent user experience.

Understanding the Didit SDK Architecture for Customization

The Didit SDK utilizes a modular architecture, providing a flexible foundation for SDK branding. The core verification logic is separated from the UI components, allowing you to modify the visual presentation without altering the underlying functionality. The SDK’s UI is built using standard web technologies (HTML, CSS, JavaScript), making it easy to customize using familiar tools. The primary method for SDK white-labeling is through CSS overrides, allowing you to target specific elements and apply your own styles.

CSS Overrides: The Core of White-Labeling

The most effective way to customize the Didit SDK’s appearance is through CSS overrides. The SDK provides a set of pre-defined CSS classes that you can target with your own styles. Here’s a breakdown of how to use CSS overrides:

• Global Styles: Use a global stylesheet to define base styles for common elements like fonts, colors, and button styles.
• Specific Overrides: Target specific components with more granular styles. For example, to change the color of the “Verify” button, you might use a selector like .didit-button--primary.
• Specificity: Be mindful of CSS specificity. Use more specific selectors if your styles aren’t being applied.

Example:

/* Change the primary button color */
.didit-button--primary {
  background-color: #YOUR_BRAND_COLOR !important;
  color: white !important;
}

/* Change the input field border color */
.didit-input input {
  border-color: #YOUR_BRAND_COLOR !important;
}

Important: The !important flag may be necessary to override the SDK’s default styles. However, use it cautiously, as it can make your CSS harder to maintain. Consider a more specific selector as a first approach.

Advanced Theming with CSS-in-JS

For more complex theming scenarios, consider using a CSS-in-JS solution like Styled Components or Emotion. These libraries allow you to define styles using JavaScript, making it easier to manage themes and dynamically switch between them. CSS-in-JS can also help with component scoping, preventing style conflicts.

Example (Styled Components):

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.theme.primaryColor};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

Customizing the SDK’s Flow & Components

Beyond visual styling, you can also customize certain aspects of the SDK’s flow. For example, you can:

• Custom Error Messages: Replace the default error messages with your own branded messages.
• Custom Loading Indicators: Use your own loading animations instead of the default ones.
• Component Rendering (with API access): For advanced customization, use the Didit API to control the rendering of specific components, allowing you to build a completely custom UI around the core verification logic.

How Didit Helps with White-Labeling

Didit simplifies the Didit SDK white-labeling process by providing:

• Detailed Documentation: Comprehensive documentation outlining all available CSS classes and customization options.
• Example Themes: Pre-built themes that you can use as a starting point for your own customizations.
• Dedicated Support: Access to our support team to assist with any customization challenges.
• Flexible Architecture: The modular design allows deep customization without impacting core functionality. Didit’s approach prioritizes developer control.

Ready to Get Started?

Transform the Didit SDK into a seamless extension of your brand! Here are some resources to help you get started:

• Didit Documentation: Explore the complete API reference and customization guides.
• Didit Demo Center: Experiment with the SDK and test different customization options.
• Didit Pricing: Learn about our flexible pricing plans.