> ## Documentation Index
> Fetch the complete documentation index at: https://developers.entri.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect White Label (Legacy Keys)

> Legacy whiteLabel keys the redesigned Connect modal still honors for backwards compatibility, and how to migrate off them.

<Warning>
  **The legacy Connect modal is deprecated.** The redesigned modal is the default for every application, and its supported `whiteLabel` keys are documented in the [Connect White Label](/connect/white-label) reference. Use that page for new integrations.

  This page lists only the legacy keys the redesigned modal still honors for backwards compatibility. They are not part of the supported surface and can change without notice, so plan to migrate off them. Any key not listed here is either on the current reference, unchanged, or was removed and has no effect. See [Migrating to the redesigned modal](#migrating-to-the-redesigned-modal) below for the key-by-key mapping.
</Warning>

## Migrating to the redesigned modal

The redesigned modal is the default for every application and no code change is needed to adopt it. Every key on the [current reference](/connect/white-label) works the same way it did before. This section covers the legacy keys that were renamed, plus the ones listed below that still work but are not supported.

### Renamed keys

Update your config to the current key. Where Entri migrates the key automatically, it also logs a deprecation warning in the browser console; if both keys are present, the current key wins.

| Deprecated key | Current key | Behavior |
| - | - | - |
| `customProperties.embeddedSelector` | `customProperties.general.embeddedMode.selector` | Migrated automatically with a console warning. |
| `customProperties.providerLogin.gotoManualLink.disable` | `customProperties.providerLogin.gotoManualLink.hide` | Both keys work; no warning is logged. |

`theme.colors.*` is a separate case. The current build still reads it on the redesigned modal, but it is not a supported surface: its keys are not covered by Entri's theming maps and can stop working or change without notice, and the error colors are fixed by the design regardless. Migrate to the flat `theme` keys. The color keys that still take effect are listed [below](#whitelabel-theme-colors-object).

`customProperties.providerLogin.socialIcons.disable` is not supported either. The redesigned modal has no social login buttons; if you used the key to hide the manual setup path, use `customProperties.providerLogin.gotoManualLink.hide`.

## Keys kept for backwards compatibility

The keys below still work on the redesigned modal but are not part of its supported surface. Where a current key exists, prefer it.

### `whiteLabel.customProperties`

| Property | Type | Default | Description |
| - | - | - | - |
| embeddedSelector | string | null | **Deprecated**, use `general.embeddedMode.selector`. A valid CSS selector (e.g., #entri-container) specifying the target element where the Entri Connect login UI should be embedded. If null, the authentication flow will open in a modal. |
| initialScreen.showManualInstructionsCTA | boolean | false | Enables the go-to manual link in the initial screen. Closes the modal and adds  the `authenticateManuallyClicked: true` key to the `onEntriClose` event. On the redesigned modal this first screen renders only when `prefilledDomain` is set. |
| providerLogin.gotoManualLink.disable | boolean | false | Hides the go to manual text copy |

### `whiteLabel.customCopy`

Translations are keyed by locale; the `en` locale is required.

| Property | Type | Default | Description |
| - | - | - | - |
| initialScreen.title.\$\{locale} | string | null | Sets the **title's** translation text for the specific locale. (one of the available codes such as en,es,fr, etc., for example initialScreen.title.en). Accepts applying bold when using the following tags `<strong></strong>`. For Entri Sell, sets the title text that appears on the initial screen of the domain purchase flow, localized by language. Example: "Search for your domain" |
| initialScreen.subTitle.\$\{locale} | string | null | Sets the **subtitle's** translation text for the specific locale. |

### `whiteLabel.theme.colors` Object

<Warning>
  The `colors` object is not part of the supported surface of the redesigned modal. Use the flat `theme` keys documented in the [Connect White Label](/connect/white-label#whitelabel-theme-object) reference instead.
</Warning>

The `colors` object provides granular control over individual UI elements. Most of `colors` properties accept standard CSS color formats (hex, rgb, rgba, hsl, hsla), except `bg`, `fg`, `buttonPrimary`, `errorShadowColorRgb`, `errorShadowColorRgb`.

**Special Format Requirements:**

| Property | Format | Example | Notes |
| - | - | - | - |
| `buttonPrimary` | Hexadecimal string | `"#1f77f8"` | Same format for `theme.bg` and `theme.fg`. |

**Colors Property Reference:**

The color properties the redesigned modal still reads, and where each one is applied:

| Property | Applied To | CSS Variable | Example Usage |
| - | - | - | - |
| `modalBackground` | Main modal container | `--modal-background` | Background of the entire modal |
| `modalOverlay` | Primary overlay | `--modal-overlay` | Backdrop when modal is open |
| `textPrimary` | Main text content | `--text-primary` | Primary text throughout modal |
| `textSecondary` | Supporting text | `--text-secondary` | Descriptions, helper text |
| `buttonPrimary` | Primary buttons | `--button-primary` | Main action buttons |
| `buttonPrimaryText` | Primary button text | `--button-primary-text` | Text on primary buttons |
| `buttonSecondaryText` | Secondary button text | `--button-secondary-text` | Text on secondary buttons |
| `linkPrimary` | Primary links | `--link-accent` | Main hyperlinks |
| `inputBackground` | Form input backgrounds | `--input-background` | Text input fields |
| `inputBorder` | Form input borders | `--input-border` | Input field borders |
| `inputText` | Input field text | `--input-text` | Text inside input fields |
| `inputPlaceholder` | Input placeholder text | `--input-placeholder` | Placeholder text in inputs |

<Note>
  **Dark Mode Preset:** When `darkMode: 'enabled'` is set, Entri automatically applies a comprehensive dark color scheme. You can still override individual colors by specifying them in the `colors` object after setting `darkMode`.
</Note>

<Note>
  **Quick Theme + Advanced Customization:** The `bg` and `fg` properties provide fast global theming, while the `colors` object allows granular control. They work together - `colors` properties override the automatic mappings from `bg`/`fg` where specified.

  **Example:**

  ```javascript theme={"system"}
  theme: {
    bg: "#1f77f8",        // Quick: sets buttons, links, shadows
    fg: "#FFFFFF",        // Quick: sets text on primary elements
    colors: {
      modalBackground: "#F5F5F5",
      buttonPrimary: "#FF0000"  // Override: specific customization
    }
  }
  ```
</Note>