Customize the iOS user interface
Last updated: October 28, 2024
This topic describes how to customize the user experience on devices running iOS. Some options are applicable to all claim types, others are specific to Genuine Presence Assurance® (GPA) or Liveness Assurance™ (LA) transactions.
See the implementation examples on GitHub: https://github.com/iProov/ios#options
Notes
-
Click a thumbnail image below to enlarge it.
-
The defaults support accessibility requirements and have been verified to comply with WCAG 2.1 AA guidelines.
Select an SDK version
To display options that are applicable to your environment, select a version of the SDK:
General UI options
The following options are at the top level of options.
| Option name | Description | Default | Example | User experience |
|---|---|---|---|---|
title
|
The custom title displayed at the top of the screen during a canny preview. | " "(Empty string) |
options.title = My title
|
|
titleTextColor
|
The color of the title text. | .white
|
options.titleTextColor = .black
|
|
filter
|
You can also customize the:
For LA you can apply a natural filter style. |
|
options.filter = LineDrawingFilter(style: .vibrant, foregroundColor: UIColor.black,backgroundColor: UIColor.white)
|
|
stringsBundle
|
App bundle from where you can retrieve strings. | nil
|
||
stringsTable
|
App table from where you can retrieve strings. | nil
|
||
closeButtonTintColor
|
The tint color applied to the Close button. | .white
|
options.closeButtonTintColor = .black
|
|
closeButtonImage
|
Custom Close button icon. | iProov supplied icon | ||
font
|
Custom font for the title and prompt. | HelveticaNeue-Medium
|
||
logoImage
|
Custom logo next to the title. | nil
|
||
promptTextColor
|
The color of the text in the prompt box. | .white
|
options.promptTextColor = .black
|
|
promptBackgroundColor
|
The background color of the prompt box. | .black.withAlphaComponent(0.8)
|
options.promptBackgroundColor = .white
|
|
promptRoundedCorners
|
Prompt box corner style: Round: Straight: |
true
|
options.promptRoundedCorners = false
|
|
|
presentationDelegate |
Custom logic for presenting and dismissing the iProov user interface. | DefaultPresentationDelegate()
|
options.ui.presentationDelegate = MyPresentationDelegate()
|
|
surroundColor
|
The color of the area outside the oval. | .black.withAlphaComponent(0.4)
|
options.surroundColor =.white
|
|
certificates
|
Certificates for SSL pinning. | AlphaSSL intermediate certificate
|
||
options.ui.title
|
The message shown during a canny preview (1). |
An iProov generated message. "Empty string" (no title is displayed). |
options.ui.title = "My Title"
|
|
options.ui.lineColor
|
Canny line color (the outline of the user’s face) (2). | options.ui.lineColor = .white
|
||
options.ui.backgroundColor
|
Canny background color (3). | options.ui.backgroundColor = .black
|
||
|
or
|
Specify a Close button color or a custom image (4) |
|
||
options.ui.headerTextColor
|
Header text color (5). |
options.ui.headerTextColor = .white
|
|
|
options.ui.promptTextColor
|
Prompt text color, footer, or user prompt (6) |
options.ui.promptTextColor = .white
|
||
options.ui.headerBackgroundColor
|
Header background color (7). | options.ui.headerBackgroundColor = UIColor(white: 0, alpha: 0.67)
|
||
options.ui.footerBackgroundColor
|
Header footer color (8). | options.ui.footerBackgroundColor = UIColor(white: 0, alpha: 0.67)
|
||
options.ui.font
|
Apply a custom font to the title and footer (9). Can be a:
|
HelveticaNeue-Medium
|
options.ui.font = "SomeFont"
|
|
options.ui.logoImage
|
Add your logo to the header (10) | null
|
options.ui.logoImage = UIImage(named: "MyLogo")
|
|
options.ui.filter
|
Apply a filter (Enum) to the camera preview:
|
.shaded
|
options.ui.filter = .classic
|
|
options.ui.floatingPromptEnabled
|
Specify the position on the screen where the user prompt is displayed:
|
false
|
options.ui.floatingPromptEnabled = true
|
|
options.ui.floatingPromptRoundedCorners
|
Specify round or rectangular corners for the user prompt box (12).
|
true
|
options.ui.floatingPromptRoundedCorners = false
|
|
GPA UI options
The following GPA options are under Options.genuinePresenceAssurance.
| Option name | Description | Default | Example | User experience |
|---|---|---|---|---|
notReadyOvalStrokeColor
|
Color of the oval outline when GPA is not ready. | .white
|
Options.genuinePresenceAssurance.notReadyOvalStrokeColor=.black
|
|
readyOvalStrokeColor
|
Color of the oval outline when GPA is ready. | #01AC41
|
Options.genuinePresenceAssurance.readyOvalStrokeColor=.black
|
|
options.ui.genuinePresenceAssurance.autoStartDisabled
|
For (1) set to For (2) set to |
false
|
options.ui.genuinePresenceAssurance.autoStartDisabled = false
|
|
options.ui.genuinePresenceAssurance.notReadyTintColor
|
SDK not ready color (3) | options.ui.genuinePresenceAssurance.notReadyTintColor = .orange
|
|
|
options.ui.genuinePresenceAssurance.readyTintColor
|
SDK ready color (a face has been detected) (4) | options.ui.genuinePresenceAssurance.readyTintColor = .green
|
|
|
options.ui.genuinePresenceAssurance.progressBarColor
|
Progress bar color (5) | options.ui.genuinePresenceAssurance.progressBarColor = .black | ||
options.ui.genuinePresenceAssurance.notReadyOverlayStrokeColor
|
The color of the face position elements when the SDK is not ready (6). If not specified, inherited from the option |
null
|
options.ui.genuinePresenceAssurance.notReadyOverlayStrokeColor = .red
|
|
options.ui.genuinePresenceAssurance.readyOverlayStrokeColor
|
The color of the face position elements when the SDK is ready (7). If not specified, inherited from the option |
null
|
options.ui.genuinePresenceAssurance.readyOverlayStrokeColor = .green
|
|
options.ui.genuinePresenceAssurance.notReadyFloatingPromptBackgroundColor
|
The background color when the SDK is not ready (8). If not specified, inherited from the option |
null
|
options.ui.genuinePresenceAssurance.notReadyFloatingPromptBackgroundColor = .blue
|
|
options.ui.genuinePresenceAssurance.readyFloatingPromptBackgroundColor
|
The background color when the SDK is ready (9). If not specified, inherited from the option |
null
|
options.ui.genuinePresenceAssurance.readyFloatingPromptBackgroundColor = .yellow
|
|
LA UI options
The following LA options are under Options.livenessPresenceAssurance.
| Option name | Description | Default | Example | User experience |
|---|---|---|---|---|
ovalStrokeColor
|
Color of the oval outline during an LA scan. | .white
|
Options.livenessPresenceAssurance.ovalStrokeColor=.black
|
|
completedOvalStrokeColor
|
Color of the oval outline after an LA scan has completed. | #01AC41
|
Options.livenessPresenceAssurance.completedOvalStrokeColor=.black
|
|
filter
|
Apply a natural filter style to the camera preview:
This is in addition to the General option |
|
options.filter = NaturalFilter(style: .clear)
|
|
options.ui.livenessAssurance.primaryTintColor
|
Primary tint color (1) | options.ui.livenessAssurance.primaryTintColor = .blue
|
|
|
options.ui.livenessAssurance.secondaryTintColor
|
Secondary tint color (2) | options.ui.livenessAssurance.secondaryTintColor = .lightGray
|
||
options.ui.livenessAssurance.overlayStrokeColor
|
The color of the face position elements (3). If not specified, inherited from the option |
null
|
options.ui.livenessAssurance.overlayStrokeColor = .black
|
|
options.ui.livenessAssurance.floatingPromptBackgroundColor
|
The background color of the user prompt (4). If not specified, inherited from the option |
null
|
options.ui.livenessAssurance.floatingPromptBackgroundColor = .white
|
Deprecated options
Deprecated options will be removed from a future SDK version. iProov recommends not using deprecated options. If you will be affected, please contact Support.
| Option name | Deprecated in version |
|---|---|
options.capture.genuinePresenceAssurance.maxYaw
|
10.0.0
|
options.capture.genuinePresenceAssurance.maxRoll
|
|
options.capture.genuinePresenceAssurance.maxPitch
|
Next step
