UI Customization

The Keyless SDK can be customized in order to provide a seamless UX when integrated in a custom app.

Colors

Property

Description

Keyless.UI.Color.backgroundColor

The background color of the enrollment screen

Keyless.UI.Color.foregroundColor

The color of the texts

Keyless.UI.Color.primaryColor

The color of the animated circle during the authentication

Keyless.UI.Color.secondaryColor

The color of the spinning dots during the enrollment

Example:

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

Texts

Please note that during the enrollment, a maximum of three lines of text can be displayed and during the authentication/de-enrollment a maximum of two lines of text can be displayed.

Property

Default

Keyless.UI.Text.Enrollment.Step1.text1

Position your face within the frame

Keyless.UI.Text.Enrollment.Step2.text1

Enrolling, please wait… → showed until 33%

Keyless.UI.Text.Enrollment.Step2.text2

Enrolling, please wait… → showed until 66%

Keyless.UI.Text.Enrollment.Step2.text3

Enrolling, please wait… → showed until 100%

Keyless.UI.Text.Enrollment.Step3.text1

Keyless account created successfully!

Keyless.UI.Text.Authentication.Step1.text1

Please look into the camera

Keyless.UI.Text.Authentication.Step2.text1

Communicating with the Keyless network

Keyless.UI.Text.Authentication.Step3.text1

Approved!

Example

// Custom text for enrollment
Keyless.UI.Text.Enrollment.Step1.text1 = "(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

Use any font available in your iOS app.

Property

Default

Keyless.UI.Font.regularFontSize

24 (px)

Keyless.UI.Font.regularFontName

MonumentGrotesk-Regular

Keyless.UI.Font.smallFontSize

16 (px)

Keyless.UI.Font.smallFontName

MonumentGrotesk-Regular

Example

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

Any custom logo can be used and it will be shown in the upper-right corner of the enrollment/de-enrollment and authentication views, it will be resized but not stretched. The contentMode is set to .scaleAspectFit.

Property

Default

Keyless.UI.Image.logoImage

nil

Example

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