Customize your chat widget

You can customize your chat widget's look by yourself!
Written by Andrew
Updated 3 months ago

To make your chat widget look exactly like you want, use the HCSTheme object, configure it in any way you want and use the HelpCrunch.setTheme(:) method to apply it.

In the screenshot above,  you can see three different themes: Light, Dark, and Custom. We predefined the light and dark themes, so you can easily use them by calling:

ObjC:

[HelpCrunch bindTheme:[HelpCrunch lightTheme]]; // Light theme
[HelpCrunch bindTheme:[HelpCrunch darkTheme]]; // Dark theme

Swift:

HelpCrunch.bindTheme(HelpCrunch.lightTheme()) // Light theme
HelpCrunch.bindTheme(HelpCrunch.darkTheme()) // Dark theme

Theme configuration

If you want more control over your chat widget customization, you can create your own HCSTheme object or change any of the predefined ones.

For your comfort, we've separated different theme settings into different classes, which you can use with the following properties of the HCSTheme class: 

  • chats - everythig related to the chat list screen
  • navigationBar - background, indicators, and agents configuration
  • chatArea - everything related to the chat
  • sendMessageArea - enter text, add attachment, and send button area
  • prechatForm - full Prechat Form customization

ObjC:

HCSTheme *theme = [HelpCrunch defaultTheme];
theme.mainColor = [UIColor colorWithRed:0.90 green:0.51 blue:0.15 alpha:1.00];
theme.sendMessageArea.sendButtonText = @"Send";
[HelpCrunch bindTheme:theme];

Swift:

let theme = HelpCrunch.defaultTheme()
theme.mainColor = UIColor(red: 0.90, green: 0.51, blue: 0.15, alpha: 1.0)
theme.sendMessageArea.sendButtonText = "Send";
HelpCrunch.bindTheme(theme)

You can find all the properties that you can change below.

Pre-chat form theme

Customize your pre-chat form with the following properties. You can set your custom pre-chat background, button, and field colors' parameters. Access them via the prechatForm property (e.g. theme.prechatForm.continueButtonColor)

topMessageBackgroundColor Background color for the top message
topMessageFontColor Font color for the top message
continueTextColor 'Continue' button text color
continueButtonColor 'Continue' button color
continueButtonText 'Continue' button text
textFieldBackgroundColor Text field background color
textFieldBorderColor Text field border color
textFieldSelectedBorderColor Selected text field border color
textFieldPlaceholderColor Text field placeholder color
textFieldFontColor Text field text color
backgroundColor Background color for screen

Chats

Customize your chats screen with the following properties. Access them via the chats property (e.g. theme.chats.backgroundColor)

titleColor Name label color
backgroundColor Main background color
unreadMessagesIndicatorColor Unread messages background color
dateColor Date text color
messageColor Last message color
createButtonColor Create button tint color
createButtonBackgroundColor Create button background color

Chat theme

Customize your chat with the following properties to change its background, bubbles' colors, links, quotes, code fragments and much more. Access them via the chatArea property (e.g. theme.chatArea.backgroundColor).

1. Waiting message

waitingMessageBackgroundColor Waiting message background color
waitingMessageFontColor Waiting message font color
waitingMessageActivityIndicatorColor Waiting message activity indicator color
waitingMessageIsVisible Boolean to show or hide the "Searching for a free agent" view

2. Dates and background

messageTimeColor Messages' time color
chatDateColor Color for messages' date
chatBackgroundColor Background for chat

3. Offline

offlineMessageIconColor Icon color
offlineMessageBackgroundColor Overall background color
offlineMessageTitleColor Text color

4. Rating

ratingBackgroundColor Overall background color
ratingTitleColor Title text color
ratingRatingsDefaultColor Default rating color
ratingPoorColor Poor selected text color
ratingAvarageColor Avarage selected text color
ratingGreatColor Great selected text color

Agent messages

messageIncomingBubbleColor Bubble background color
messageIncomingFontColor Messages font color
messageIncomingAgentNameFontColor Font color for agent's name
messageIncomingLinksColor Links color

1. File attachments

messageIncomingFileTypeBackgroundColor Background color for file's type block
messageIncomingFileTypeFontColor Title color for file's type block

2. Quotes

messageIncomingQuoteLineColor Color for quote line

3. Code samples

messageIncomingCodeBorderColor Color for code block's border
messageIncomingCodeFontColor Code font color
messageIncomingCodeBackgroundColor Code background color

 Client messages

You can change client messages' styling the same way you did it with Agent messages. Here are the properties you can use for that:

messageOutgoingBubbleColor Background color
messageOutgoingFontColor Messages font color
messageOutgoingLinksColor Links color
messageOutgoingFileTypeBackgroundColor Background color for file's type block
messageOutgoingFileTypeFontColor Title color for file's type block
messageOutgoingQuoteLineColor Color for quote line
messageOutgoingCodeBorderColor Color for code block's border
messageOutgoingCodeFontColor Code font color
messageOutgoingCodeBackgroundColor Code background color

Navigation bar

Here's how you can change the look of the Navigation bar - its text color, background, color of the Agent Info view and even the 1px shadow below the bar!

Access them via the navigationBar property (e.g. theme.navigationBar.backgroundColor)

textColor Color for text
backgroundColor Background color
agentsMoreBackgroundColor Background color for info agent view with (+number) text
bottomLineColor Color of shadow 1px line below navigation bar
isBottomLineVisible Boolean to show or hide shadow below navigation bar
chatsNewIndicatorColor Background color of indicator circle

'Send message' area

You can customize how your 'send message' area will look like: change icons, colors, or even replace the 'Send' button icon with a plain text. Access them via the sendMessageArea property (e.g. theme.sendMessageArea.backgroundColor)

backgroundColor Background color
attachmentIconImage UIImage for attachment button
sendButtonIconImage UIImage for send button
textFieldBackgroundColor Background for text field
textFieldBorderColor Text field border color
textFieldFontColor Text field text color
textFieldPlaceholderColor Text field placeholder color
sendButtonText Text for send button. If set - it replaces image
sendButtonColor If sendMessageSendButtonText set - it controls color of the text, if not - circle background below icon

Common changes

At last, you can change chat background, types of keyboard, and branding icon to suit your dark or light theme.

chatArea.brandingType

HCSThemeBrandingType : HCSThemeBrandingLight / HCSThemeBrandingDark

chatArea.keyboardAppearance

sendMessageArea.keyboardAppearance

UIKeyboardAppearance
mainColor

Thats one property, that will be used if next properties are not set:

messageIncomingLinksColor

messageIncomingFileTypeBackgroundColor

messageOutgoingBubbleColor

sendMessageSendButtonColor

prechatFormContinueButtonColor

navigationBarBackgroundColor

prechatFormTopMessageBackgroundColor

Chat modal presentation style

Our chat works as a modal view controller. If you want to change its modal presentation, you can do it in your HCSConfiguration file. Just change the chatPresentationStyle property to any UIModalPresentationStyle you want!

Did this answer your question?