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")
Last modified 1yr ago
Export as PDF
Copy link