Customize your chat widget

Configure your chat appearance by yourself!
Written by Alex
Updated 5 months ago

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

Did this answer your question?