> For the complete documentation index, see [llms.txt](/llms.txt). # Whitelabel Embedded Wallets allows complete whitelabeling with application branding for a consistent user experience. You can customize three different aspects: - **UI elements:** Customize the appearance of modals and components - **Branding:** Apply your brand colors, logos, and themes - **Translations:** Localize the interface for your users info All of these settings can be easily managed directly from the Embedded Wallets dashboard. Once you update your branding, or UI preferences there, the changes will automatically apply to your integration. ![Branding page on the MetaMask Developer Dashboard](/img/embedded-wallets/whitelabel/modal/branding.png) note This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth Plan**. You can use this feature in Web3Auth Sapphire Devnet network for free. ## Customizing the Web3Auth login screens For defining custom UI, branding, and translations for your brand app, you just need to define an optional object called `WhiteLabelData`. `WhiteLabelData` can be definied during initialization of the SDK in `Web3AuthOptions` object. note This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Growth Plan**. You can use this feature in Web3Auth Sapphire Devnet network for free. ### 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 as a string. | | `logoDark?` | App logo to be used in light mode. It accepts URL as a string. | | `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 as a string. | | `useLogoLoader?` | Use logo loader. If `logoDark` and `logoLight` are null, the default Web3Auth logo will be used for the loader. Default value is false. | **Class** ```dart class WhiteLabelData { final String? appName; final String? logoLight; final String? logoDark; final Language? defaultLanguage; final ThemeModes? mode; final HashMap? theme; final String? appUrl; final bool? useLogoLoader; WhiteLabelData({ this.appName, this.logoLight, this.logoDark, this.defaultLanguage = Language.en, this.mode = ThemeModes.auto, this.theme, this.appUrl, this.useLogoLoader, }); Map toJson() { return { 'appName': appName, 'logoLight': logoLight, 'logoDark': logoDark, 'defaultLanguage': defaultLanguage.toString().split('.').last, 'mode': mode.toString().split('.').last, 'theme': theme, 'appUrl': appUrl, 'useLogoLoader': useLogoLoader }; } } ``` ### `name` The name of the application. This will be displayed in the key reconstruction page. #### Standard screen **without** any change ![Standard screen without any change](/assets/images/whitelabel-web3auth-openlogin-theme1-896362b715c0f7324f7cf39e784d3c5c.png) #### Name changed to `Formidable Duo` ![Name changed to Formidable Duo](/assets/images/whitelabel-web3auth-openlogin-theme2-a05a1b2998ac4f470b25d69a2610980c.png) ### `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 ![logoLight on dark mode](/assets/images/whitelabel-web3auth-openlogin-logo-light-dc8b10a3125f44faa0fafeeb0e646e0b.png) #### `logoDark` on light mode ![logoDark on light mode](/assets/images/whitelabel-web3auth-openlogin-logo-dark-52289aa1ccb299e8acfd6c3ea1cf1b86.png) ### `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 ![default Language screen](/assets/images/whitelabel-web3auth-openlogin-language-73edccdb50344cd84746f04fcbf92b35.png) ### `dark` Can be set to `true` or `false` with default set to `false`. #### For Light: `dark: false` ![light theme](/assets/images/whitelabel-web3auth-openlogin-light-fc03591b15a4150268aa198c9aeb7a3c.png) #### For Dark: `dark: true` ![dark theme](/assets/images/whitelabel-web3auth-openlogin-dark-43e011bb3d7b7ef1314d9e38124f4f8a.png) ### `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` ![Theme is a record of colors that can be configured.](/assets/images/whitelabel-web3auth-openlogin-theme1-896362b715c0f7324f7cf39e784d3c5c.png) #### Color changed to `#D72F7A` ![Theme affects icons and links.](/assets/images/whitelabel-web3auth-openlogin-theme2-a05a1b2998ac4f470b25d69a2610980c.png) ### Example Usage ```dart Future initWeb3Auth() async { final themeMap = HashMap(); themeMap['primary'] = "#229954"; late final String redirectUrl; if (Platform.isAndroid) { redirectUrl = 'w3a://com.example.w3aflutter'; } else if (Platform.isIOS) { redirectUrl = 'com.example.w3aflutter://auth'; } else { throw UnKnownException('Unknown platform'); } await Web3AuthFlutter.init( Web3AuthOptions( clientId: "WEB3AUTH_CLIENT_ID", web3AuthNetwork: Web3AuthNetwork.sapphire_mainnet, redirectUrl: redirectUrl, whiteLabel: WhiteLabelData( appName: "Web3Auth Flutter App", logoLight: "https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg", logoDark: "https://cdn.icon-icons.com/icons2/2389/PNG/512/flutter_logo_icon_145273.png", defaultLanguage: Language.en, mode: ThemeModes.auto, appUrl: "https://web3auth.io", useLogoLoader: true, theme: themeMap, ), ), ); } ```