ZOLOZZOLOZDOCS

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 types
    Supports Web SDK and Native SDK. Please select the corresponding scenario before starting the configuration.
  • Product types
    Supports 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 types
    Select the document type that you need to configure. You can select and configure multiple documents. The default document type is passport, that  docType=00000001003
  • Languages
    Select 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 ID
    Supports 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.
  • UI of taking selfie
    Supports Movement and Face hidden. You can select and configure a method applied in your product. By default, Movement mode is selected.
  1. Configuration Section
    In 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.
  • Specific Configuration
    Settings 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.

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

  1. Preview Area
    The 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 section
    Three 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.