UI Configuration File

During product integration process, you can personalize the display text and UI elements of the ZOLOZ Native SDK pages to meet your needs.

Features

The UI configuration interface consists of four sections: the option section, preview section, configuration section and function section; as shown in the following figure:

image

  1. Options Section
    Provides options such as scene types, product types, document types, languages, ID document collection methods, etc.  Options in this section are displayed correspondingly in Preview Area and Configuration Section. 
  • Scene typesSupports Web SDK and Native SDK. Please select the corresponding scenario before starting the configuration.
  • Product typesSupports RealID, ID Recognition, and Conncet/Face Capture. Please select your actual product type, start the configuration, and export the configuration file.
    Note: The configuration file of each product varies and cannot be used interchangeably. You need to export corresponding configuration files for different products.
  • Document typesSelect the document type that you need to configure. You can select and configure multiple documents. The default document type is passport, that  docType=00000001003
  • LanguagesSelect the language that you need to configure. You can select and configure multiple languages. Currently, English(en), Chinese(zh), Chinese(Simplified)(zh-CN), and Chinese(Traditional)(zh-HK) are supported. When you select another language, the default display language is English. 
  • UI of capturing IDSupports Self-capture, Deep-scan, Trace-scan, and Multi-angle. You can select and configure a method applied in your product. By default, Self-capture and Deep-scan are selected.
    Note: 'UI of capturing ID' can be configured via two types of input parameters: docUiType in productConfig or serviceLevel. The mapping relation between the input parameter value and 'UI of capturing ID' in the Portal is as follows:
UI of capturing ID

Applicable Scenes

serviceLevel Value

docUiType Value

Self-capture

Web SDK and Native SDK

REALID0001

1

Deep-scan

Native SDK

REALID0002, REALID0003, REALID0009, REALID0011

2

Auto-scan

Web SDK

REALID0012

3

Trace-scan

Native SDK

REALID0004

4

Multi-angle

Web SDK and the scanned ID is HKID

REALID0002、REALID0011

5

  • UI of taking selfieSupports Movement and Face hidden. You can select and configure a method applied in your product. By default, Movement mode is selected.
    Note: There is no input parameter to change this default mode. If you need Face hidden mode, please contact ZOLOZ technical team for support.
  1. Configuration SectionIn this section, there is General Configuration and Specific Configuration.
  • General Configuration
    Settings in general configuration will take effect in all pages, including background color and text color of the title bar, etc. Please select General Configuration to set up your options.
  • Specific ConfigurationSettings in specific configuration only take effect in pages currently selected in Preview Area. Provides all configurable customization options, including text content, button color, document animation button (First Page Animation, Second Page Animation), Show Custom Text, etc.

Please refer to the following table for more details about Specific Configuration:

Configuration Items

Description

Note

Reference Image

First Page Animation and Second Page Animation

Those two functions are displayed in the first and second page of the document respectively. By default, they are ON, and you can turn them off manually. Document animation functions are supported in Self-capture and Deep-scan for all types of documents, excluding passports.

Note:

  • First Page Animation promots users to put ID documents within the frame.
  • Second Page Animation promots users to flip  ID documents.

For document animation functions, please upgrade your Native SDK to specific versions (Android SDK: above 1.3.0.230907171559; iOS SDK: above 1.3.2.231024185824 ).

image.png
Show Custom Text

It is the prompt message in the face scan page. By default, they are OFF, and you can turn them on manually according to your actual requirements. Two editing methods are supported: Normal and Text Editor.

For Text Editor function, please upgrade your Native SDK to specific versions (Android SDK: 1.3.1.230925144644 or later versions; iOS SDK: 1.3.1.230921114719 or later versions)

image

Excessively long character setting within the UI Configuration page may negatively impact the interface display on the terminal. For different pages and their configurations items,the character limit is set as follows:

Page

Configuration item

Character limit

Taking ID Photo

Titlebar Text

30

Text Prompt in Photo Preview

50

Operational Instruction

100

Confirming ID Iamge

Titlebar Text

30

Text Prompt in Photo Preview

50

Operational Instruction

100

Submit Button Text

15

Retry Button Text

15

Scanning With ID Frame

Titlebar Text

30

Operational Instruction

150

Text Prompt in Photo Preview

60

Scanning With ID Frame-Web

Titlebar Text

30

Operational Instruction

150

Text Prompt in Photo Preview

60

Scanning Tips

150

Scanning Face

Titlebar Text

30

Instruction Text In Preview Area

60

Processing Page

During Processing Text

-

Error Message

Title

60

Content

160

Button

15

  1. Preview AreaThe product interface preview. All changes made in the configuration section will be displayed in the preview section in real-time. The pages in the preview section are also clickable, and when a page is selected, the specific configuration for that page will be displayed in the configuration section.
  2. Function sectionThree functions are supported: Import UI configuration, Use default UI configuration, and Export UI configuration.

Note: The configuration file of each product varies and cannot be used interchangeably. Please check whether the configuration file matches your product type before exporting.

Operation Steps

1. Login to the ZOLOZ portal

The ZOLOZ portal addresses varies from development environment to development environment, so please select the login address according to your actual environment. For more details, see Understanding environments and service endpoints.

2. In the left navigation bar, click UI Configuration

3. On the UI Configuration page, select the product type, credential type, UI type, and language. 

4. Customize the UI and configuration

You can customize the UI in the configuration area, and any configuration changes will be displayed in the preview section in real-time. Configurable items are shown below:

Note: Click Use Default Configuration in the function bar to revert to the system default UI configuration.

  • Document collection page

image

  • Document collection confirmation page

image

  • Face capture page

image

  • Error message pop-up

image

5. Export the configuration file

After completing the UI configuration, click Export in the function bar t o export the configuration file locally for subsequent integration with ZOLOZ SDK to launch the SDK.

Related Documents

For the complete process of customizing and configuring UI in the native App SDK mode, please see Customizing UI in Native App SDK Mode.