Whitelabel PnP Android SDK

Web3Auth is fully whitelabelable with application branding to have a consistent user experience. For Whitelabeling, there are two different aspects available for you. Web3Auth gives you the ability to define a custom UI, branding, and translations for your applications. All our SDKs support Whitelabeling, giving granular customization capability across all our offerings.

note

This is a paid feature and the minimum pricing plan to use this SDK in a production environment is the Growth Plan. You can use this feature in Web3Auth Sapphire Devnet network for free.

Within the Web3Auth Plug and Play Android SDK, whitelabeling can happen in two different places:

NEW: Whitelabeling via the Dashboard

From version 8.0.0, Web3Auth Android Plug and Play SDK offers whitelabeling capabilities via the Dashboard. This enables developers to customize the authentication flow, user interface, and translations to align with their application's branding and user experience requirements.

• Customize the Authentication screens: Modify the appearance of the authentication screens, including the primary color, application name, logo and dark or light mode, to align with your application's branding.
• Configure Language and Translations: Customize the language and translations within the authentication flow to cater to your target audience.

Whitelabeling while Web3Auth Instantiating

For defining custom UI, branding, and translations for your brand during Web3Auth instantiation, you just need to specify an additional parameter within the Web3AuthOptions object called whiteLabel. This parameter takes object called WhiteLabelData.

Arguments

WhiteLabelData

Table

Parameter	Description
appName?	Display name for the app in the UI.
logoLight?	App logo to be used in dark mode. It accepts url in String as a value.
logoDark?	App logo to be used in light mode. It accepts url in String as a value.
defaultLanguage?	Language which will be used by Web3Auth, app will use browser language if not specified. Default language is Language.EN. Checkout Language for supported languages.
mode?	Theme mode for the login modal. Choose between ThemeModes.AUTO, ThemeModes.LIGHT or ThemeModes.DARK background modes. Default value is ThemeModes.AUTO.
theme?	Used to customize the theme of the login modal. It accepts HashMap as a value.
appUrl?	Url to be used in the Modal. It accepts url in String as a value.
useLogoLoader?	Use logo loader. If logoDark and logoLight are null, the default Web3Auth logo will be used for the loader. Default value is false.

Interface

data class WhiteLabelData(
    private var appName: String? = null,
    private var appUrl: String? = null,
    private var logoLight: String? = null,
    private var logoDark: String? = null,
    private var defaultLanguage: Language? = Language.EN,
    private var mode: ThemeModes? = null,
    private var useLogoLoader: Boolean? = false,
    private var theme: HashMap<String, String>? = null
)

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

Example

Usage

web3Auth = Web3Auth (
  Web3AuthOptions (
    context = this,
    clientId = getString (R.string.web3auth_project_id),
    network = Network.MAINNET,
    redirectUrl = Uri.parse ("{YOUR_APP_PACKAGE_NAME}://auth"),
    // Optional whitelabel object
    whiteLabel = WhiteLabelData (
      appName = "Web3Auth Sample App",
      appUrl = null,
      logoLight = null,
      logoDark = null,
      defaultLanguage = Language.EN, // EN, DE, JA, KO, ZH, ES, FR, PT, NL
      ThemeModes = ThemeModes.DARK, // LIGHT, DARK, AUTO
      useLogoLoader = true,
      theme = hashMapOf (
        "primary" to "#229954"
      )
    )
  )
)