# Whitelabel PnP Unity SDK

> Web3Auth PnP Unity SDK - Whitelabel | Embedded Wallets

Embedded Wallets supports 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.

:::

:::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 Embedded Wallets login screens

For defining custom UI, branding, and translations for your branded app, you just need to add an additional parameter within the `Web3AuthOptions` class called `whiteLabel`. This parameter takes another object called `WhiteLabelData`.

### `WhiteLabelData`

<Tabs
  defaultValue="table"
  values={[
    { label: "Table", value: "table" },
    { label: "Interface", value: "interface" },
  ]}
>

<TabItem value="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 string.                                                                                                                                          |
| `logoDark?`        | App logo to be used in light mode. It accepts URL as string.                                                                                                                                         |
| `defaultLanguage?` | Language which will be used by Web3Auth, app will use browser language if not specified. Default language is `Web3Auth.Language.en`. Checkout `Web3Auth.Language` for supported languages.           |
| `mode?`            | Theme mode for the login modal. Choose between `Web3Auth.ThemeModes.auto`, `Web3Auth.ThemeModes.light` or `Web3Auth.ThemeModes.dark` background modes. Default value is `Web3Auth.ThemeModes.light`. |
| `theme?`           | Used to customize the theme of the login modal. It accepts ` Dictionary<string, string>` as a value.                                                                                                 |
| `appUrl?`          | URL to be used in the modal. It accepts URL as 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.                                                              |

</TabItem>

<TabItem value="interface">

```cs
public class WhiteLabelData {
  public string? appName { get; set; }
  public string? logoLight { get; set; }
  public string? logoDark { get; set; }
  public Web3Auth.Language? defaultLanguage { get; set; } = Web3Auth.Language.en;
  public Web3Auth.ThemeModes? mode { get; set; } = Web3Auth.ThemeModes.light;
  public Dictionary<string, string>? theme { get; set; }
  public string? appUrl { get; set; }
  public bool? useLogoLoader { get; set; } = false;
}
```

</TabItem>
</Tabs>

### `name`

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

  
    
      Standard screen without any change
    
    
  
  
    
      Name changed to <code>Formidable Duo</code>
    
    
  

### `logoLight` & `logoDark`

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

  
    
      <code>logoLight</code> on dark mode
    
    
  
  
    
      <code>logoDark</code> on light mode
    
    
  

### `defaultLanguage`

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

  
    
      
        <code>en</code> - English (default)
      
      
        <code>de</code> - German
      
      
        <code>ja</code> - Japanese
      
      
        <code>ko</code> - Korean
      
      
        <code>zh</code> - Mandarin
      
      
        <code>es</code> - Spanish
      
      
        <code>fr</code> - French
      
      
        <code>pt</code> - Portuguese
      
      
        <code>nl</code> - Dutch
      
      
        <code>tr</code> - Turkish
      
    
  
  
    
  

### `dark`

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

  
    
      For Light: <code>dark: false</code>
    
    
  
  
    
      For Dark: <code>dark: true</code>
    
    
  

### `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 <code>#0364FF</code>
    
    
  
  
    
      Color changed to <code>#D72F7A</code>
    
    
  

### Example

```cs
void Start()
{
  web3Auth = GetComponent<Web3Auth>();
  web3Auth.setOptions(new Web3AuthOptions()
  {
    redirectUrl = new Uri("torusapp://com.torus.Web3AuthUnity/auth"),
    clientId = "BAwFgL-r7wzQKmtcdiz2uHJKNZdK7gzEf2q-m55xfzSZOw8jLOyIi4AVvvzaEQO5nv2dFLEmf9LBkF8kaq3aErg",
    network = Web3Auth.Network.TESTNET,
    // focus-start
    whiteLabel = new WhiteLabelData() {
      appName = "Web3Auth Sample App",
      logoLight = null,
      logoDark = null,
      defaultLanguage = "en",
      mode = "dark",
      theme = new Dictionary < string, string > {
        {
          "primary",
          "#d53f8c"
        }
      }
    }
    // focus-end

  });
}
```