In different mobile applications, there are different design styles, such as Title Bar style, Button style. To better adapt to the style of your application, ZOLOZ supports simple UI customization in terms of the color and copy of the specified components.

About the task

This task demonstrates how to customize the UI of the ZOLOZ products that are applied in the App SDK mode.

Procedure

1. Configure UI in the ZOLOZ Portal

1. Log in to the ZOLOZ Portal with your username and password.
2. Navigate to UI Configuration Page and configure the customized content by using the configuration tool that is provided on this page.
3. When the configuration is completed, click Export and save the configuration file to your local workspace.

2. Start the SDK with the configuration file

The configuration file that is generated in Step 1 must be integrated with the ZOLOZ SDK, which supports Android, iOS, and HarmonyOS. The following section demonstrates how to start the SDK with the configuration file for these operating systems.

Note: If you are not the client developer, send the configuration file to your client developer.

a. Put the configuration file into your project

Put the configuration file into the project directory that your application can access when it is running:

• For Android applications, the file is put into the assets directory.
• For iOS applications, the file is put into MainBundle.
• For HarmonyOS applications, the file is put into the resources/rawfile directory.

You can also put the configuration file to the CDN server, and download it before starting the ZOLOZ SDK.

b. Set the configuration file path in ZLZRequest

To start the ZOLOZ SDK with the configuration file, specify the configuration file path information in the ZLZRequest object.

• For Android applications, specify the configuration file path for the CHAMELEON_CONFIG_PATH parameter.
• For iOS applications, specify the configuration file path for the kZLZChameleonConfigKey parameter.
• For HarmonyOS applications, specify the configuration file path for the chameleonConfig parameter.

The following samples show how to add a configuration file named UIConfig.zip to the ZLZRequest object for Android, iOS, and HarmonyOS applications separately.

Sample 1: for Android applications

ZLZRequest request = new ZLZRequest();
request.bizConfig = new HashMap<>();
// Omit other configurations
// add configuration file path to bizConfig.
request.bizConfig.put(ZLZConstants.CHAMELEON_CONFIG_PATH, "UIConfig.zip");
return request;

Sample 2: for iOS applications

NSMutableDictionary *bizConfig = [NSMutableDictionary dictionary];
// Omit other configurations
// add configuration file path to bizConfig.
NSString* path = [[NSBundle mainBundle] pathForResource:@"UIConfig" ofType:@"zip"];
[bizConfig setObject:path forKey:kZLZChameleonConfigKey]
ZLZRequest *request = [[ZLZRequest alloc] initWithzlzConfig:clientConfig bizConfig:bizConfig];

Sample 3: for HarmonyOS applications

Note: If the configuration file is stored on a CDN server, download it to the application sandbox (for example, context.cacheDir) first, and then pass the sandbox absolute path (starting with /) to the chameleonConfig parameter.

import { ZolozRequest, ZolozBizConfig } from 'zolozkit';

// Relative path under rawfile (recommended: the configuration file is packaged into resources/rawfile)
const bizConfig: ZolozBizConfig = {
    // Omit other configurations
    // add configuration file path to bizConfig.
    chameleonConfig: 'UIConfig.zip'
};
const request = new ZolozRequest(clientCfg, bizConfig);

For more information about how to construct the ZLZRequest object, see App SDK-mode Product Integration.

c. (Optional) Configure multi-language copies

In the UI Configuration Page，you can also configure multi-language copies. To enable the ZOLOZ SDK to use the copy in one of the configured language when it starts, specify the language information for the related parameter in the ZLZRequest object. The ZOLOZ SDK then reads the configuration file for the copy in the specified language and renders it in your application.

For example, if you add a language Chinese(Simplified)(zh-CN) in UI Configuration Page and want to enable the SDK to use the copy of this language in your Android, iOS, or HarmonyOS application, you need to specify the value of "zh-CN" for the LOCALE, kZLZLocaleKey, or locale parameter.

• For Android applications, specify the value of "zh-CN" for the LOCALE parameter, as shown in Sample 4.
• For iOS applications, specify the value of "zh-CN" for the kZLZLocaleKey parameter, as shown in Sample 5.
• For HarmonyOS applications, specify the value of "zh-CN" for the locale parameter, as shown in Sample 6.

The value of the LOCALE/kZLZLocaleKey parameter must be in the format of language-Country. For how to set the value for each language option provided in UI Configuration Page, see Locale related parameter value format.

Notes:

• If you don't configure the LOCALE/kZLZLocaleKey/locale parameter, the ZOLOZ SDK uses the system language to match with the languages configured in UI Configuration Page.
• If neither the language specified to the LOCALE/kZLZLocaleKey/locale parameter nor the system language matches with the languages configured in UI Configuration Page, the ZOLOZ SDK directly uses its built-in copy.

Sample 4: for Android applications

ZLZRequest request = new ZLZRequest();
request.bizConfig = new HashMap<>();
// Omit other configurations
// add LOCALE to bizConfig.
request.bizConfig.put(ZLZConstants.LOCALE, "zh-CN");
return request;

Sample 5: for iOS applications

NSMutableDictionary *bizConfig = [NSMutableDictionary dictionary];
// Omit other configurations
// add LOCALE to bizConfig.
[bizConfig setObject:@"zh-CN" forKey:kZLZLocaleKey]
ZLZRequest *request = [[ZLZRequest alloc] initWithzlzConfig:clientConfig bizConfig:bizConfig];

Sample 6: for HarmonyOS applications

import { ZolozRequest, ZolozBizConfig } from 'zolozkit';

// Omit other configurations
// add locale to bizConfig.
const bizConfig: ZolozBizConfig = {
    locale: 'zh-CN'
};
const request = new ZolozRequest(clientCfg, bizConfig);