Hello 👋 How can we help?

Customize your chat widget

You can customize your chat widget's look by yourself!
Written by Andrew
Updated 2 weeks 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:

ObjC:

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

Swift:

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. 

ObjC:

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];

Swift:

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

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.

chatWaitingMessageBackgroundColor Waiting message background color
chatWaitingMessageFontColor Waiting message font color
chatWaitingMessageActivityIndicatorColor Waiting message activity indicator color
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

--

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

--

messageIncomingQuoteLineColor Color for quote line

--

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

--

 Client messages

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.

brandingType

HCSThemeBrandingType : HCSThemeBrandingLight / HCSThemeBrandingDark

keyboardAppearance UIKeyboardAppearance
mainColor

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

messageIncomingLinksColor

messageIncomingFileTypeBackgroundColor

messageOutgoingBubbleColor

sendMessageSendButtonColor

prechatFormContinueButtonColor

navigationBarBackgroundColor

prechatFormTopMessageBackgroundColor

Did this answer your question?