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:

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 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.

2. 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 ).
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)

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：

3. 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.
4. 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

• Document collection confirmation page

• Face capture page

• Error message pop-up

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.