Mobile applications have different design styles for elements such as title bars and buttons. ZOLOZ supports simple UI customization of the color and copy of specified components to match your application's style.

About the task

You can customize the UI of ZOLOZ products in 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 Pageand 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

Integrate the configuration file from Step 1 with the ZOLOZ SDK. Both Android and iOS are supported.

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

a. Put the configuration file into your project

Place the configuration file in a project directory accessible at runtime. For Android, use the assets directory; for iOS, use MainBundle. Alternatively, host the file on a 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 file path in the ZLZRequest object. For Android, set the CHAMELEON_CONFIG_PATH parameter; for iOS, set the kZLZChameleonConfigKey parameter.

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

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];

For more information about constructing the ZLZRequest object, see App SDK-mode integration.

c. (Optional) Configure multi-language copies

The UI Configuration Page also supports multi-language copies. To use a specific language when the ZOLOZ SDK starts, specify the language in the corresponding parameter of the ZLZRequest object. The SDK reads the configuration file for the specified language and renders it in your application.

For example, to use Chinese(Simplified)(zh-CN) in your Android application, set the LOCALE parameter to "zh-CN" as shown in Sample 3. For iOS, set the kZLZLocaleKey parameter as shown in Sample 4.

The LOCALE/kZLZLocaleKey value must follow the language-Country format. For the value of each language option in UI Configuration Page, see Locale related parameter value format.

Note:

• If you don't configure the LOCALE/kZLZLocaleKeyparameter, 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/kZLZLocaleKeyparameter nor the system language matches with the languages configured in UI Configuration Page, the ZOLOZ SDK directly uses its built-in copy.

Sample 3: 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 4: 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];