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:

Background color The background color of the enrollment screen.
Foreground color The color of the texts.
Primary color The color of the animated circle during the authentication.
Secondary color The color of the spinning dots during the enrollment.

Example

Keyless.UI.Color.backgroundColor = 0XFF000000
Keyless.UI.Color.foregroundColor = 0XFFFFFFFF
Keyless.UI.Color.primaryColor = 0xFF1833B8
Keyless.UI.Color.secondaryColor = 0xFFFED900

Keyless.UI.Color.backgroundColor = .gray
Keyless.UI.Color.foregroundColor = .lightGray
Keyless.UI.Color.primaryColor = .magenta
Keyless.UI.Color.secondaryColor = .cyan

Texts

It is possible to customize the following texts:

Enrollment

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

step 0 (information screen before enrollment)
- title
- description
- prerequisitesHeader
- prerequisiteAloneInPhoto
- prerequisiteDirectLook
- prerequisiteWellLitArea
- continueCta
step 1
- text 1 Showed before the user face is framed.
step1Success
- message Showed after the user face is framed with a successful animation.
step 2
- text 1 Showed after the user face has been framed and the progress is between 0% and 33%.
- text 2 Showed after the user face has been framed and the progress is between 34% and 66%.
- text 3 Showed after the user face has been framed and the progress is between 67% and 100%.
step 3
- text 1 Showed when the enrollment has been successfully completed.

Authentication

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

step 1
- text 1 Showed before the user face is framed.
step 2
- text 1 Showed after the user face has been framed.
step 3
- text 1
  - Showed when the authentication has been successfully completed.

Example

// Custom text for enrollment

// prelimiar inforamtion 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.prerequisitesHeader = "(custom) Please be sure:"
Keyless.UI.Text.Enrollment.Step0.prerequisiteAloneInPhoto = "(custom) you are alone in the photo"
Keyless.UI.Text.Enrollment.Step0.prerequisiteDirectLook = "(custom) you look directly at the screen"
Keyless.UI.Text.Enrollment.Step0.prerequisiteWellLitArea = "(custom) you are in a well-lit area"
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 inforamtion 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.prerequisitesHeader = "(custom) Please be sure:"
Keyless.UI.Text.Enrollment.Step0.prerequisiteAloneInPhoto = "(custom) you are alone in the photo"
Keyless.UI.Text.Enrollment.Step0.prerequisiteDirectLook = "(custom) you look directly at the screen"
Keyless.UI.Text.Enrollment.Step0.prerequisiteWellLitArea = "(custom) you are in a well-lit area"
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"

Fonts

It is possible to customize the font face (iOS only) and size for two kinds of fonts: regular and small.

Example

Keyless.UI.Font.regularFontSize = 20
Keyless.UI.Font.smallFontSize = 12

Keyless.UI.Font.regularFontSize = 20
Keyless.UI.Font.regularFontName = "Your custom font"
Keyless.UI.Font.smallFontSize = 14
Keyless.UI.Font.smallFontName = "Your custom font"

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

PreviousUser and device management NextError handling

Last updated 4 months ago