Bold360 and BoldChat Developer Center

Chat view customizations

You can customize the initial chat view UI, and change UI on runtime according to live data.

Customizing UI components

To change and override the SDK implementations and customizations that are provided, you must use your own modified ChatConfiguration instance on ChatController.viewConfiguration.

Supported Configurations
Configuration Class Name Configuration Options
ChatViewConfiguration backgroundColor, backgroundImage, dateStampColor, customFont
IncomingBotConfiguration quickOptionConfig, persistentOptionConfig
IncomingLiveConfiguration backgroundColor, backgroundImage, dateStampColor, customFont, avatar, textColor
OutgoingConfiguration backgroundColor, backgroundImage, dateStampColor, customFont, avatar, textColor, sentSuccessfullyIcon, sentFailureIcon, pendingIcon
CarouselConfiguration backgroundColor, backgroundImage, dateStampColor, customFont, avatar, textColor
SystemMessageConfiguration backgroundColor, backgroundImage, dateStampColor, customFont, avatar, textColor

How to set configuration

The following example customizes the chat view:

self.chatController.viewConfiguration.chatViewConfig.backgroundImage = UIImage(named: "ww_back_light")
self.chatController.viewConfiguration.chatViewConfig.dateStampColor = UIColor.black

How to define a custom font

To set a custom font family, add the relevant file to the project and then add the following:

// For example our custom font is: `{CUSTOM_FONT_NAME}.ttf`
let font = CustomFont()
font.fontFileName = "{CUSTOM_FONT_NAME}.ttf"
font.font = UIFont(name: "{CUSTOM_FONT_NAME}", size: 15)
let font1 = CustomFont()
font1.fontFileName = "{CUSTOM_FONT_NAME}.otf"
font1.font = UIFont(name: "{CUSTOM_FONT_NAME}", size: 20)
self.chatController.viewConfiguration.outgoingConfig.customFont = font
self.chatController.viewConfiguration.incomingBotConfig.customFont = font1
self.chatController.viewConfiguration.incomingLiveConfig.customFont = font

Avatar Positioning

ChatElementConfiguration has an avatarPosition property of AvatarPosition type. By default, the outgoing element (customer's avatar) has the value of AvatarPositionBottomLeft and the incoming element (agent or bot's avatar) has the value of AvatarPositionBottomRight. To change the position of the avatar, use the following code:

self.chatController.viewConfiguration.incomingBotConfig.avatarPosition = .topLeft

Avatar positioning options

The following enumeration defines avatar positioning options:

typedef NS_ENUM(NSInteger, AvatarPosition) {
    AvatarPositionTopLeft,
    AvatarPositionBottomLeft,
    AvatarPositionTopRight,
    AvatarPositionBottomRight
};