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
}
Keyless.UI.Color.sdkTheme = .system
// default theme is system
public enum SDKTheme {
case dark
case light
case 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
Keyless.UI.Color.primary = .magenta
Keyless.UI.Color.onPrimary = .cyan
Keyless.UI.Color.accent = .yellow
Text
It is possible to customize the following text:
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 not use 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.
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 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 enrollment
// 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"
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
:
showScreenInstructions
: affects the Instruction screen (by defaulttrue
)showScreenSuccessFlow
: affects the Success screen (by defaulttrue
)showScreenFailureFlow
: affects the Error screen (by defaulttrue
)
Example
// To hide all optional screens
val biomEnrollConfig = BiomEnrollConfig(
showScreenInstructions = false,
showScreenFailureFlow = false,
showScreenSuccessFlow = false
)
Keyless.enroll(
configuration = biomEnrollConfig,
onProgress = { /* handle progress */ },
onCompletion = { /* handle completion */ }
)
// To hide all optional screens
let biomEnrollConfig = BiomEnrollConfig(
showScreenInstructions: false,
showScreenFailureFlow: false,
showScreenSuccessFlow: false
)
Keyless.enroll(
configuration: biomEnrollConfig,
onProgress: { _ in /* handle progress */ },
onCompletion: { _ in /* handle completion */ }
)
Authentication
Use the following fields of a BiomAuthConfig
:
showScreenSuccessFlow
: affects the Step3
Example
val biomAuthConfig = BiomAuthConfig(
showScreenSuccessFlow = false
)
Keyless.authenticate(
configuration = biomAuthConfig,
onCompletion = { /* handle completion */ }
)
let biomAuthConfig = BiomAuthConfig(
showScreenSuccessFlow: false
)
Keyless.authenticate(
configuration: biomAuthConfig,
onCompletion: { _ in /* 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
Keyless.UI.Font.customFont: String = "Serif"
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
}
Keyless.UI.Color.sdkTheme = .system
// default theme is system
public enum SDKTheme {
case dark
case light
case 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.
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)
prerequisiteAloneInPhotodeprecated (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.
Dynamic Linking
We suggest to not use more than two lines of text.
Authentication.PayloadConfirmation
title
subtitle
denyCta
approveCta
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 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"
// 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"
// 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"
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
);
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
Use the following fields of a BiomEnrollConfig
:
showScreenInstructions
: affects the Step0showScreenSuccessFaceCapture
: affects the Step1SuccessshowScreenSuccessFlow
: affects the Step3
Example
val biomEnrollConfig = BiomEnrollConfig(
showScreenInstructions = false,
showScreenSuccessFaceCapture = false,
showScreenSuccessFlow = false
)
Keyless.enroll(
configuration = biomEnrollConfig,
onProgress = { /* handle progress */ },
onCompletion = { /* handle completion */ }
)
let biomEnrollConfig = BiomEnrollConfig(
showScreenSuccessFlow: false,
showScreenSuccessFaceCapture: false,
showScreenInstructions: false
)
Keyless.enroll(
configuration: biomEnrollConfig,
onProgress: { _ in /* handle progress */ },
onCompletion: { _ in /* handle completion */ }
)
Authentication
Use the following fields of a BiomAuthConfig
:
showScreenSuccessFlow
: affects the Step3
Example
val biomAuthConfig = BiomAuthConfig(
showScreenSuccessFlow = false
)
Keyless.authenticate(
configuration = biomAuthConfig,
onCompletion = { /* handle completion */ }
)
let biomAuthConfig = BiomAuthConfig(
showScreenSuccessFlow: false
)
Keyless.authenticate(
configuration: biomAuthConfig,
onCompletion: { _ in /* 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
Keyless.UI.Font.customFont: String = "Serif"
final uiCustomization = UICustomization(
customFont: "Serif"
);
Last updated
Was this helpful?