ASAP for Mobile Platforms

Customizing the Add-On UI

The ASAP SDK provides you with the option to customize the UI of the add-on as required.

Predefined Themes

The SDK UI comes with two predefined themes: white and black. The following methods help you apply these themes.

Methods for Applying the White Theme (Default)


ZDTheme.applyTheme(theme: .white)


[ZDTheme applyThemeWithTheme:ZDThemeTypeWhite];
Methods for Applying the Black Theme


ZDTheme.applyTheme(theme: .dark)


[ZDTheme applyThemeWithTheme:ZDThemeTypeDark];

Customized Themes

You can also customize the theme of each individual screen--article page, ticket submission page, ticket listing page, and so on--of the add-on UI, using our APIs. 

Below is an example of a method that helps you customize the theme of the article page in the knowledge base.


let articleTheme =  ZDThemeArticle.init()
articleTheme.tintColor = UIColor.white
articleTheme.primaryTextColor = UIColor.white
articleTheme.secondryTextColor = UIColor(red:0.12, green:0.13, blue:0.15, alpha:1.00)
articleTheme.primaryBackgroundColor = UIColor(red:0.12, green:0.13, blue:0.15, alpha:1.00)
articleTheme.secondryBackgroundColor = UIColor(red:0.12, green:0.13, blue:0.15, alpha:1.00)
articleTheme.cellSeporatorColor = UIColor(red:0.12, green:0.13, blue:0.15, alpha:1.00)
articleTheme.headerColor = UIColor(red:0.13, green:0.18, blue:0.15, alpha:1.00)


ZDThemeArticle * articleTheme = [ZDThemeArticle init];
articleTheme.tintColor = [UIColor whiteColor];
articleTheme.primaryTextColor = [UIColor whiteColor];
articleTheme.secondryTextColor = [UIColor colorWithRed:0.12 green:0.13 blue:0.15 alpha:1.00];
articleTheme.primaryBackgroundColor = [UIColor colorWithRed:0.12 green:0.13 blue:0.15 alpha:1.00];
articleTheme.secondryBackgroundColor = [UIColor colorWithRed:0.12 green:0.13 blue:0.15 alpha:1.00];
articleTheme.cellSeporatorColor = [UIColor colorWithRed:0.12 green:0.13 blue:0.15 alpha:1.00];
articleTheme.headerColor = [UIColor colorWithRed:0.12 green:0.13 blue:0.15 alpha:1.00];

Note: You can similarly customize the articles listing page and ticket submission page. However, keep in mind that such customization will override the SDK theme.

Customizing the Navigation Bar and Status Bar

To customize the theme of the navigation bar and status bar of the ASAP add-on, use the following code:


ZDNavigationTheme.navigationBarColor =
ZDNavigationTheme.titleColor = UIColor.white
ZDNavigationTheme.barButtonTextColor = UIColor.white
ZDNavigationTheme.translucent = false
ZDNavigationTheme.statusBarApperance = .lightContent
ZDNavigationTheme.backButtonStyle = ZDNavigationBackButtonStyle.icon


[ZDNavigationTheme setNavigationBarColor:[UIColor blueColor]];
[ZDNavigationTheme setTitleColor:[UIColor blueColor]];
[ZDNavigationTheme setBarButtonTextColor:[UIColor blueColor]];
[ZDNavigationTheme setTranslucent:NO];
[ZDNavigationTheme setStatusBarApperance:UIStatusBarStyleLightContent];
[ZDNavigationTheme setBackButtonStyle:ZDNavigationBackButtonStyleIcon];

Using Custom Fonts

The SDK UI offers a set of default fonts, but you can use fonts of your choice if required. 

To be able to display custom fonts on the SDK UI, perform these steps first:

  1. Add the font(s) to your project.

  2. Edit the info.plist file of your app to include the Fonts provided by application key.

  3. Under this key, list the file names of all the fonts you want to use in the SDK UI. 

After adding the fonts to your project, you can customize the SDK UI to display text in that font.

To display the custom font on your SDK UI, include the following method in your app code


let font = ZDCustomFont()
font.fontFamilyName = "ProximaNova"
font.regularFontName = "ProximaNova-reg"
font.lightFontName = "ProximaNova-light"
font.boldFontName = "ProximaNova-Bold"
font.mediumFontName = "ProximaNova-Bold"


ZDCustomFont * font = [ZDCustomFont init];
font.fontFamilyName = @"ProximaNova";
font.regularFontName = @"ProximaNova-reg";
font.lightFontName = @"ProximaNova-light";
font.boldFontName = @"ProximaNova-Bold";
font.mediumFontName = @"ProximaNova-Bold";

Note: If you do not use a custom font, the add-on displays the system font by default.