Skip to main content

Customization

Branding​

The Branding tab under the Customization section of the Web3Auth Dashboard allows developers to personalize the visual identity of their application across multiple user interfaces. This includes the Login Screens, Multi-Factor Authentication (MFA) screens, Wallet UI, and Login Modals.

Effective branding ensures a seamless and recognizable user experience, helping users feel confident that they are interacting with your application—even when interacting with Web3Auth-hosted interfaces.

Note: All changes made within the Branding tab can be previewed in real-time. However, to reflect updates in production, developers must click the Save & Publish button after making changes.

Customization Branding

Branding Options​

Upload a logo to personalize the user interface and email templates. For optimal performance and compatibility, it is recommended to use a .png file. The logo appears across login flows, wallet views, and email communications.

Use Logo as Loader​

Developers have the option to display the uploaded logo as the loading spinner across the Web3Auth login flow. This small detail enhances brand consistency and gives users a familiar visual cue during authentication.

Custom Terms & Conditions and Privacy Policy​

Link to your application's Terms of Service and Privacy Policy. These links will be displayed during user onboarding and consent flows, ensuring legal compliance and improving transparency.

Application Name​

The name defined here will be used across system-generated communication, including the subject lines of email templates. Ensure that the application name clearly represents your project or organization.

Default Language​

Select the default localization for all user-facing Web3Auth components. Supported languages include:

  • English
  • Japanese
  • Korean
  • German
  • Mandarin
  • Spanish
  • French
  • Portuguese
  • Dutch
  • Turkish

This setting ensures that your application's authentication flow is accessible and intuitive for users across different regions.

Theme and Colors​

The Theme and Colors section allows developers to synchronize the aesthetic of the Web3Auth interfaces with the branding and design system of their application.

Select Mode​

Choose between Light, Dark, or Auto mode. When Auto is selected, the interface adapts to the user's system theme preference automatically. This ensures a consistent and user-friendly visual experience, regardless of the device or OS settings.

Primary Color​

Defines the primary brand color used across interactive elements such as:

  • Buttons
  • Hyperlinks
  • Tab indicators
  • Focus outlines
  • Loaders and spinners
  • Navigation tabs

On Primary Color​

Specifies the color applied to text and icons that appear on top of primary color backgrounds (e.g., button labels or iconography). This ensures sufficient contrast for readability and accessibility.

Tip: Choose color combinations that meet accessibility guidelines (e.g., WCAG) to provide an inclusive experience for all users.

Login Modal​

The Login Modal tab within the Customization section of the Web3Auth Dashboard provides developers with granular control over the appearance and behavior of the Web3Auth login flow.

Customization Login Modal

Design​

The Design section offers layout and styling options to customize how the login modal is presented to users.

Login Modal Appearance​

Developers can choose between two display modes for the login interface:

  • Embedded Widget: The login UI is embedded directly within the application's layout. This option is ideal for single-page applications or flows that require a fully integrated experience.
  • Modal Widget: The login interface opens as a pop-up modal overlay. This provides a more traditional Web3 wallet experience, where authentication occurs in a floating layer over the existing content.

Logo Alignment​

Configure how the application logo is aligned within the login modal:

  • Center-Aligned: Displays the logo at the top center, suitable for balanced layouts.
  • Left-Aligned: Positions the logo to the top-left, often preferred for enterprise or dashboard-style applications.

Border Radius​

Adjust the corner curvature of the modal interface:

  • Small, Medium, or Large radius options allow for stylistic variations that better match your app's design system.

Border Radius Type​

Refine the shape of buttons and input fields within the modal by selecting:

  • Pill: Fully rounded ends for a modern, soft appearance.
  • Rounded: Gently curved corners for a subtle aesthetic.
  • Square: Sharp 90° corners for a more technical or minimalist look.

These design customizations allow developers to ensure the login experience feels native to the application, enhancing user trust and engagement.

Authentication Re-order​

The Authentication section provides flexibility in how login options are presented within the modal.

Arrange Login Order​

When multiple login methods (e.g., social, email/phone, external wallets) are available, developers can define the order in which these options appear.

  • Simply drag and drop the login methods to rearrange their position.
  • This order determines the priority and placement of login options shown to users during authentication.

Note: This customization improves user experience by surfacing the most relevant login methods first—e.g., placing a company-preferred SSO or social login provider at the top.

External Wallets​

The External Wallets settings provide additional configuration for displaying third-party wallet options such as MetaMask, WalletConnect, and others.

Show Installed External Wallets​

Enable this to automatically detect and display any compatible wallets already installed in the user's browser or device (e.g., MetaMask or Phantom). This improves onboarding by surfacing options users are already familiar with.

Show Number of External Wallets​

Choose how many external wallet options are displayed at once. Developers can limit or expand this list based on the target user base and the types of wallets they are likely to use.

These settings ensure wallet integrations are both comprehensive and context-aware, adapting to the environment and user preferences for seamless onboarding.

On this page