Whitelabeling Web3Auth

Whitelabeling is a pivotal feature of Web3Auth that empowers developers to offer a seamless and cohesive user experience across their applications. Through customization of the user interface, branding, and translations, Web3Auth's whitelabeling capabilities ensure that every aspect of the authentication flow aligns with your application's identity.

Steps for Customization

1. Choose Your SDK: Decide between Plug and Play, SFA & MPC Core Kit SDKs based on your needs for customization and control.

   info

   With Single Factor Auth & MPC Core Kit SDKs, Web3Auth is invisible to the user, and you have the complete control over the user interface, branding, and translations.

2. Define Your Branding: While using Plug and Play SDKs, you can customize the elements of the SDKs, such as modals, screens, and logos, to align with your branding guidelines.

3. Apply Translations: Tailor the language and translations within the authentication flow to cater to your target audience.

note

Access to Whitelabeling is gated. The minimum pricing plan to use this feature is the Growth Plan.

Plug and Play SDKs Whitelabeling

Web3Auth's Plug and Play SDKs provide extensive whitelabeling capabilities, allowing for a deep level of customization to ensure the user interface, branding, and translations perfectly match your application's needs. These SDKs support detailed customization, offering a seamless and cohesive user experience.

info

Head over to the Web3Auth PnP SDK Reference to whitelabel your PnP integration.

• Seamless Integration: Effortlessly embed Web3Auth's authentication modal within your application, ensuring a unified user experience that aligns with your brand identity. Customize every aspect, from the modal appearance to the user flow, including MFA screens, to maintain consistency across all user interactions.

• Comprehensive Management: With Web3Auth's whitelabeling options, you gain full control over the authentication experience, ensuring it is not only branded but also intuitive for users. This approach minimizes the need for additional UI development and aligns closely with your application's design principles.

• Customizable to Your Brand: Tailor the Embedded Wallet UI to perfectly fit your application's aesthetics, reinforcing your brand with every user interaction. Web3Auth allows for detailed branding customization, ensuring the wallet experience feels like an integral part of your app.

Language Customization and Localization (l10n)

A significant aspect of Web3Auth's whitelabeling capabilities is its support for multiple languages, enhancing accessibility and user engagement across diverse demographics.

• Multiple Languages Support: Web3Auth supports localization for a variety of languages including English (en), Spanish (es), German (de), Chinese (zh), Japanese (ja), Korean (ko), French (fr), Portuguese (pt), and Dutch (nl).
• Open Source Contributions: The Web3Auth locales are maintained in an open-source repository, inviting contributions from the community to add or refine language support. Contribute to Web3Auth Locales.

NEW: Whitelabeling via the Dashboard:

• From version 8.5.0, Web3Auth's Plug and Play SDKs and WalletServicesPlugin offer whitelabeling capabilities via the Dashboard, enabling developers to customize the authentication modal, user interface, and translations to align with their application's branding and user experience requirements.

• Customize the Authentication Modal: Modify the appearance of the authentication modal, including the primary color, application name, logo, and dark or light mode, to align with your application's branding.

• Personalize the User Interface: Tailor the Embedded Wallet UI to match your application's design language, ensuring a seamless and cohesive user experience.

• Configure Language and Translations: Customize the language and translations within the authentication flow to cater to your target audience.

note

Access to Whitelabeling Dashboard is gated. The minimum pricing plan to use this feature is the Growth Plan. On Base plan, you would see a limited version of the dashboard, with disabled whitelabeling options for mainnet projects. For sapphire_devnet projects, you can access all the whitelabeling options, regardless of your pricing plan.

Customization Examples

• Login Modal Customization: Adapt the login modal's design to reflect your application's branding, from colors and logos to fonts and button styles.

  

• User Flow and MFA Screen Transition: Provide a consistent and engaging experience throughout the user authentication process, including the transition between different authentication stages and support for both light and dark modes.

  

name

The name of the application. This will be displayed in the key reconstruction page.

Standard screen without any change

Name changed to Formidable Duo

logoLight & logoDark

The logo of the application. Displayed in dark and light mode respectively. This will be displayed in the key reconstruction page.

logoLight on dark mode

logoDark on light mode

defaultLanguage

Default language will set the language used on all OpenLogin screens. The supported languages are:

• en - English (default)

• de - German

• ja - Japanese

• ko - Korean

• zh - Mandarin

• es - Spanish

• fr - French

• pt - Portuguese

• nl - Dutch

• tr - Turkish

dark

Can be set to true or false with default set to false.

For Light: dark: false

For Dark: dark: true

theme

Theme is a record of colors that can be configured. As of, now only primary color can be set and has effect on OpenLogin screens (default primary color is #0364FF). Theme affects icons and links. Examples below.

Standard color #0364FF

Color changed to #D72F7A