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 themeTheme 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!
