Customizing the look

This page shows you how to 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 Chat providers and building your own UI.

Customizing the Chat experience

The Chat SDK provides the ChatConfiguration class that you can use to enable or disable certain conversational features.


let chatConfiguration = ChatConfiguration()
chatConfiguration.isAgentAvailabilityEnabled = false


ZDKChatConfiguration *chatConfiguration = [[ZDKChatConfiguration alloc] init];
chatConfiguration.isAgentAvailabilityEnabled = YES;
Flag Description
chatMenuActions An array of ChatMenuAction items which configures the menu items available to your users. Default is [.emailTranscript, .endChat] which shows both the "Request transcript" and "End chat" menu items. An empty array will hide the menu.
isChatTranscriptPromptEnabled If true, visitors will be prompted at the end of their chat asking them whether they would like a transcript sent by email.
isPreChatFormEnabled If true, visitors are prompted for information in a conversational manner prior to starting the chat. Defaults to true.
isOfflineFormEnabled If this flag is enabled (as well as isAgentAvailabilityEnabled) then visitors will be presented with a form allowing them to leave a message if no agents are available. This will create a support ticket. Defaults to true.
preChatFormFieldConfiguration This property allows you to configure the requirements of each of the pre-chat form fields. See Configuring a pre-chat form for more information.
isAgentAvailabilityEnabled If true, and no agents are available to serve the visitor, they will be presented with a message letting them know that no agents are available. If it's disabled, visitors will remain in a queue waiting for an agent. Defaults to true.

For the full documentation on the ChatConfiguration class, see the reference docs.

Configuring a pre-chat form

A pre-chat form is presented to a user before the chat starts with an agent, providing an opportunity for information to be gathered. The form can support name, email address, and phone number fields as well as selecting a department and entering an initial message. A local bot presents the form to the user in a conversational flow. This bot can be customized to match your brand. See Configuring the chat bot for more details.


The pre-chat form is enabled by default. It can be disabled by setting the isPreChatFormEnabled to false. Form fields can be configured with one of the following levels of requirements:

State Description
.optional User can continue without filling the field.
.hidden Field will not be shown to the user.
.required User is required to fill the field to continue.

To configure the requirements of each of the pre-chat form fields, use the ChatFormConfiguration class:


let formConfiguration = ChatFormConfiguration(name: .required,
                                              email: .optional,
                                              phoneNumber: .hidden,
                                              department: .required)
let chatConfiguration = ChatConfiguration()
chatConfiguration.isPreChatFormEnabled = true
chatConfiguration.preChatFormConfiguration = formConfiguration


ZDKChatFormConfiguration *formConfiguration = [[ZDKChatFormConfiguration alloc] initWithName:ZDKFormFieldStatusRequired
ZDKChatConfiguration *chatConfiguration = [[ZDKChatConfiguration alloc] init];
chatConfiguration.isPreChatFormEnabled = YES;
chatConfiguration.preChatFormConfiguration = formConfiguration;

 Styling the chat screen

There is currently only one colour that can be set on the Chat SDK. This colour is used to style the user's message bubbles. For more details, see the docs on styling the Unified SDK.


import CommonUISDK // import the necessary component
CommonTheme.currentTheme.primaryColor = .red


#import <CommonUISDK/CommonUISDK.h> // import the necessary component
[ZDKCommonTheme currentTheme].primaryColor = [UIColor redColor];

Configuring the Chat bot

The Chat SDK leverages the Unified SDK to present chat features to the user in a conversational flow. Pre-chat forms, offline forms, and customer satisfaction requests are all sent to the user via Answer Bot. The name and icon of the bot can be overridden to promote your brand. For more details, see the docs on the Messaging configuration.

 Localizing the text

The Chat SDK is localized in 33 different languages including right-to-left languages. It is possible to override the strings to match your brand. See Localizing the UI for more details.