Customizing the look

This page shows you the different ways that you can customize the SDK UI.

Before you start

Before you start, you should know the following:

  • You can customize several colors used in the Unified SDK UI. For more details on theming, see the docs on styling the Unified SDK.
  • 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 ChatConfiguration.Builder that you can use to enable or disable certain conversational features.

ChatConfiguration chatConfiguration = ChatConfiguration.builder()
    .withAgentAvailabilityEnabled(false)
    .build();
Feature Description
withAgentAvailabilityEnabled 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.
withChatTranscriptsEnabled If true, visitors will be prompted at the end of the chat if they wish to receive a chat transcript or not. Defaults to true.
withPreChatFormEnabled If true, visitors are prompted for information in a conversational manner prior to starting the chat. Defaults to true.
withOfflineFormsEnabled If this flag is enabled (as well as withAgentAvailabilityEnabled) 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.
withChatMenuItems Gives the ability to override the default conversation menu that appears during a chat. ChatMenuAction.END_CHAT and ChatMenuAction.CHAT_TRANSCRIPTare the two supported menu items. To remove the menu entirely you can leave the arguments empty, or pass null
withNameFieldStatus, withEmailFieldStatus, withPhoneFieldStatus and withDepartmentFieldStatus These flags allow you to configure how a pre-chat form will appear to your visitors. See Configuring a pre-chat form for more information.

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

Enabling multi-line quick replies

Quick replies can be displayed on-screen vertically, instead of horizontally by configuring MessagingActivity. This should prevent instances of users needing to scroll through a list of quick replies.

MessagingActivity.builder()
        .withEngines(getEngines())
        .withMultilineResponseOptionsEnabled(true)
        .show(requireActivity(), chatConfigView.getChatConfiguration())
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 passing false to the withPreChatFormEnabled builder method. 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 ChatConfiguration class:

ChatConfiguration chatConfiguration = ChatConfiguration.builder()
    .withPreChatFormEnabled(true)
    .withNameFieldStatus(PreChatFormFieldStatus.REQUIRED)
    .withEmailFieldStatus(PreChatFormFieldStatus.OPTIONAL)
    .withPhoneFieldStatus(PreChatFormFieldStatus.HIDDEN)
    .withDepartmentFieldStatus(PreChatFormFieldStatus.REQUIRED)
    .build()

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