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

> White-label properties supported by the new UI used by Connect and Unify.

<Info>
  This page documents the **new Entri UI**. It lists the `whiteLabel` properties the new UI supports. Everything below is configured under the `whiteLabel` object passed to [`entri.connectDomain(config)`](/connect/sdk).

  [Entri Unify](/unify/overview) is built on this same new UI, so these properties also theme the Unify modal, including its selection screen. See [Unify configuration](/unify/configuration#new-ui-and-white-label) for the Unify-specific details.

  For the full (legacy) reference, see [Connect White Label](/connect/white-label).
</Info>

## `whiteLabel` object

The `whiteLabel` object lets you customize the Entri Connect UI to match your branding. All properties are optional — boolean flags default to `false`, and any property left unset falls back to Entri's default. You may need an Enterprise level account for some properties to be available; contact your account manager with questions.

<ParamField path="hideEntriLogo" type="boolean">
  When true, hides all mentions of "Powered by Entri".
</ParamField>

<ParamField path="hideCompanyLogo" type="boolean">
  Hides the customer's logo on the initial screen (does not apply to the multi-domain initial screen).
</ParamField>

<ParamField path="hideCompanyName" type="boolean">
  Hides the company name across the flow.
</ParamField>

<ParamField path="logo" type="string">
  An `https` URL. When set, it overrides the configured Application logo and uses this one instead. We recommend an SVG or PNG that is 1:1.
</ParamField>

<ParamField path="logoBackgroundColor" type="string">
  Sets a background color for the logo mask. Useful if your logo is white with a transparent background.
</ParamField>

<ParamField path="removeLogoBorder" type="boolean">
  When true, removes the rounded mask/border applied over your logo.
</ParamField>

<ParamField path="removeShareLogin" type="boolean">
  When true, removes the sharing link functionality across the whole application.
</ParamField>

<ParamField path="skipCongratulationsScreen" type="boolean">
  Skips the congratulations screen shown after a successful domain configuration.
</ParamField>

<ParamField path="theme" type="object">
  Colors, fonts, and dimensions. See [theme](#whitelabel-theme-object) below.
</ParamField>

<ParamField path="customProperties" type="object">
  Per-screen behavior toggles. See [customProperties](#whitelabel-customproperties-object) below.
</ParamField>

<ParamField path="customCopy" type="object">
  Text and copy overrides per locale. See [customCopy](#whitelabel-customcopy-object) below.
</ParamField>

### `whiteLabel.theme` Object

Customizes the colors, fonts, and dimensions of the modal to match your app's branding.

<ParamField path="bg" type="string">
  Primary brand color (hex code). Applies to primary buttons and links. **Recommended for quick theming.**
</ParamField>

<ParamField path="fg" type="string">
  Text color on primary elements (hex code). Applies to text on buttons. **Recommended for quick theming.**
</ParamField>

<ParamField path="darkMode" type="string">
  Color scheme: `"disabled"` (light), `"enabled"` (dark), or `"auto"` (matches the system preference). Defaults to `disabled`.
</ParamField>

<ParamField path="width" type="string">
  The modal's width.
</ParamField>

<ParamField path="modalBackground" type="string">
  Background color of the modal container.
</ParamField>

<ParamField path="links" type="string">
  Links color, to override HTML's default blue.
</ParamField>

<ParamField path="lightBox.color" type="string">
  Backdrop/overlay color. Use a transparent `hsla` or `rgba` value.
</ParamField>

<ParamField path="buttons.border.style" type="string">
  The `border` CSS styling for buttons, e.g. `solid 1px #000`.
</ParamField>

<ParamField path="buttons.border.radius" type="string">
  The `border-radius` CSS styling for buttons, e.g. `5%` or `10px`.
</ParamField>

<ParamField path="inputs.border.radius" type="string">
  The `border-radius` CSS styling for input fields, e.g. `8px`.
</ParamField>

<ParamField path="inputs.borderRadius" type="string">
  camelCase alias of `inputs.border.radius`.
</ParamField>

<ParamField path="googleFont.family" type="string">
  Overrides the modal `font-family` with a Google Font.
</ParamField>

<ParamField path="googleFont.variant" type="string">
  The `font-family` normal text weight, e.g. `400`.
</ParamField>

<ParamField path="systemFont.family" type="string">
  Sets the modal `font-family` from a system font stack (no external font fetch).
</ParamField>

<ParamField path="systemFont.variant" type="string">
  The `font-family` normal text weight, e.g. `400`.
</ParamField>

<ParamField path="systemFont.boldWeight" type="string">
  The `font-family` bold text weight, e.g. `600`.
</ParamField>

### `whiteLabel.customProperties` Object

Changes behaviors related to specific elements or a screen's behavior.

<ParamField path="general.embeddedMode.selector" type="string">
  A valid CSS selector (e.g. `#entri-container`) for the target element where the Entri Connect UI should be embedded. If null, the flow opens in a modal.
</ParamField>

<ParamField path="initialScreen.showManualInstructionsCTA" type="boolean">
  Enables the go-to-manual link on the initial screen. Closes the modal and adds `authenticateManuallyClicked: true` to the `onEntriClose` event.
</ParamField>

<ParamField path="manualConfiguration.disableScreen" type="boolean">
  Prevents the manual screen from being shown. Adds `manualScreenDisabled: true` to the `onEntriClose` event.
</ParamField>

<ParamField path="existingRecords.disableScreen" type="boolean">
  Disables the Existing Records override prompt and confirms automatically.
</ParamField>

<ParamField path="providerLogin.showEntriToS" type="boolean">
  Displays the terms of service on the Provider Login screen.
</ParamField>

<ParamField path="providerLogin.changeProvider.hide" type="boolean">
  Hides the "Change provider" feature.
</ParamField>

<ParamField path="providerLogin.forwardLink.disable" type="boolean">
  Disables the Forward Link (forward-to-a-colleague) feature.
</ParamField>

<ParamField path="providerLogin.gotoManualLink.disable" type="boolean">
  Hides the "go to manual" text copy on the Provider Login screen.
</ParamField>

### `whiteLabel.customCopy` Object

Customizes texts along the flow to match your brand's tone or when the default copy doesn't fit your use case. Translations are keyed by locale; the `en` locale is required and all missing translations fall back to English.

<ParamField path="initialScreen.subTitle.${locale}" type="string">
  Sets the subtitle's translation text for the specific locale.
</ParamField>

<ParamField path="providerLogin.message.${locale}" type="string">
  Sets the Provider Login introduction's translation text for the specific locale. Accepts the `{PROVIDER}` replacement token. Supports `<strong></strong>` for bold.
</ParamField>

<ParamField path="manuallyScreen.disableManualSetupDocumentationLink" type="boolean">
  Disables opening the documentation URL set in the `manualSetupDocumentation` configuration property. Commonly combined with the `onEntriManualSetupDocumentationClick` event to trigger a custom JS function.
</ParamField>

<ParamField path="manuallyScreen.stepByStepGuide.${locale}" type="string">
  Sets the step-by-step-guide translation text for the specific locale. Supports `<link></link>` tags for triggering JS functions (useful for chatbots): enclose the call-to-action text in `<link></link>` and catch the `onEntriManualSetupDocumentationClick` event.
</ParamField>

<ParamField path="congratulations.title.${locale}" type="string">
  Sets the Congratulations title's translation text for the specific locale. Accepts the `{DOMAIN}` replacement token. Supports `<strong></strong>` for bold.
</ParamField>

<ParamField path="congratulations.description.${locale}" type="string">
  Sets the Congratulations description's translation text for the specific locale. Accepts the `{USER}` and `{DOMAIN}` placeholders. Supports `<strong></strong>` for bold.
</ParamField>

<ParamField path="congratulations.button.${locale}" type="string">
  Sets the Congratulations button call-to-action's translation text for the specific locale. Supports `<strong></strong>` for bold.
</ParamField>

<Note>
  Locales are codes such as `en`, `es`, `fr`, etc. If no matching translation is found for the locale in use, Entri's default text is used. See the full list of supported locales in the [configuration reference](/connect/configuration).
</Note>

### White label code example

```json theme={null}
{
  "whiteLabel": {
    "hideEntriLogo": true,
    "skipCongratulationsScreen": true,
    "theme": {
      "fg": "#FFFFFF",
      "bg": "#1F77F8",
      "darkMode": "auto",
      "systemFont": {
        "family": "Inter, system-ui, sans-serif",
        "variant": "400",
        "boldWeight": "600"
      }
    },
    "customProperties": {
      "providerLogin": {
        "changeProvider": { "hide": true }
      }
    },
    "customCopy": {
      "congratulations": {
        "title": { "en": "You're all set, {DOMAIN}!" }
      }
    }
  }
}
```