# Whitelabeling/Customizing

## Customize UI

* It's possible from the config values / SDK
* Here is the mapping between config values and the corresponding UI.

<figure><img src="https://3244648189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOu6aN3RW264zdJsOQMJ2%2Fuploads%2FayD3EVtJnR98Im91ZwBB%2FTorusWhitelabelConfigInStartrailSdk.drawio%20(3).png?alt=media&#x26;token=6fc180f8-019b-401a-851c-2e493d0ff147" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
`Guideline for the logoUrl` and`logoWhiteUrl`

* Logo must be hosted. If it is difficult, please contact us.

  e.g.: <https://static-files.startrail.io/startrail-black-logo.png>
* Logo is recommended to be square, given it is rounded into a circular shape icon in the modal and loading window. However there is no limitation for its shape and size.
* Logo must be either in PNG or JPG/JPEG format. Some E-Mail clients do not support certain formats such as SVG.
  {% endhint %}

## Properties

All the properties listed below are *optional*.

## CustomUI

<table><thead><tr><th width="184">Parameters</th><th>Example</th><th>Description</th></tr></thead><tbody><tr><td>logoUrl</td><td><code>string</code></td><td>App logo to be shown on the light background (light theme)</td></tr><tr><td>logoWhiteUrl</td><td><code>string</code></td><td>App logo to be shown on the dark background (dark theme)</td></tr><tr><td>serviceName</td><td><code>string</code></td><td>Applied to all service name in Startrail-sdk-js</td></tr><tr><td>contactUrl</td><td><code>string</code></td><td>Applied to the contact email in signup Email</td></tr><tr><td>verificationEmailTitle</td><td><code>string</code></td><td>Applied to the title of the verification email when you select email_password</td></tr><tr><td>words</td><td><pre class="language-json"><code class="lang-json">{
  en: CustomWords
  ja: CustomWords
}
</code></pre></td><td>either <code>en</code> or <code>ja</code> can be used. The value of each is defined in <a href="#customwords"><em>CustomWords</em></a></td></tr></tbody></table>

***CustomWords*** is an object consisting of the following optional attributes. Each of the are explained subsequently.

```json5
{
    emailAuthPopup:EmailAuthPopup,
    modal:WalletModal,
    signPopup:SignPopup,
    embed:Embed
}
```

### EmailAuthPopup

<table><thead><tr><th>Parameters</th><th>Example</th><th data-hidden>Example</th></tr></thead><tbody><tr><td>titleLogin</td><td></td><td><code>string</code></td></tr><tr><td>titleSignup</td><td></td><td><code>string</code></td></tr></tbody></table>

### WalletModal

<table><thead><tr><th width="379">Parameters</th><th>Example</th><th data-hidden>Type</th></tr></thead><tbody><tr><td>continueLogin</td><td></td><td><code>string</code></td></tr><tr><td>termsConditions</td><td></td><td><code>string</code></td></tr><tr><td>termsConditionisLinkUrl</td><td></td><td><code>string</code></td></tr><tr><td>privacyPolicyLinkUrl</td><td></td><td><code>string</code></td></tr></tbody></table>

### SignPopup

<table><thead><tr><th>Parameters</th><th>Example</th><th data-hidden>Type</th><th data-hidden>Mandatory<select><option value="0b53396cce3a44bbb3fc6b9705449928" label="Optional" color="blue"></option></select></th></tr></thead><tbody><tr><td>title</td><td></td><td><code>string</code></td><td><span data-option="0b53396cce3a44bbb3fc6b9705449928">Optional</span></td></tr><tr><td>requestFrom</td><td></td><td><code>string</code></td><td><span data-option="0b53396cce3a44bbb3fc6b9705449928">Optional</span></td></tr><tr><td>confirm</td><td></td><td><code>string</code></td><td><span data-option="0b53396cce3a44bbb3fc6b9705449928">Optional</span></td></tr><tr><td>cancel</td><td></td><td><code>string</code></td><td><span data-option="0b53396cce3a44bbb3fc6b9705449928">Optional</span></td></tr></tbody></table>

### Embed (Continue Alert Popup)

<table><thead><tr><th>Parameters</th><th>Example</th><th data-hidden>Type</th><th data-hidden>Mandatory<select><option value="b57b13ab0ccd46c690fb88143436a318" label="Optional" color="blue"></option></select></th></tr></thead><tbody><tr><td>continue</td><td></td><td><code>string</code></td><td><span data-option="b57b13ab0ccd46c690fb88143436a318">Optional</span></td></tr><tr><td>actionRequired</td><td></td><td><code>string</code></td><td><span data-option="b57b13ab0ccd46c690fb88143436a318">Optional</span></td></tr><tr><td>pendingAction</td><td></td><td><code>string</code></td><td><span data-option="b57b13ab0ccd46c690fb88143436a318">Optional</span></td></tr></tbody></table>