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
- 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;
||An array of
||If true, visitors will be prompted at the end of their chat asking them whether they would like a transcript sent by email.|
||If true, visitors are prompted for information in a conversational manner prior to starting the chat. Defaults to
||If this flag is enabled (as well as
||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.|
||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
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. The bot details can be changed 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 flag to false.
Form fields can be configured with one of the following levels of requirements:
||User can continue without filling the field.|
||Field will not be shown to the user.|
||User is required to fill the field to continue.|
To configure the requirements of each of the pre-chat form fields, use the
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 email:ZDKFormFieldStatusOptional phoneNumber:ZDKFormFieldStatusHidden department:ZDKFormFieldStatusRequired]; ZDKChatConfiguration *chatConfiguration = [[ZDKChatConfiguration alloc] init]; chatConfiguration.isPreChatFormEnabled = YES; chatConfiguration.preChatFormConfiguration = formConfiguration;
Pre-chat form and the ChatAPIConfiguration class
The pre-chat form checks the details set on the
You can use the ChatAPIConfiguration class to preset the user's info and a department for a chat session.
If a property on the
visitorInfo object is populated, then the respective pre-chat form field will be hidden, regardless of its FormFieldStatus.
The same rule applies for the
visitorInfo properties and the
department are populated, then the form will not show and the user can send a message to start a chat.
Make sure to handle these properties appropriately when setting and resetting an identity.
Enabling multi-line quick replies
It's possible that your Chat instance has a long list of departments with long names. This can lead to a poor user experience when a user is selecting their desired department in the pre-chat form.
If this is the case, you can leverage a Flexbox-style layout.
You can switch to this layout by enabling the
isMultilineResponseOptionsEnabled flag on the
See the documentation for more details.
let configuration = MessagingConfiguration() configuration.isMultilineResponseOptionsEnabled = true
ZDKMessagingConfiguration *configuration = [[ZDKMessagingConfiguration alloc] init]; configuration.isMultilineResponseOptionsEnabled = YES;
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.