# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.startrail.io/startrail-sdk-js/login-providers/whitelabeling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.