UI Customization

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

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

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

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

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
);

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)

Step1
- text1 Showed before the user face is framed.

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

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

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

Authentication

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

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.

Example

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

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
);

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

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

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

Logo

You can show your custom logo during Enrollment, Authentication and de-enrollment. It will be shown in the upper-right corner; any custom logo can be used, it will be resized but not stretched.

logo positioning may overlap with custom text depending on your custom text

Example

Add your own image .png in your /res/drawable folder to set it using Keyless.UI.Logo.bitmap property.

Keyless.UI.Logo.bitmap = BitmapFactory.decodeResource(
                resources,
                R.drawable.icon_example)

Add your own image to the app bundle and set it using Keyless.UI.Logo property.

Keyless.UI.Image.logoImage = UIImage(named: "your custom image")

Last updated 10 days ago