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 componentimport CommonUISDK
// Set the stylingCommonTheme.currentTheme.primaryColor = .orange
// Set custom navigation bar colorUINavigationBar.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 componentimport MessagingSDK
// creationlet messagingConfiguration = MessagingConfiguration()messagingConfiguration.name = "Bot Name"
// pass it into the SDKlet viewController = try! Messaging.instance.buildUI(engines: engines, configs: [messagingConfiguration])

Objective-C

// import the necessary component#import <MessagingSDK/MessagingSDK.h>
// creationZDKClassicMessagingConfiguration *messagingConfiguration = [ZDKClassicMessagingConfiguration new];messagingConfiguration.name = @"CustomBot";
// pass it into the SDKNSError *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 componentimport 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;