Hello 👋 How can we help?

Customize your chat widget

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

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

Here you can see three different themes: Light, Dark and Custom. We predefined light and dark theme, so you can easily use them by calling:


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


HelpCrunch.bindTheme(HelpCrunch.defaultTheme()) // 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 one of the predefined. 


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


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

Below you can find all properties that you can change.

Pre-chat form theme

Customize your pre-chat form with the following properties. You can set your custom pre-chat's background, button, and field colors' parameters.

prechatFormTopMessageBackgroundColor Background color for top message
prechatFormTopMessageFontColor Font color for top message
prechatFormContinueTextColor Continue button text color
prechatFormContinueButtonColor Continue button color
prechatFormContinueButtonText Continue button text
prechatFormTextFieldBackgroundColor Text Field background color
prechatFormTextFieldBorderColor Text Field border color
prechatFormTextFieldSelectedBorderColor Selected Text Field border color
prechatFormTextFieldPlaceholderColor Text Field Placeholder color
prechatFormTextFieldFontColor Text Field text color

Chat theme

Customize your chat with the following properties to change the chat background, the colors of bubbles, links, quotes, code fragments and much more.

1. Waiting message

chatWaitingMessageBackgroundColor Waiting message background color
chatWaitingMessageFontColor Waiting message font color
chatWaitingMessageActivityIndicatorColor Waiting message activity indicator color
chatWaitingMessageIsVisible Boolean to show or hide "Searching for a free agent" view

2. Dates and background

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

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


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 Agent Info view and even the 1px shadow below the bar!

navigationBarTextColor Color for text
navigationBarBackgroundColor Background color
navigationBarAgentsMoreBackgroundColor Background color for info agent view with (+number) text
navigationBarBottomLineColor Color of shadow 1px line below navigation bar
isNavigationBarBottomLineVisible Boolean to show or hide shadow below navigation bar

'Send message' area

Here you can customize how your 'send message' area will look like: change icons, colors or even replace the 'Send' button icon with a text.

sendMessageBackgroundColor Background color
sendMessageAttachmentIconImage UIImage for attachment button
sendMessageSendButtonIconImage UIImage for send button
sendMessageTextFieldBackgroundColor Background for text field
sendMessageTextFieldBorderColor Text field border color
sendMessageTextFieldFontColor Text field text color
sendMessageTextFieldPlaceholderColor Text field placeholder color
sendMessageSendButtonText Text for send button. If set - it replaces image
sendMessageSendButtonColor If sendMessageSendButtonText set - it controls color of the text, if not - circle background below icon

Common changes

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


HCSThemeBrandingType : HCSThemeBrandingLight / HCSThemeBrandingDark

keyboardAppearance UIKeyboardAppearance

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








Chat modal presentation style

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

Did this answer your question?