UI/UX Customization (Device SDKs)

Learn how to customize each UI component in the UR Scan+Match Device SDKs.

UI Examples

The UR Scan+Match UI is highly customizable and allows you to change all colors, fonts, borders, icons, text/strings, backgrounds, and buttons. Please see the designs below for examples of UI that are 100% achievable using the out-of-the-box customizations provided in the UR Scan+Match SDK.

UI/UX: The Main Frame

The Main Frame includes the region with the Camera Capture Frame (on the top), the Bottom-Left Column for UR Code Information, and the Bottom-Right Column for Matching Information.

UI/UX: The Outer Overlay

The Outer Overlay is the area outside of the UR Scan+Match SDK's Main Frame (i.e. the remaining area of the Browser Window or Device's Screen).

APIs: FaceTecURScanMatchOverlayCustomization.backgroundColor, FaceTecURScanMatchOverlayCustomization.showBrandingImage , FaceTecURScanMatchOverlayCustomization.brandingImage , FaceTecURScanMatchOverlayCustomization.buttonFont,FaceTecURScanMatchOverlayCustomization.buttonTextNormalColor, FaceTecURScanMatchOverlayCustomization.buttonTextDisabledColor, FaceTecURScanMatchOverlayCustomization.buttonTextHighlightColor,FaceTecURScanMatchOverlayCustomization.buttonBackgroundNormalColor, FaceTecURScanMatchOverlayCustomization.buttonBackgroundDisabledColor, FaceTecURScanMatchOverlayCustomization.buttonBackgroundHighlightColor,FaceTecURScanMatchOverlayCustomization.buttonBorderColor, FaceTecURScanMatchOverlayCustomization.buttonBorderWidth, FaceTecURScanMatchOverlayCustomization.buttonCornerRadius.

Localization Strings: FaceTecStrings.FaceTecURScanMatch_action_history, FaceTecStrings.FaceTecURScanMatch_action_settings, FaceTecStrings.FaceTecURScanMatch_action_new_scan

UI/UX: Camera Permissions Screen

The Camera Permissions Screen is shown when the Application needs specific Camera Permissions in order to proceed.

APIs: FaceTecURScanMatchCameraPermissionsCustomization.foregroundColor, FaceTecURScanMatchCameraPermissionsCustomization.backgroundColor, FaceTecURScanMatchCameraPermissionsCustomization.headerFont, FaceTecURScanMatchCameraPermissionsCustomization.subtextFont,FaceTecURScanMatchCameraPermissionsCustomization.cancelButtonImage, FaceTecURScanMatchCameraPermissionsCustomization.cancelButtonLocation, FaceTecURScanMatchCameraPermissionsCustomization.iconImage,FaceTecURScanMatchCameraPermissionsCustomization.buttonFont, FaceTecURScanMatchCameraPermissionsCustomization.buttonTextNormalColor, FaceTecURScanMatchCameraPermissionsCustomization.buttonTextDisabledColor,FaceTecURScanMatchCameraPermissionsCustomization.buttonTextHighlightColor, FaceTecURScanMatchCameraPermissionsCustomization.buttonBackgroundNormalColor, FaceTecURScanMatchCameraPermissionsCustomization.buttonBackgroundDisabledColor,FaceTecURScanMatchCameraPermissionsCustomization.buttonBackgroundHighlightColor, FaceTecURScanMatchCameraPermissionsCustomization.buttonBorderColor, FaceTecURScanMatchCameraPermissionsCustomization.buttonBorderWidth,FaceTecURScanMatchCameraPermissionsCustomization.buttonCornerRadius.

Localization Strings: FaceTecStrings.FaceTecURScanMatch_camera_permission_header, FaceTecStrings.FaceTecURScanMatch_camera_permission_enable_camera_message, FaceTecStrings.FaceTecURScanMatch_camera_permission_enable_camera, FaceTecStrings.FaceTecURScanMatch_camera_permission_launch_settings_message, FaceTecStrings.FaceTecURScanMatch_camera_permission_launch_settings.

UI/UX: Capture Frame

The Capture Frame is shown when the Application needs specific Camera Permissions in order to proceed.

APIs: FaceTecURScanMatchCaptureCustomization.reticleStrokeWidth, FaceTecURScanMatchCaptureCustomization.reticleStrokeColor, FaceTecURScanMatchCaptureCustomization.cancelButtonImage, FaceTecURScanMatchCaptureCustomization.cancelButtonLocation,FaceTecURScanMatchCaptureCustomization.flipCameraButtonImage, FaceTecURScanMatchCaptureCustomization.activeTorchButtonImage, FaceTecURScanMatchCaptureCustomization.inactiveTorchButtonImage,FaceTecURScanMatchCaptureCustomization.foregroundColor, FaceTecURScanMatchCaptureCustomization.backgroundColor, FaceTecURScanMatchCaptureCustomization.ovalStrokeWidth,FaceTecURScanMatchCaptureCustomization.ovalStrokeColor, FaceTecURScanMatchFrameCustomization.backgroundColors, FaceTecURScanMatchFrameCustomization.borderColor,FaceTecURScanMatchFrameCustomization.borderWidth, FaceTecURScanMatchFrameCustomization.cornerRadius, FaceTecURScanMatchFrameCustomization.shadow,FaceTecURScanMatchFrameCustomization.elevation.

UI/UX: Review Information Panel

The Review Information Panel includes the Left Column for UR Code Information and the Right Column for Matching Information.

APIs: FaceTecURScanMatchReviewCustomization.foregroundColor, FaceTecURScanMatchReviewCustomization.backgroundColor, FaceTecURScanMatchReviewCustomization.urCodeColor, FaceTecURScanMatchReviewCustomization.dividerStrokeWidth,FaceTecURScanMatchReviewCustomization.dividerStrokeColor, FaceTecURScanMatchReviewCustomization.boxBorderWidth, FaceTecURScanMatchReviewCustomization.boxBorderCornerRadius,FaceTecURScanMatchReviewCustomization.boxBorderColor, FaceTecURScanMatchReviewCustomization.messageFont, FaceTecURScanMatchReviewCustomization.buttonFont,FaceTecURScanMatchReviewCustomization.buttonTextNormalColor, FaceTecURScanMatchReviewCustomization.buttonBackgroundNormalColor, FaceTecURScanMatchReviewCustomization.buttonTextDisabledColor,FaceTecURScanMatchReviewCustomization.buttonBackgroundDisabledColor, FaceTecURScanMatchReviewCustomization.buttonTextHighlightColor, FaceTecURScanMatchReviewCustomization.buttonBackgroundHighlightColor,FaceTecURScanMatchReviewCustomization.buttonBorderColor, FaceTecURScanMatchReviewCustomization.buttonBorderWidth, FaceTecURScanMatchReviewCustomization.buttonCornerRadius,FaceTecURScanMatchReviewCustomization.successImage ,FaceTecURScanMatchReviewCustomization.warningImage ,FaceTecURScanMatchReviewCustomization.unsuccessImage ,FaceTecURScanMatchReviewCustomization.noNetworkImage ,FaceTecURScanMatchReviewCustomization.urCodePlaceholderImage ,FaceTecURScanMatchReviewCustomization.facePlaceholderImage.

Localization Strings: FaceTecStrings.FaceTecURScanMatch_code_scan_unknown_type_value, FaceTecStrings.FaceTecURScanMatch_code_scan_encoder_title, FaceTecStrings.FaceTecURScanMatch_code_scan_urid_title, FaceTecStrings.FaceTecURScanMatch_code_scan_metadata_title, FaceTecURScanMatchSDK.configureURCodeTemplateLocalization_*, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_url_title, FaceTecStrings.FaceTecURScanMatch_code_scan_invalid_url_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_signature_title, FaceTecStrings.FaceTecURScanMatch_code_scan_invalid_signature_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_code_title, FaceTecStrings.FaceTecURScanMatch_code_scan_invalid_code_title, FaceTecStrings.FaceTecURScanMatch_match_scan_type_title, FaceTecStrings.FaceTecURScanMatch_match_scan_time_title, FaceTecStrings.FaceTecURScanMatch_match_scan_date_title,, FaceTecStrings.FaceTecURScanMatch_match_scan_image_resolution_title, FaceTecStrings.FaceTecURScanMatch_match_scan_image_color_palette_title, FaceTecStrings.FaceTecURScanMatch_match_scan_image_type_title, FaceTecStrings.FaceTecURScanMatch_match_scan_match_2d_title, FaceTecStrings.FaceTecURScanMatch_match_scan_level_title, FaceTecStrings.FaceTecURScanMatch_action_rescan.

UI/UX: Result Overlay

The Result Overlay is displayed over the Capture Frame.

APIs: FaceTecURScanMatchResultCustomization.foregroundColor, FaceTecURScanMatchResultCustomization.messageFont, FaceTecURScanMatchResultCustomization.activityIndicatorColor, FaceTecURScanMatchResultCustomization.activityIndicatorAnimation,FaceTecURScanMatchResultCustomization.resultAnimationSuccessForegroundColor, FaceTecURScanMatchResultCustomization.resultAnimationSuccessBackgroundColor, FaceTecURScanMatchResultCustomization.resultAnimationSuccess,FaceTecURScanMatchResultCustomization.resultAnimationWarningForegroundColor, FaceTecURScanMatchResultCustomization.resultAnimationWarningBackgroundColor, FaceTecURScanMatchResultCustomization.resultAnimationWarning,FaceTecURScanMatchResultCustomization.resultAnimationUnsuccessForegroundColor , FaceTecURScanMatchResultCustomization.resultAnimationUnsuccessBackgroundColor, FaceTecURScanMatchResultCustomization.resultAnimationUnsuccess,FaceTecURScanMatchResultCustomization.resultAnimationDisplayTime.

Localization Strings: FaceTecStrings.FaceTecURScanMatch_match_scan_match_level_title.

UI/UX: History Screen

The History Screen is launched when the History Button is pressed.

APIs: FaceTecURScanMatchHistoryCustomization.foregroundColor, FaceTecURScanMatchHistoryCustomization.backgroundColor, FaceTecURScanMatchHistoryCustomization.CodeColor, FaceTecURScanMatchHistoryCustomization.headerForegroundColor,FaceTecURScanMatchHistoryCustomization.headerBackgroundColor, FaceTecURScanMatchHistoryCustomization.rowHighlightColor, FaceTecURScanMatchHistoryCustomization.headerFont,FaceTecURScanMatchHistoryCustomization.messageFont, FaceTecURScanMatchHistoryCustomization.dividerStrokeWidth, FaceTecURScanMatchHistoryCustomization.dividerStrokeColor,FaceTecURScanMatchHistoryCustomization.successImage, FaceTecURScanMatchHistoryCustomization.warningImage, FaceTecURScanMatchHistoryCustomization.unsuccessImage,FaceTecURScanMatchHistoryCustomization.urCodePlaceholderImage, FaceTecURScanMatchHistoryCustomization.facePlaceholderImage, FaceTecURScanMatchHistoryCustomization.cancelButtonImage,FaceTecURScanMatchHistoryCustomization.cancelButtonLocation.

Localization Strings: FaceTecStrings.FaceTecURScanMatch_history_header, FaceTecStrings.FaceTecURScanMatch_code_scan_type_title, FaceTecStrings.FaceTecURScanMatch_code_scan_unknown_type_value, FaceTecStrings.FaceTecURScanMatch_code_scan_time_title, FaceTecStrings.FaceTecURScanMatch_code_scan_date_title, FaceTecStrings.FaceTecURScanMatch_code_scan_encoder_title, FaceTecStrings.FaceTecURScanMatch_code_scan_urid_title, FaceTecStrings.FaceTecURScanMatch_code_scan_metadata_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_url_title, FaceTecStrings.FaceTecURScanMatch_code_scan_invalid_url_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_signature_title, FaceTecStrings.FaceTecURScanMatch_code_scan_invalid_signature_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_code_title, FaceTecStrings.FaceTecURScanMatch_code_scan_invalid_code_title.

UI/UX: Details View Screen

The Details View Screen for a Session is shown when a User selects its corresponding row in the History Screen.

APIs: FaceTecURScanMatchDetailsViewCustomization.foregroundColor, FaceTecURScanMatchDetailsViewCustomization.backgroundColor, FaceTecURScanMatchDetailsViewCustomization.urCodeColor, FaceTecURScanMatchDetailsViewCustomization.overlayColor,FaceTecURScanMatchDetailsViewCustomization.borderColor, FaceTecURScanMatchDetailsViewCustomization.borderWidth, FaceTecURScanMatchDetailsViewCustomization.cornerRadius,FaceTecURScanMatchDetailsViewCustomization.messageFont, FaceTecURScanMatchDetailsViewCustomization.buttonFont, FaceTecURScanMatchDetailsViewCustomization.buttonTextNormalColor,FaceTecURScanMatchDetailsViewCustomization.buttonTextDisabledColor, FaceTecURScanMatchDetailsViewCustomization.buttonTextHighlightColor, FaceTecURScanMatchDetailsViewCustomization.buttonBackgroundNormalColor,FaceTecURScanMatchDetailsViewCustomization.buttonBackgroundDisabledColor, FaceTecURScanMatchDetailsViewCustomization.buttonBackgroundHighlightColor, FaceTecURScanMatchDetailsViewCustomization.buttonBorderColor,FaceTecURScanMatchDetailsViewCustomization.buttonBorderWidth, FaceTecURScanMatchDetailsViewCustomization.buttonCornerRadius, FaceTecURScanMatchDetailsViewCustomization.successImage,FaceTecURScanMatchDetailsViewCustomization.warningImage, FaceTecURScanMatchDetailsViewCustomization.unsuccessImage, FaceTecURScanMatchDetailsViewCustomization.urCodePlaceholderImage,FaceTecURScanMatchDetailsViewCustomization.facePlaceholderImage.

Localization Strings: FaceTecStrings.FaceTecURScanMatch_code_scan_valid_url_min_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_signature_min_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_code_min_title, FaceTecStrings.FaceTecURScanMatch_code_scan_affirmative_value, FaceTecStrings.FaceTecURScanMatch_code_scan_negative_value, FaceTecStrings.FaceTecURScanMatch_code_scan_type_title, FaceTecStrings.FaceTecURScanMatch_code_scan_unknown_type_value, FaceTecStrings.FaceTecURScanMatch_code_scan_time_title, FaceTecStrings.FaceTecURScanMatch_code_scan_date_title, FaceTecStrings.FaceTecURScanMatch_code_scan_encoder_title, FaceTecStrings.FaceTecURScanMatch_code_scan_urid_title, FaceTecStrings.FaceTecURScanMatch_code_scan_metadata_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_url_title, FaceTecStrings.FaceTecURScanMatch_code_scan_invalid_url_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_signature_title, FaceTecStrings.FaceTecURScanMatch_code_scan_invalid_signature_title, FaceTecStrings.FaceTecURScanMatch_code_scan_valid_code_title, FaceTecStrings.FaceTecURScanMatch_code_scan_invalid_code_title.