Mobile SDK chat customization guide

The mobile SDK offers extensive customization capabilities, designed to empower you to incorporate brand requirements and create a unique and customized experience. This document provides a comprehensive overview of the available options in the mobile SDK to optimize consumer chat interactions.

Example

You can include as much or as little customization as you require to fit your business needs. Here is a side-by-side comparison of a default chat and a highly customized chat.

A side-by-side example of customized chat appearances is shown.

Customization Options

  • Visibility

  • Avatar icon

  • Text

  • Font (size, style and color)

  • Divider color

  • Divider width

An example of the customizable sections of the header is shown.

Inline button

  • Style

  • Alignment

  • Background color

  • Text color

  • Corner radius

  • Font (size, style and color)

  • Border color

  • Border Width

An example of the customizable aspects of the button is shown.

Back button

  • Visibility

  • Icon

  • Text color

An example of the back button is shown.

End button

  • Visibility

  • Font (size, style and color)

An example indicating the button to end chat is shown.

Timestamp

  • Font (size, style and color)

An example indicating the timestamp is shown.

System message and buttons

  • Background Color

  • Corner Radius

  • Font (size, style and color)

  • Border color

  • Border width

An example of the system messages and buttons is shown.

Consumer and agent message bubbles

  • Background color

  • Corner radius

  • Font (size, style and color)

  • Border color

  • Border width

  • Avatar

An example of the customer and agent message bubbles is shown.

User input bar

  • Background color

  • Border color

  • Border width

  • Camera icon

  • Co-browse icon

  • Send button icon

An example indicating the user input bar is shown.

User input bar (text field)

  • Corner radius

  • Cursor color

  • Placeholder text

  • Font (size, style and color)

  • Border color

  • Border width

An example indicating the user input bar text field is shown.

Loading spinner

  • Custom animation

An example indicating the customizabe aspects of the loading spinner is shown.