# UI Customization

{% tabs %}
{% tab title="SDK v5" %}
**Theme**

The SDK theme can be customized to be `dark`, `light` or `system`.

Keyless will use the system defined theme by default.

{% tabs %}
{% tab title="Android" %}

```kotlin
Keyless.UI.Color.sdkTheme = SdkTheme.SYSTEM

// default theme is SYSTEM
public enum class SdkTheme {
    DARK,
    LIGHT,
    SYSTEM
}
```

{% endtab %}

{% tab title="iOS" %}

```swift
Keyless.UI.Color.sdkTheme = .system

// default theme is system
public enum SDKTheme {
   case dark
   case light
   case system
}
```

{% endtab %}

{% tab title="React Native" %}

```javascript
import Keyless, { SdkTheme } from '@react-native-keyless/sdk';

const ui = new Keyless.UI();
ui.color.sdkTheme = Keyless.SdkTheme.LIGHT;
await Keyless.updateUI(ui);

// default theme is SYSTEM
export enum SdkTheme {
  SYSTEM = 'SYSTEM',
  LIGHT = 'LIGHT',
  DARK = 'DARK',
}
```

{% endtab %}
{% endtabs %}

**Colors**

It is possible to customize the following colors:

* **primary color**\
  This color is the one that appears most frequently across the screens and components.
* **onPrimary color**\
  The color used for elements that appear on top of the PrimaryColor, ensuring clear contrast and visibility.
* **accent color**\
  Color used in some small details of the UI (e.g. Camera Frame borders)

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
Keyless.UI.Color.primary = 0xFF1833B8
Keyless.UI.Color.onPrimary = 0xFFFED900
Keyless.UI.Color.accent = 0xFFFED900
```

{% endtab %}

{% tab title="iOS" %}

```swift
Keyless.UI.Color.primary = .magenta
Keyless.UI.Color.onPrimary = .cyan
Keyless.UI.Color.accent = .yellow
```

{% endtab %}

{% tab title="React Native" %}

```javascript
const ui = new Keyless.UI();
ui.color.accent = '#1833B8';
ui.color.primary ='#FFFFFF';
ui.color.accent = '#FED900';
await Keyless.updateUI(ui);
```

{% endtab %}
{% endtabs %}

**Text**

It is possible to customize the following text across the Introduction, Error, Enrollment and Success screens. Live Filters cannot be customized individually but translation files are available and can be provided.\\

**Introduction**

* title\
  Should be no longer than two lines
* description\
  Should be no longer than four lines
* cta\
  Should be no more than two words

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-3266a6f7139686fadf946818950692bc0bc67ad9%2FintroductionScreen.PNG?alt=media" alt="" width="188"><figcaption></figcaption></figure>

**Enrollment**

We suggest to use no more than three lines of text.

* **Instruction**
  * title
  * subtitle
  * tip1\
    This typically suggests to stay in a well lit area
  * tip2\
    This typically suggests to remove any glasses or eyewear
  * tip3\
    This typically suggests to be alone in the frame
  * continueCta

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-8b7b482b637f52e3cd3c082c7b34805da421d052%2FenrollmentInstructionScreen.PNG?alt=media" alt="" width="188"><figcaption></figcaption></figure>

* **Error**
  * **title**
  * **subtitle**
  * **cta**

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-2efe2869395a208b14c3c8cebdd59ae0c866d765%2FenrollmentErrorScreen.PNG?alt=media" alt="" width="188"><figcaption></figcaption></figure>

* **Process**
  * **title**
  * **subtitle**

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-c76c55a51fa1d4fa9d397bddbcba0dd247aa3ec4%2FenrollmentProcessingScreen.PNG?alt=media" alt="" width="188"><figcaption></figcaption></figure>

* **Success**
  * **title**\
    Showed when the enrollment has been successfully completed.
  * **subtitle**\
    Showed when the enrollment has been successfully completed
  * **cta**\
    Button text to show on Success screen

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-745833937ddea09fc234dd6429de7e8eedd50ff7%2FenrollmentSuccessScreen.PNG?alt=media" alt="" width="188"><figcaption></figcaption></figure>

**Authentication**

We recommend using no more than two lines of text on each.

* **loading**\
  Shown before the camera opens.
* **centerFace**\
  Shown before the user positions the face.
* **scan**\
  Shown while scanning the user's face.
* **authenticate**\
  Shown while authenticating the user.
* **success**\
  Shown when the user has been authenticated successfully.

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-b4741bb6f8f8a5cb518520a1db301f8b6a000ed4%2Fauthentication_loading.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-c073165688f097854002342e0d9ec7f817a17f5b%2FauthenticationCenterFace.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-b9027df0f0a6904ef0f8ddf1c41070fc31ab8f61%2FauthenticationScan.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-3aa954ee13ad8c0054dd1560fafcbc66b3036353%2FauthenticationAuthenticate.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-fe20117c4bba2907101989d7426f60e5d95827b6%2FauthenticationSuccess.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

**Authentication whitout Camera Preview (BETA Available from 5.4.1)**

We recommend using no more than two lines of text on each.

* **lookHere**\
  Shown before the user positions the face.
* **authenticate**\
  Shown while authenticating the user.
* **success**\
  Shown when the user has been authenticated successfully.

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-f5d6286d94e6fe094a10d8cb8daf950b8cb3ca83%2Fnocamerapreview_white.gif?alt=media" alt="" width="188"><figcaption></figcaption></figure>

**Live Filters**

These appear dynamically on the camera preview screen during enrollment and guide the user to capture a high quality selfie are core to the product and subject to iterative change over time as we improve the product. Therefore these are not configurable individually however we do support localization – currently English and Italian are available but new ones can be created upon request.

The example below shows a live filter appearing to help the user. The corners/frame turns to the accent color (yellow in this example) once the biometric library is satisfied that a suitable image has been captured.

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-d402939064a37cbd68a1be8142345a5187ce8f82%2FScreenshot%202025-10-03%20at%2011.03.38.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

The following filters are returned though note the first two ("It's a bit dark, move closer to the light" and "The image is too bright, adjust lightning") are due to be added in Q4 2025.

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-25d38ff209804c38edb9ae9d2b598957e9593541%2FScreenshot%202025-10-03%20at%2010.58.01.png?alt=media" alt="" width="337"><figcaption></figcaption></figure>

**Dynamic Linking**

We recommend using no more than two lines of text on each.

* **Authentication.PayloadConfirmation**
  * title
  * subtitle
  * denyCta
  * approveCta

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-72997bef69ad35c0834de5420e9d87282b569716%2FauthenticationDynamicLinking.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
// Custom text for introduction
Keyless.UI.Text.Introduction.title = "(custom) Keyless Secure Authentication"
Keyless.UI.Text.Introduction.description = "(custom) Hereon, you will start face scanning..."
Keyless.UI.Text.Introduction.cta = "(custom) Continue"

// Custom text for enrollment

// prelimiar information for enrollment
Keyless.UI.Text.Enrollment.Instruction.title = "(custom) Enroll your face"
Keyless.UI.Text.Enrollment.Instruction.description = "(custom) On the next screen, we will take a photo of your face to create your account."
Keyless.UI.Text.Enrollment.Instruction.tip1 = "(custom) Center your face in the frame"
Keyless.UI.Text.Enrollment.Instruction.tip2 = "(custom) Look directly at the screen"
Keyless.UI.Text.Enrollment.Instruction.tip3 = "(custom) Ensure you are in a well-lit area"
Keyless.UI.Text.Enrollment.Instruction.continueCta = "(custom) Continue"

// Enrollment loading screen
Keyless.UI.Text.Enrollment.Process.title = "(custom 1) Hold on a few seconds"
Keyless.UI.Text.Enrollment.Process.subtitle = "(custom 2) We're creating your private key"

// Error screen
Keyless.UI.Text.Enrollment.Error.title = "(custom) Something went wrong"
Keyless.UI.Text.Enrollment.Error.subtitle = "(custom) Please try again"
Keyless.UI.Text.Enrollment.Error.cta = "(custom) Continue"

// Success screen
Keyless.UI.Text.Enrollment.Success.title = "(custom) Keyless account created successfully!"
Keyless.UI.Text.Enrollment.Success.subtitle = "(custom) Keyless account created successfully!"
Keyless.UI.Text.Enrollment.Success.cta = "(custom) Keyless account created successfully!"

// Custom text for authentication
Keyless.UI.Text.Authentication.Step1.text1 = "(custom) Please look into the camera"
Keyless.UI.Text.Authentication.Step2.text1 = "(custom) Communicating with the Keyless network"
Keyless.UI.Text.Authentication.Step3.text1 = "(custom) Approved"

// Custom text for authentication without camera preview available from version 5.4.1
Keyless.UI.Text.Authentication.NoCameraPreview.lookHere = "(custom) Please look into the camera"
Keyless.UI.Text.Authentication.NoCameraPreview.authenticate = "(custom) Communicating with the Keyless network"
Keyless.UI.Text.Authentication.NoCameraPreview.success = "(custom) Approved"

// Custom text for dynamic linking
Keyless.UI.Text.Authentication.PayloadConfirmation.title = "(custom) Authentication request"
Keyless.UI.Text.Authentication.PayloadConfirmation.subtitle = "(custom) Please, approve the payment to complete the process"
Keyless.UI.Text.Authentication.PayloadConfirmation.denyCta = "(custom) Deny"
Keyless.UI.Text.Authentication.PayloadConfirmation.approveCta = "(custom) Approve"
```

{% endtab %}

{% tab title="iOS" %}

```swift

// Custom text for introduction
Keyless.UI.Text.Introduction.title = "(custom) Keyless Secure Authentication"
Keyless.UI.Text.Introduction.description = "(custom) Hereon, you will start face scanning..."
Keyless.UI.Text.Introduction.cta = "(custom) Continue"

// Custom text for enrollment

// Prelimiar information for enrollment
Keyless.UI.Text.Enrollment.Instruction.title = "(custom) Enroll your face"
Keyless.UI.Text.Enrollment.Instruction.description = "(custom) On the next screen, we will take a photo of your face to create your account."
Keyless.UI.Text.Enrollment.Instruction.tip1 = "(custom) Center your face in the frame"
Keyless.UI.Text.Enrollment.Instruction.tip2 = "(custom) Look directly at the screen"
Keyless.UI.Text.Enrollment.Instruction.tip3 = "(custom) Ensure you are in a well-lit area"
Keyless.UI.Text.Enrollment.Instruction.continueCta = "(custom) Continue"

// Enrollment loading screen
Keyless.UI.Text.Enrollment.Process.title = "(custom 1) Hold on a few seconds"
Keyless.UI.Text.Enrollment.Process.subtitle = "(custom 2) We're creating your private key"

// Error screen
Keyless.UI.Text.Enrollment.Error.title = "(custom) Something went wrong"
Keyless.UI.Text.Enrollment.Error.subtitle = "(custom) Please try again"
Keyless.UI.Text.Enrollment.Error.cta = "(custom) Continue"

// Success screen
Keyless.UI.Text.Enrollment.Success.title = "(custom) Keyless account created successfully!"
Keyless.UI.Text.Enrollment.Success.subtitle = "(custom) Keyless account created successfully!"
Keyless.UI.Text.Enrollment.Success.cta = "(custom) Keyless account created successfully!"

// Custom text for authentication
Keyless.UI.Text.Authentication.Step1.text1 = "(custom) Please look into the camera"
Keyless.UI.Text.Authentication.Step2.text1 = "(custom) Communicating with the Keyless network"
Keyless.UI.Text.Authentication.Step3.text1 = "(custom) Approved"

// Custom text for authentication without camera preview available from version 5.4.1
Keyless.UI.Text.Authentication.NoCameraPreview.lookHere = "(custom) Please look into the camera"
Keyless.UI.Text.Authentication.NoCameraPreview.authenticate = "(custom) Communicating with the Keyless network"
Keyless.UI.Text.Authentication.NoCameraPreview.success = "(custom) Approved"

// Custom text for dynamic linking
Keyless.UI.Text.Authentication.PayloadConfirmation.title = "(custom) Authentication request"
Keyless.UI.Text.Authentication.PayloadConfirmation.subtitle = "(custom) Please, approve the payment to complete the process"
Keyless.UI.Text.Authentication.PayloadConfirmation.denyCta = "(custom) Deny"
Keyless.UI.Text.Authentication.PayloadConfirmation.approveCta = "(custom) Approve"
```

{% endtab %}

{% tab title="React Native" %}

```javascript
import Keyless from '@react-native-keyless/sdk';
import Keyless from '@react-native-keyless/sdk';

const ui = new Keyless.UI();
    // Custom text for introduction
    ui.text.introduction.title = '(custom) Keyless Secure Authentication';
    ui.text.introduction.description = '(custom) Hereon, you will start face scanning...';
    ui.text.introduction.cta = '(custom) Continue';

    // Custom text for enrollment

    // Prelimiar information for enrollment
    ui.text.enrollment.instruction.title = '(custom) Enroll your face';
    ui.text.enrollment.instruction.tip1 = '(custom) Center your face in the frame';
    ui.text.enrollment.instruction.tip2 = '(custom) Look directly at the screen';
    ui.text.enrollment.instruction.tip3 = '(custom) Ensure you are in a well-lit area';
    ui.text.enrollment.instruction.continueCta = '(custom) Continue';
    
    // Enrollment loading screen
    ui.text.enrollment.process.title = '(custom) Hold on a few seconds';
    ui.text.enrollment.process.subtitle = "(custom) We're creating your private key";
    
    // Error screen
    ui.text.enrollment.error.title = '(custom) Something went wrong';
    ui.text.enrollment.error.subtitle = '(custom) Please try again';
    ui.text.enrollment.error.cta = '(custom) Continue';
    
    // Success screen
    ui.text.enrollment.success.title = '(custom) Keyless account created successfully!';
    ui.text.enrollment.success.subtitle = '(custom) Keyless account created successfully!';
    ui.text.enrollment.success.cta = '(custom) Keyless account created successfully!';

    // Custom text for authentication
    ui.text.authentication.centerFace = '(custom) Please look into the camera';
    ui.text.authentication.scan = '(custom) Communicating with the Keyless network';
    ui.text.authentication.authenticate = '(custom) Approved';
    ui.text.authentication.success = '(custom) Approved';
    ui.text.authentication.loading = '(custom) Loading';

    // Custom text for dynamic linking
    ui.text.authentication.payloadConfirmation.title = '(custom) Authentication request';
    ui.text.authentication.payloadConfirmation.subtitle = '(custom) Please, approve the payment to complete the process';
    ui.text.authentication.payloadConfirmation.denyCta = '(custom) Deny';
    ui.text.authentication.payloadConfirmation.approveCta = '(custom) Approve';

    await Keyless.updateUI(ui);
```

{% endtab %}
{% endtabs %}

**Optional Screens**

It is possible to show or hide some of the Enrollment and Authentication steps above by setting to `false` the following fields.

{% hint style="info" %}
The default value for all of them is `true` which means that the step is shown.
{% endhint %}

**Enrollment**

To toggle certain screens in Enrollment flow, use the following fields of a `BiomEnrollConfig`:

* `showInstructionsScreen`: affects the **Instruction screen** (by default `true`)
* `showSuccessFeedback`: affects the **Success screen** (by default `true`)
* `showFailureFeedback`: affects the **Error screen** (by default `true`)

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
// To hide all optional screens
val biomEnrollConfig = BiomEnrollConfig(
    showInstructionsScreen = false,
    showSuccessFeedback = false,
    showFailureFeedback = false
)

Keyless.enroll(
    configuration = biomEnrollConfig, 
    onCompletion = { /* handle completion */ }
)
```

{% endtab %}

{% tab title="iOS" %}

```swift
// To hide all optional screens
let biomEnrollConfig = BiomEnrollConfig(
    showInstructionsScreen: false,
    showSuccessFeedback: false,
    showFailureFeedback: false
)
        
Keyless.enroll(
    configuration: biomEnrollConfig,
    onCompletion: { _ in /* handle completion */ }
)
```

{% endtab %}

{% tab title="React Native" %}

```javascript
import Keyless, { BiomEnrollConfig } from '@react-native-keyless/sdk';

const enrollConfig = new BiomEnrollConfig({
  showScreenInstructions: false,
  showSuccessFeedback: false,
  showFailureFeedback: false
});

const result = await Keyless.enroll(enrollConfig);
```

{% endtab %}
{% endtabs %}

**Authentication**

Use the following fields of a `BiomAuthConfig`:

* `showSuccessFeedback`: affects the **Step3**

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
val biomAuthConfig = BiomAuthConfig(
    showSuccessFeedback = false
)

Keyless.authenticate(
    configuration = biomAuthConfig,
    onCompletion = { /* handle completion */ }
)
```

{% endtab %}

{% tab title="iOS" %}

```swift
let biomAuthConfig = BiomAuthConfig(
    showSuccessFeedback: false
)
        
Keyless.authenticate(
    configuration: biomAuthConfig,
    onCompletion: { _ in /* handle completion */ }
)
```

{% endtab %}

{% tab title="React Native" %}

```javascript
import Keyless, { BiomAuthConfig } from '@react-native-keyless/sdk';

const config = new BiomAuthConfig({
  showSuccessFeedback: false,
});

 const result = await Keyless.enroll(config);
```

{% endtab %}
{% endtabs %}

**Fonts**

It is possible to customize the font.

* Android: requires an `android.graphics.Typeface` object.
* iOS: requires a `String`, the name of the font.

The custom font must be set as soon as available, a good moment to do so is before calling `Keyless.configure`

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
Keyless.UI.Font.customFont: Typeface = Typeface.SERIF
```

{% endtab %}

{% tab title="iOS" %}

```swift
Keyless.UI.Font.customFont: String = "Serif"
```

{% endtab %}
{% endtabs %}

**Haptic feedback**

Haptic feedback provides subtle vibration responses to user interactions.

It is possible to disable/enable haptic feedback.\
By default, haptic feedback is **enabled** (`true`).

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
Keyless.UI.hapticFeedbackEnabled = true
```

{% endtab %}

{% tab title="iOS" %}

```swift
Keyless.UI.hapticFeedbackEnabled = false
```

{% endtab %}
{% endtabs %}
{% endtab %}

{% tab title="SDK v4" %}
**Theme**

The SDK theme can be customized to be `dark`, `light` or `system`.

Keyless will use the system defined theme by default.

{% tabs %}
{% tab title="Android" %}

```kotlin
Keyless.UI.Color.sdkTheme = SdkTheme.SYSTEM

// default theme is SYSTEM
public enum class SdkTheme {
    DARK,
    LIGHT,
    SYSTEM
}
```

{% endtab %}

{% tab title="iOS" %}

```swift
Keyless.UI.Color.sdkTheme = .system

// default theme is system
public enum SDKTheme {
   case dark
   case light
   case system
}
```

{% endtab %}
{% endtabs %}

**Colors**

It is possible to customize the following colors:

* **primary color**\
  This color is the one that appears most frequently across the screens and components.
* **onPrimary color**\
  The color used for elements that appear on top of the PrimaryColor, ensuring clear contrast and visibility.

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
Keyless.UI.Color.primary = 0xFF1833B8
Keyless.UI.Color.onPrimary = 0xFFFED900
```

{% endtab %}

{% tab title="iOS" %}

```swift
Keyless.UI.Color.primary = .magenta
Keyless.UI.Color.onPrimary = .cyan
```

{% endtab %}

{% tab title="Flutter" %}

```dart
final uiCustomization = UICustomization(
    primaryColor: 0xFF1833B8,
    onPrimaryColor: 0xFFFED900,
);

// Pass the UI customization when configuring the SDK
final setupConfiguration = SetupConfiguration(
    apiKey: "YOUR_API_KEY",
    hosts: ["YOUR_HOSTS"],
    uiCustomization: uiCustomization
);
```

{% endtab %}
{% endtabs %}

**Text**

It is possible to customize the following text:

**Enrollment**

We suggest to not use more than three lines of text.

* **Step0 (information screen before enrollment)**
  * **title**
  * description
  * prerequisiteCenterFace
  * prerequisiteDirectLook
  * prerequisiteWellLitArea
  * prerequisiteRemoveEyeWear
  * continueCta
  * closeScreenButtonContentDescription (the content description of the close button for accessibility)
  * ~~prerequisiteAloneInPhoto~~ deprecated (will no longer be shown)

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-683e0b88d1a2881ab082810b9546f2bc28738fc7%2FenrollmentStep0.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

* **Step1**
  * **text1**\
    Showed before the user face is framed.

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-5e0232064713a7c1e5eda4b5e53356587af6d196%2FenrollmentStep1.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

* **step1Success**
  * **message**\
    Showed after the user face is framed with a successful animation.

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-29dc6e4d31f5734caa1242eb4a83c244f85a3d47%2FenrollementStep1Success.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

* **Step2**
  * **text1**\
    Showed after the user face has been framed and the progress is between 0% and 33%.
  * **text2**\
    Showed after the user face has been framed and the progress is between 34% and 66%.
  * **text3**\
    Showed after the user face has been framed and the progress is between 67% and 100%.
  * **subtitle1**\
    Showed during the entire enrollment progress

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-59df9687b8abc90ded62b1cd7d3b1104a50d3eed%2FenrollmentStep2text1.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

* **Step3**
  * **text1**\
    Showed when the enrollment has been successfully completed.
  * **subtitle1**\
    Showed when the enrollment has been successfully completed

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-9abd674d8b51d37f06a23a0566e2c12352c62781%2FenrollmentStep3.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

**Authentication**

We recommend using no more than two lines of text on each.

* **Step1**
  * **text1**\
    Showed before the user face is framed.
* **Step2**
  * **text1**\
    Showed after the user face has been framed.
* **Step3**
  * **text1**
    * Showed when the authentication has been successfully completed.

**Dynamic Linking**

We recommend using no more than two lines of text on each.

* **Authentication.PayloadConfirmation**
  * title
  * subtitle
  * denyCta
  * approveCta

<figure><img src="https://424053338-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCDr5oxGulTybKzhddo%2Fuploads%2Fgit-blob-72997bef69ad35c0834de5420e9d87282b569716%2FauthenticationDynamicLinking.png?alt=media" alt="" width="188"><figcaption></figcaption></figure>

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
// Custom text for enrollment

// prelimiar information for enrollment
Keyless.UI.Text.Enrollment.Step0.title = "(custom) Enroll your face"
Keyless.UI.Text.Enrollment.Step0.description = "(custom) On the next screen, we will take a photo of your face to create your account."

Keyless.UI.Text.Enrollment.Step0.prerequisiteCenterFace = "(custom) Center your face in the frame"
Keyless.UI.Text.Enrollment.Step0.prerequisiteDirectLook = "(custom) Look directly at the screen"
Keyless.UI.Text.Enrollment.Step0.prerequisiteWellLitArea = "(custom) Ensure you are in a well-lit area"
Keyless.UI.Text.Enrollment.Step0.prerequisiteRemoveEyeWear = "(custom) Remove any eyewear or hats"
Keyless.UI.Text.Enrollment.Step0.continueCta = "(custom) Continue"

// remaining steps of the enrollment
Keyless.UI.Text.Enrollment.Step1.text1 = "(custom) Put your face within the frame"
Keyless.UI.Text.Enrollment.Step1Success.message = "(custom) Photo captured successfully"

Keyless.UI.Text.Enrollment.Step2.text1 = "(custom 1) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step2.text2 = "(custom 2) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step2.text3 = "(custom 3) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step3.text1 = "(custom) Keyless account created successfully!"

// Custom text for authentication
Keyless.UI.Text.Authentication.Step1.text1 = "(custom) Please look into the camera"
Keyless.UI.Text.Authentication.Step2.text1 = "(custom) Communicating with the Keyless network"
Keyless.UI.Text.Authentication.Step3.text1 = "(custom) Approved"

// Custom text for dynamic linking
Keyless.UI.Text.Authentication.PayloadConfirmation.title = "(custom) Authentication request"
Keyless.UI.Text.Authentication.PayloadConfirmation.subtitle = "(custom) Please, approve the payment to complete the process"
Keyless.UI.Text.Authentication.PayloadConfirmation.denyCta = "(custom) Deny"
Keyless.UI.Text.Authentication.PayloadConfirmation.approveCta = "(custom) Approve"
```

{% endtab %}

{% tab title="iOS" %}

<pre class="language-swift"><code class="lang-swift">// Custom text for enrollment

// prelimiar information for enrollment
Keyless.UI.Text.Enrollment.Step0.title = "(custom) Enroll your face"
Keyless.UI.Text.Enrollment.Step0.description = "(custom) On the next screen, we will take a photo of your face to create your account."

Keyless.UI.Text.Enrollment.Step0.prerequisiteCenterFace = "(custom) Center your face in the frame"
Keyless.UI.Text.Enrollment.Step0.prerequisiteDirectLook = "(custom) Look directly at the screen"
Keyless.UI.Text.Enrollment.Step0.prerequisiteWellLitArea = "(custom) Ensure you are in a well-lit area"
Keyless.UI.Text.Enrollment.Step0.prerequisiteRemoveEyeWear = "(custom) Remove any eyewear or hats"
Keyless.UI.Text.Enrollment.Step0.continueCta = "(custom) Continue"

// remaining steps of the enrollment
<strong>Keyless.UI.Text.Enrollment.Step1.text1 = "(custom) Put your face within the frame"
</strong>Keyless.UI.Text.Enrollment.Step1Success.message = "(custom) Position your face within the frame"

Keyless.UI.Text.Enrollment.Step2.text1 = "(custom 1) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step2.text2 = "(custom 2) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step2.text3 = "(custom 3) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step3.text1 = "(custom) Keyless account created successfully!"

// Custom text for authentication
Keyless.UI.Text.Authentication.Step1.text1 = "(custom) Please look into the camera"
Keyless.UI.Text.Authentication.Step2.text1 = "(custom) Communicating with the Keyless network"
Keyless.UI.Text.Authentication.Step3.text1 = "(custom) Approved"

// Custom text for dynamic linking
Keyless.UI.Text.Authentication.PayloadConfirmation.title = "(custom) Authentication request"
Keyless.UI.Text.Authentication.PayloadConfirmation.subtitle = "(custom) Please, approve the payment to complete the process"
Keyless.UI.Text.Authentication.PayloadConfirmation.denyCta = "(custom) Deny"
Keyless.UI.Text.Authentication.PayloadConfirmation.approveCta = "(custom) Approve"
</code></pre>

{% endtab %}

{% tab title="Flutter" %}

```dart
final uiCustomization = UICustomization(
    // Enrollment Step 0
    enrollmentStep0Title: "(custom) Enroll your face",
    enrollmentStep0Description: "(custom) On the next screen, we will take a photo of your face to create your account.",
    enrollmentStep0PrerequisiteCenterFace: "(custom) Center your face in the frame",
    enrollmentStep0PrerequisiteDirectLook: "(custom) Look directly at the screen",
    enrollmentStep0PrerequisiteWellLitArea: "(custom) Ensure you are in a well-lit area",
    enrollmentStep0PrerequisiteRemoveEyeWear: "(custom) Remove any eyewear or hats",
    enrollmentStep0ContinueCta: "(custom) Continue",
    
    // Enrollment Steps
    enrollmentStep1Text: "(custom) Put your face within the frame",
    enrollmentStep1SuccessText: "(custom) Photo captured successfully",
    
    enrollmentStep2Text1: "(custom 1) Enrolling, please wait…",
    enrollmentStep2Text2: "(custom 2) Enrolling, please wait…",
    enrollmentStep2Text3: "(custom 3) Enrolling, please wait…",
    enrollmentStep2Subtitle: "(custom) Processing your enrollment",
    
    enrollmentStep3Text: "(custom) Keyless account created successfully!",
    enrollmentStep3Subtitle: "(custom) You're all set!",
    
    // Authentication Steps
    authenticationStep1: "(custom) Please look into the camera",
    authenticationStep2: "(custom) Communicating with the Keyless network",
    authenticationStep3: "(custom) Approved",
);

// Pass the UI customization when configuring the SDK
final setupConfiguration = SetupConfiguration(
    apiKey: "YOUR_API_KEY",
    hosts: ["YOUR_HOSTS"],
    uiCustomization: uiCustomization
);
```

{% endtab %}
{% endtabs %}

**Optional Screens**

It is possible to show or hide some of the Enrollment and Authentication steps above by setting to `false` the following fields.

{% hint style="info" %}
The default value for all of them is `true` which means that the step is shown.
{% endhint %}

**Enrollment**

Use the following fields of a `BiomEnrollConfig`:

* `showScreenInstructions`: affects the **Step0**
* `showScreenSuccessFaceCapture`: affects the **Step1Success**
* `showScreenSuccessFlow`: affects the **Step3**

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
val biomEnrollConfig = BiomEnrollConfig(
    showScreenInstructions = false,
    showScreenSuccessFaceCapture = false,
    showScreenSuccessFlow = false
)

Keyless.enroll(
    configuration = biomEnrollConfig, 
    onCompletion = { /* handle completion */ }
)
```

{% endtab %}

{% tab title="iOS" %}

```swift
let biomEnrollConfig = BiomEnrollConfig(
    showScreenSuccessFlow: false,
    showScreenSuccessFaceCapture: false,
    showScreenInstructions: false
)
        
Keyless.enroll(
    configuration: biomEnrollConfig,
    onCompletion: { _ in /* handle completion */ }
)
```

{% endtab %}
{% endtabs %}

**Authentication**

Use the following fields of a `BiomAuthConfig`:

* `showScreenSuccessFlow`: affects the **Step3**

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
val biomAuthConfig = BiomAuthConfig(
    showScreenSuccessFlow = false
)

Keyless.authenticate(
    configuration = biomAuthConfig,
    onCompletion = { /* handle completion */ }
)
```

{% endtab %}

{% tab title="iOS" %}

```swift
let biomAuthConfig = BiomAuthConfig(
    showScreenSuccessFlow: false
)
        
Keyless.authenticate(
    configuration: biomAuthConfig,
    onCompletion: { _ in /* handle completion */ }
)
```

{% endtab %}
{% endtabs %}

**Fonts**

It is possible to customize the font.

* Android: requires an `android.graphics.Typeface` object.
* iOS: requires a `String`, the name of the font.

The custom font must be set as soon as available, a good moment to do so is before calling `Keyless.configure`

**Example**

{% tabs %}
{% tab title="Android" %}

```kotlin
Keyless.UI.Font.customFont: Typeface = Typeface.SERIF
```

{% endtab %}

{% tab title="iOS" %}

```swift
Keyless.UI.Font.customFont: String = "Serif"
```

{% endtab %}

{% tab title="Flutter" %}

```dart
final uiCustomization = UICustomization(
    customFont: "Serif"
);
```

{% endtab %}
{% endtabs %}
{% endtab %}
{% endtabs %}