UI Customization

The Keyless SDK can be customised in order to provide a more familiar UX when integrated in any custom app.

Theme

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

Keyless will use the system defined theme by default.

Keyless.UI.Color.sdkTheme = SdkTheme.SYSTEM

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

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

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

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

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

  • Error

    • title

    • subtitle

    • cta

  • Process

    • title

    • subtitle

  • 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

Authentication

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

  • 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.

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.

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.

Dynamic Linking

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

  • Authentication.PayloadConfirmation

    • title

    • subtitle

    • denyCta

    • approveCta

Example

// 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 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"

Optional Screens

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

The default value for all of them is true which means that the step is shown.

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

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

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

Authentication

Use the following fields of a BiomAuthConfig:

  • showSuccessFeedback: affects the Step3

Example

val biomAuthConfig = BiomAuthConfig(
    showSuccessFeedback = false
)

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

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

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

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

Keyless.UI.hapticFeedbackEnabled = true

Last updated

Was this helpful?