Щоб ваш віджет чату виглядав так, як вам потрібно, використовуйте HCTheme.Builder у поєднанні з методом HCOptions.Builder().setTheme(theme).

Зміна кольору бренду

Перш ніж ми почнемо.

Ви можете легко використовувати свій брендовий колір замість основного кольору в нашому SDK за допомогою спеціального конструктора. Усі інші кольори іконок і тексту адаптуються до кольору на ваш вибір.

HCTheme theme = new HCTheme.Builder(R.color.your_brand_color, true)
        .build();

Розширене налаштування

Кольорова тема розділена на 7 частин, які з’єднані між собою за допомогою моделі HCTheme.Builder.

Тема аватарок

HCAvatarTheme використовується для налаштування кольору фону та текстів у заповнювачах аватарок користувачів або операторів.

 HCAvatarTheme avatarTheme = new HCAvatarTheme.Builder()
                .setPlaceholderBackgroundColor(R.color.avatar_placeholder_color)
                .setPlaceholderTextColor(android.R.color.white)
                .build();

Цю модель можна використовувати для встановлення типу аватарки в чаті, AgentsView та сповіщень. Ви можете використовувати однакову модель скрізь або створити окремі моделі для кожного рівня чату.

Тема форми чату

Налаштуйте форму чату за допомогою HCPreChatTheme.Builder. Ви можете встановити власні параметри кольору фону, кнопок і полів.

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

Тема області чату

Налаштуйте свій чат за допомогою HCChatAreaTheme.Builder, який допоможе вам змінити фон чату, а також кольори бульбашок, посилань, цитат, фрагментів коду та багато іншого.

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

Тема області повідомлення

HCMessageAreaTheme використовується для створення теми області введення повідомлення. Як і кожен компонент теми чату HelpCrunch, ця модель має конструктор. Використовуйте HCChatAreaTheme.Builder, щоб створити область введення, яка виглядатиме найкраще для вас і ваших користувачів.

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

Тема системних сповіщень

Наш SDK показує важливі системні сповіщення, а також попередження про запити дозволів у формі Alert Dialogs. І ви можете налаштувати їхній вигляд за допомогою 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();

Тема області верхньої панелі

Налаштуйте форму чату за допомогою HCToolbarAreaTheme.Builder. Змініть кольори плейсхолдерів для аватарок операторів, фону та рядка статусу. Також можна змінити іконки кнопки "Назад". Ви можете зробити все це за допомогою 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();

Тема сповіщень

Сповіщення надають коротку своєчасну інформацію про кожне повідомлення в чаті, коли він згорнутий або не використовується. Щоб налаштувати їх, ви можете скористатися HCNotificationsTheme.Builder.

HCNotificationsTheme notificationsDesign = new HCNotificationsTheme.Builder()
                .setAvatarTheme(avatarTheme)
                .setChannelTitle("Support")
                .setMessagesCounterEnabled(false)
                .setSmallIconRes(R.drawable.ic_favicon)
                .build();

Як це все зібрати

Щоб об’єднати всі частини теми, скористайтеся HCTheme.Builder. Він створить модель HCTheme , яку ви зможете налаштувати за допомогою методу setTheme . Після цього запустіть HelpCrunch SDK зі своїми параметрами.

Готово!

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