To make your chat widget look the way you want, use the HCTheme.Builder combined with the HCOptions.Builder().setTheme(theme) method.
Brand color change
Before we start.
You can easily use your brand color instead of the main color in our SDK using a special builder. All other colors of icons and text are adapted to the color of your choice
HCTheme theme = new HCTheme.Builder(R.color.your_brand_color, true)
.build();
Advanced Customizing
The color theme is divided into 7 parts that are interconnected using the HCTheme.Builder model
Avatar Theme
HCAvatarTheme is used to customize the background color and texts in users' or agents' avatar placeholders.
HCAvatarTheme avatarTheme = new HCAvatarTheme.Builder()
.setPlaceholderBackgroundColor(R.color.avatar_placeholder_color)
.setPlaceholderTextColor(android.R.color.white)
.build();
This model can be used to set the avatar type in chat, AgentsView and notifications. You can use the same model everywhere or create separate ones for each chat level.
setPlaceholderBackgroundColor | sets the background color of the placeholder |
setPlaceholderTextColor | sets the text color of the placeholder |
Pre-chat form theme
Customize your pre-chat form with HCPreChatTheme.Builder. You can set your custom pre-chat's background, button, and field colors' parameters.
HCPreChatTheme preChatTheme = new HCPreChatTheme.Builder()
.setButtonContinueBackgroundSelector(R.drawable.bg_btn_accept)
.setInputFieldTextColor(R.color.hc_color_chats_text_dark)
.setInputFieldTextHintColor(R.color.hc_color_chats_text_hint_dark)
.setBackgroundColor(R.color.background_color)
.setMessageBackgroundColor(R.color.welcome_messages_background_color)
.setMessageTextColor(android.R.color.white)
.build();
setButtonContinueBackgroundSelector | sets the background selector of the 'Continue' button |
setInputFieldTextColor | sets the text color to every pre-chat input field |
setInputFieldTextHintColor | sets the hint text color to every pre-chat input field |
setBackgroundColor | sets the pre-chat form background color |
setMessageBackgroundColor | sets the background color to the pre-chat form message |
setMessageTextColor | sets the text color to the pre-chat form message |
Chat area theme
Customize your chat with HCChatAreaTheme.Builder, which can help you change the chat background as well as the colors of bubbles, links, quotes, code fragments and much more.
HCChatAreaTheme chatAreaTheme = new HCChatAreaTheme.Builder()
.setAvatarDesign(avatarTheme)
.setIncomingBubbleTextColor(android.R.color.white)
.setOutcomingBubbleTextColor(android.R.color.white)
.setIncomingBubbleLinkColor(android.R.color.white)
.setOutcomingBubbleLinkColor(android.R.color.white)
.setIncomingBubbleColor(R.color.incoming_bubble_color)
.setOutcomingBubbleColor(R.color.outoming_bubble_color)
.setSystemMessageColor(android.R.color.white)
.setTimeTextColor(android.R.color.white)
.setProgressViewsColor(android.R.color.white)
.setBackgroundColor(R.color.background_color)
.setFabDownBackgroundRes(R.drawable.bg_bottom_fab)
.setBrandingType(HCChatAreaTheme.Branding.DARK)
.setFabIconRes(R.drawable.ic_arrow_downward)
.setIncomingMarkdownCodeBackgroundColor(R.color.hc_color_code_bg_incoming_dark)
.setOutcomingMarkdownCodeBackgroundColor(R.color.hc_color_code_bg_outcoming_dark)
.setIncomingMarkdownCodeTextColor(R.color.hc_color_code_color)
.setOutcomingMarkdownCodeTextColor(R.color.hc_color_code_color)
.setIncomingBlockQuoteColor(R.color.hc_color_block_quote_incoming_dark)
.setOutcomingBlockQuoteColor(R.color.hc_color_block_quote_outcoming_dark)
.setIncomingFileTextColor(R.color.hc_color_chats_text)
.setOutcomingFileTextColor(R.color.hc_color_chats_text)
.setOutcomingFileIconBackgroundColor(android.R.color.white)
.setIncomingFileIconBackgroundColor(android.R.color.white)
.setAuthorNameColor(android.R.color.white)
.build();
setIncomingBubbleTextColor | sets the incoming bubble text color |
setOutcomingBubbleTextColor | sets the outcoming bubble text color |
setIncomingBubbleColor | sets the incoming bubble color |
setOutcomingBubbleColor | sets the outcoming bubble color |
setIncomingBubbleLinkColor | sets the link color in incoming message |
setOutcomingBubbleLinkColor | sets the link color in outcoming message |
setIncomingCodeBackgroundColor | sets the code background color in incoming message |
setOutcomingCodeBackgroundColor | sets the code background color in outcoming message |
setIncomingCodeTextColor | sets the code text color in incoming message |
setOutcomingCodeTextColor | sets the code text color in outcoming message |
setIncomingBlockQuoteColor | sets the quote block color in incoming message |
setOutcomingBlockQuoteColor | sets the quote block color in outcoming message |
setIncomingFileTextColor | sets the file extension text color in incoming file message |
setOutcomingFileTextColor | sets the file extension text color in outcoming file message |
setIncomingFileIconBackgroundColor | sets the file extension background color in incoming file message |
setOutcomingFileIconBackgroundColor | sets the file extension background color in outcoming file message |
setAuthorNameColor | sets the author name color in incoming messages |
setSystemMessageColor | sets the system message text color (like time or other) |
setTimeTextColor | sets the time text color in every incoming or outcoming messages |
setProgressViewsColor | sets the every ProgressView color |
setBackgroundColor | sets the background color in the chat area |
setFabDownBackgroundRes | sets the background resource for the ChatDownFab |
setFabIconRes | sets the image resource for the ChatDownFab |
setBrandingType | sets the type (DARK or LIGHT) of the BrandingView |
setAvatarTheme | sets the HCAvatarTheme model to the chat area |
Message area theme
The HCMessageAreaTheme is used to create the message input area theme. Like every component of the HelpCrunch chat theme, this model has a builder. Use HCChatAreaTheme.Builder to create the most inviting input area.
HCMessageAreaTheme messageAreaTheme = new HCMessageAreaTheme.Builder()
.setButtonType(HCMessageAreaTheme.ButtonType.TEXT)
.setAttachmentsIcon(R.drawable.ic_attach_file)
.setButtonSendBackgroundSelector(R.drawable.button_send)
.setButtonIcon(R.drawable.ic_arrow_upward)
.setBackgroundColor(R.color.background_color)
.setInputFieldTextColor(android.R.color.white)
.setInputFieldTextHintColor(R.color.hc_color_chats_text_hint_dark)
.setMessageMenuBackgroundColor(R.color.statusbar_color)
.setMessageMenuSummaryTextColor(android.R.color.white)
.setMessageMenuIconColor(R.color.toolbar_icon_color)
.setMessageMenuTextColor(android.R.color.white)
.build();
setButtonType | sets the send button type (TEXT or ICON) |
setButtonTextColor | sets the send button text color if send button type is TEXT |
setButtonIcon | sets the send button icon drawable resource if send button type is ICON |
setAttachmentsIcon | sets the attachment button icon drawable resource |
setButtonSendBackgroundSelector | sets the attachment button drawable selector resource |
setBackgroundColor | sets the background color to the chat area |
setInputFieldTextColor | sets the text color to the chat area input field |
setInputFieldTextHintColor | sets the hint color to the chat area input field |
setMessageMenuBackgroundColor | sets the background color to every message menu |
setMessageMenuSummaryTextColor | sets the summary text color to every message menu |
setMessageMenuIconColor | sets the icons color to every message menu item |
setMessageMenuTextColor | sets the text color to every message menu item |
System Alerts Theme
Our SDK shows important system notifications, as well as warnings about requested permissions in the form of Alert Dialogs. And you can customize their look with HCSystemAlertsTheme.Builder.
HCSystemAlertsTheme systemAlerts = new HCSystemAlertsTheme.Builder()
.setDialogsHeaderColor(R.color.statusbar_color)
.setToastsBackgroundColor(R.color.hc_toast_default)
.setToastsTextColor(R.color.system_snack_text_color)
.setWelcomeScreenBackgroundColor(R.color.welcome_messages_background_color)
.setWelcomeScreenTextColor(android.R.color.white)
.setWarningDialogsHeaderColor(R.color.hc_color_bg_button_enabled_dark)
.setDialogAcceptButtonDrawableRes(R.drawable.bg_btn_accept)
.setDialogCancelButtonDrawableRes(R.drawable.bg_btn_cancel)
.build();
setToastsBackgroundColor | Sets the background color for any SDK toast |
setToastsTextColor | sets text color for any SDK toast |
setWelcomeMessageBackgroundColor | sets welcome message background color |
setWelcomeMessageTextColor | sets welcome message text color |
setDialogsHeaderColor | sets header color in any SDK information alert dialog |
setWarningDialogsHeaderColor | sets header color in any SDK error alert dialog |
setDialogAcceptButtonDrawableRes | sets the background drawable resource for any accept buttons in any SDK alert dialog |
setDialogCancelButtonDrawableRes | sets the background drawable resource for any cancel buttons in any SDK alert dialog |
Toolbar area theme
Customize your pre-chat form with HCToolbarAreaTheme.Builder. Change the colors of agent avatars' placeholder, background and status bar. It's also possible to change the icon of the back button. You can do all this with HCToolbarAreaTheme.
HCToolbarAreaTheme toolbarAreaTheme = new HCToolbarAreaTheme.Builder()
.setBackgroundColor(R.color.toolbar_color)
.setStatusBarColor(R.color.statusbar_color)
.setStatusBarLight(false)
.setOutlineColor(R.color.toolbar_outline_color)
.setAgentsTextColor(android.R.color.white)
.setBackButtonDrawableRes(R.drawable.ic_keyboard_arrow_left)
.build();
setBackgroundColor | sets the toolbar background color |
setStatusBarColor | sets the statusbar color |
setStatusBarLight | set this value to true if your status bar color is light to set black status bar text color |
setOutlineColor | sets the color of divider between toolbar and chat areas |
setAgentsTextColor | sets the text color for agent names in AgentsView |
setBackButtonDrawableRes | sets the toolbar back button icon resource |
setAvatarTheme | sets the HCAvatarTheme model to the toolbar area |
Notifications theme
Notifications provide short, timely information about every message in chat while it's minimized or not in use. To customize them, you can use HCNotificationsTheme.Builder
HCNotificationsTheme notificationsDesign = new HCNotificationsTheme.Builder()
.setAvatarTheme(avatarTheme)
.setChannelTitle("Support")
.setMessagesCounterEnabled(false)
.setSmallIconRes(R.drawable.ic_favicon)
.build();
setChannelTitle | sets the channel title string |
setChannelTitleRes | sets the channel title resource |
setSmallIconRes | sets the small icon to the NotificationCompat.Builder |
setMessagesCounterEnabled | enable or disable messages counter in notifications |
setAvatarTheme | sets the HCAvatarTheme model to the notification |
setColor | sets the notification color to the NotificationCompat.Builder |
How to put it all together
To put all parts of the theme together use HCTheme.Builder. It will create the HCTheme model, which you can set to your options with the setTheme method. After this, init the HelpCrunch SDK with your options.
Done! You're breathtaking! ヽ(^◇^*)/
HCTheme theme = new HCTheme.Builder()
.setToolbarAreaTheme(toolbarAreaTheme)
.setMessageAreaTheme(messageAreaTheme)
.setChatAreaTheme(chatAreaTheme)
.setSystemAlertsTheme(systemAlerts)
.setNotificationsTheme(notificationsDesign)
.setPreChatTheme(preChatTheme)
.build();
HCOptions.Builder options = new HCOptions.Builder()
.setTheme(theme)
.build();
HelpCrunch.initialize(
this,
ORGANISATION,
APP_ID,
SECRET,
user,
options
);
setToolbarAreaTheme | sets HCToolbarAreaTheme model to the HCTheme |
setMessageAreaTheme | sets HCMessageAreaTheme model to the HCTheme |
setChatAreaTheme | sets HCChatAreaTheme model to the HCTheme |
setSystemAlertsTheme | sets HCSystemAlertsTheme model to the HCTheme |
setNotificationsTheme | sets HCNotificationsTheme model to the HCTheme |
setPreChatTheme | sets HCPreChatTheme model to the HCTheme |