DocumentationAPI Reference

Customizing the look

Customizing the look

This page shows you the different ways that you can customize the UI provided by the SDK.

Before you start

Before you start, note the following useful information:

  • You can customize the primary color used in the SDK.
  • You can customize the way that help center articles appear using CSS.
  • Some colors in the Support SDK UI are inherited from your app, like the navigation bar.
  • It's not possible to move elements of the UI around, remove parts of the UI, or add new parts. If this is important to you, consider using the SDK's API providers to build your own UI.

How Theming works

To change the primary color of the SDK, simply set CommonTheme.currentTheme.primaryColor. This changes the tint color throughout the SDK to make it look like part of your app.

Change the colors of the UI

Swift

// Import relevant packageimport CommonUISDK
// Modify the CommonTheme objectCommonTheme.currentTheme.primaryColor = UIColor.orange

Objective-C

// Import relevant package#import <CommonUISDK/CommonUISDK.h>
// Modify the CommonTheme object[ZDKCommonTheme currentTheme].primaryColor = [UIColor orangeColor];

Change the style of help center articles

The default styles for help center articles are defined in the help_center_article_style.css file in the ZendeskSDK.framework file in your project. To review the styles in Xcode, expand the bundle in Project navigator and select the css file.

To customize the article styles:

  1. Create a second help_center_article_style.css file and save it in your project's root folder.

  2. Import the new file into your project:

    1. In Xcode, select your project (the top-most icon) in Project navigator, then select File > Add Files to "your_project_name" from the Xcode menu.

    2. Navigate to and select your css file and click Add.

      The file should appear in Project navigator. From this point on, the app will ignore the help_center_article_style.css file in the ZendeskSDK.bundle.

  3. Add and customize the CSS in the new file.

Help center articles include a footer element that displays the author and date of the article's last update.

To hide the footer, add the following to your help_center_article_style.css file:

footer {    display: none;}