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();

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();

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();

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();

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();

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();

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