Customizing the look

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.

The SDK itself doesn't support Dark Mode. The customization of the Unified SDK UI is very restricted but the following attributes can be set to specific colors.

Swift

// import the necessary component
import CommonUISDK

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

// Set custom navigation bar color
UINavigationBar.appearance().barTintColor = .orange

Objective-C

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

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

// Set custom navigation bar color
[[UINavigationBar appearance] setBarTintColor: 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.

Note: Starting with Messaging SDK version 5.0.0, the Objective-C header for ZDKMessagingConfiguration is renamed to ZDKClassicMessagingConfiguration.

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
ZDKClassicMessagingConfiguration *messagingConfiguration = [ZDKClassicMessagingConfiguration new];
messagingConfiguration.name = @"CustomBot";

// pass it into the SDK
NSError *error = nil;
UIViewController *viewController = [[ZDKClassicMessaging 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>

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