Customizing the look

This page shows you how you can customize the SDK UI.

Before you start

Before you start, you should know the following:

  • You can customize only one color that is used in the Unified SDK UI.
  • The navigation bar color is not set by the Unified SDK but inherited from the presenting navigation controller or the UINavigationBar appearance singleton.
  • You cannot move UI elements, remove parts of the UI, or add new parts.

If customizing the UI elements is important to you, consider using the relevant product SDK API providers to build your own UI. See the Chat, Support and Answer Bot providers.

How theming works

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

Swift

// import the necessary component
import CommonUISDK

// Set the styling
CommonTheme.currentTheme.primaryColor = .orange

Objective-C

// import the necessary component
#import <CommonUISDK/CommonUISDK.h>

// Set the styling
[ZDKCommonTheme currentTheme].primaryColor = [UIColor orangeColor];

Note: The CommonTheme.currentTheme singleton is a shared component among all Zendesk SDKs. The primaryColor will be applied to all parts of the UI that depend on the CommonUISDK framework, not just the Unified SDK UI.

Configuring the Messaging Experience

The MessagingConfiguration class allows you change properties that are shared across product SDKs, like the agent name used for messages from bots.

Note: Avatars are currently not shown in the messaging screen. As a result, you won't see the image set to the botAvatar.

Swift

// import the necessary component
import MessagingSDK

// creation
let messagingConfiguration = MessagingConfiguration()
messagingConfiguration.name = "Bot Name"

// pass it into the SDK
let viewController = try! Messaging.instance.buildUI(engines: engines, configs: [messagingConfiguration])

Objective-C

// import the necessary component
#import <MessagingSDK/MessagingSDK.h>

// creation
ZDKMessagingConfiguration *messagingConfiguration = [ZDKMessagingConfiguration new];
messagingConfiguration.name = @"CustomBot";

// pass it into the SDK
NSError *error = nil;
UIViewController *viewController = [[ZDKMessaging instance] buildUIWithEngines:engines
                                                                    configs:@[messagingConfiguration]
                                                                     error:&error];

Enabling multi-line quick replies

There might be situations where the number of quick reply options cause the user to scroll horizontally through the options (Selecting a department in chat). Enabling isMultilineResponseOptionsEnabled causes the options to be laid out in a Flexbox-style layout instead.

Swift

// import the necessary component
import MessagingSDK

let messagingConfiguration = MessagingConfiguration()
messagingConfiguration.isMultilineResponseOptionsEnabled = true

Objective-C

// import the necessary component
#import <MessagingSDK/MessagingSDK.h>

ZDKMessagingConfiguration *messagingConfiguration = [[ZDKMessagingConfiguration alloc] init];
messagingConfiguration.isMultilineResponseOptionsEnabled = YES;