Налаштуйте віджет чату

Налаштуйте зовнішній вигляд чату самостійно.
Написано Микола
Оновлено 2 місяці тому

Щоб ваш віджет чату виглядав так, як вам потрібно, використовуйте 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 та сповіщень. Ви можете використовувати однакову модель скрізь або створити окремі моделі для кожного рівня чату.

setPlaceholderBackgroundColor встановлює колір кону плейсхолдера
setPlaceholderTextColor встановлює колір тексту плейсхолдера

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

Налаштуйте форму чату за допомогою 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();
setButtonContinueBackgroundSelector встановлює фоновий селектор кнопки "Продовжити"
setInputFieldTextColor встановлює колір тексту для кожного поля введення форми чату
setInputFieldTextHintColor встановлює колір тексту підказки для кожного поля введення форми чату
setBackgroundColor встановлює колір фону форми чату
setMessageBackgroundColor встановлює колір фону для повідомлення форми чату
setMessageTextColor встановлює колір тексту для повідомлення форми чату

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

Налаштуйте свій чат за допомогою 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();
setIncomingBubbleTextColor встановлює колір тексту бульбашки вхідного повідомлення
setOutcomingBubbleTextColor встановлює колір тексту бульбашки надісланого повідомлення
setIncomingBubbleColor встановлює колір бульбашки вхідного повідомлення
setOutcomingBubbleColor встановлює колір бульбашки надісланого повідомлення
setIncomingBubbleLinkColor встановлює колір посилання у вхідному повідомленні
setOutcomingBubbleLinkColor встановлює колір посилання у надісланому повідомленні
setIncomingCodeBackgroundColor встановлює колір фону коду у вхідному повідомленні
setOutcomingCodeBackgroundColor встановлює колір фону коду у надісланому повідомленні
setIncomingCodeTextColor встановлює колір тексту коду у вхідному повідомленні
setOutcomingCodeTextColor встановлює колір тексту коду у надісланому повідомленні
setIncomingBlockQuoteColor встановлює колір блоку цитати у вхідному повідомленні
setOutcomingBlockQuoteColor встановлює колір блоку цитати у надісланому повідомленні
setIncomingFileTextColor встановлює колір тексту розширення файлу у вхідному повідомленні
setOutcomingFileTextColor встановлює колір тексту розширення файлу у надісланому повідомленні
setIncomingFileIconBackgroundColor встановлює колір фону розширення файлу у вхідному повідомленні
setOutcomingFileIconBackgroundColor встановлює колір фону розширення файлу у надісланому повідомленні
setAuthorNameColor встановлює колір імені автора у вхідних повідомленнях
setSystemMessageColor встановлює колір тексту системного повідомлення (наприклад, час)
setTimeTextColor встановлює колір тексту з часом в кожному вхідному або вихідному повідомленні
setProgressViewsColor встановлює кожен колір ProgressView
setBackgroundColor встановлює колір фону в області чату
setFabDownBackgroundRes встановлює ресурс фону для ChatDownFab
setFabIconRes встановлює ресурс зображення для ChatDownFab
setBrandingType встановлює тип (СВІТЛИЙ або ТЕМНИЙ) BrandingView
setAvatarTheme встановлює модель HCAvatarTheme для області чату

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

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();
setButtonType встановлює тип кнопки надсилання (ТЕКСТ або ІКОНКА)
setButtonTextColor встановлює колір тексту кнопки надсилання, якщо тип кнопки надсилання — ТЕКСТ
setButtonIcon встановлює ресурс для завантаження іконки кнопки надсилання, якщо тип кнопки надсилання – ІКОНКА
setAttachmentsIcon встановлює ресурс для завантаження іконки кнопки вкладення
setButtonSendBackgroundSelector встановлює ресурс селектора для кнопки вкладення
setBackgroundColor встановлює колір фону для області чату
setInputFieldTextColor встановлює колір тексту для поля введення області чату
setInputFieldTextHintColor встановлює колір підказки для поля введення області чату
setMessageMenuBackgroundColor встановлює колір фону для кожного меню повідомлення
setMessageMenuSummaryTextColor встановлює колір підсумкового тексту для кожного меню повідомлення
setMessageMenuIconColor встановлює колір іконок для кожного пункту меню повідомлення
setMessageMenuTextColor встановлює колір тексту для кожного пункту меню повідомлення

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

Наш 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();
setToastsBackgroundColor встановлює колір фону для будь-якого тоста SDK
setToastsTextColor встановлює колір тексту для будь-якого тоста SDK
setWelcomeMessageBackgroundColor встановлює колір тла повідомлення привітання
setWelcomeMessageTextColor встановлює колір тексту привітального повідомлення
setDialogsHeaderColor встановлює колір хедеоа в будь-якому діалоговому вікні інформаційного сповіщення
setWarningDialogsHeaderColor встановлює колір заголовка в будь-якому діалоговому вікні сповіщення про помилку
setDialogAcceptButtonDrawableRes встановлює ресурс фону для будь-яких кнопок прийняття в будь-якому діалоговому вікні сповіщення SDK
setDialogCancelButtonDrawableRes встановлює ресурс фону для будь-яких кнопок скасування в будь-якому діалоговому вікні сповіщення SDK

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

Налаштуйте форму чату за допомогою 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();
setBackgroundColor встановлює колір фону панелі
setStatusBarColor встановлює колір рядка статусу
setStatusBarLight встановіть це значення як true, якщо колір рядка статусу світлий, щоб встановити чорний колір тексту рядка статусу
setOutlineColor встановлює колір розділювача між панеллю і областю чату
setAgentsTextColor встановлює колір тексту для імен операторів у AgentsView
setBackButtonDrawableRes встановлює ресурс іконок кнопки "Назад" на панелі
setAvatarTheme встановлює модель HCAvatarTheme для області панелі

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

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

HCNotificationsTheme notificationsDesign = new HCNotificationsTheme.Builder()
                .setAvatarTheme(avatarTheme)
                .setChannelTitle("Support")
                .setMessagesCounterEnabled(false)
                .setSmallIconRes(R.drawable.ic_favicon)
                .build();
setChannelTitle встановлює рядок назви каналу
setChannelTitleRes встановлює ресурс назви каналу
setSmallIconRes встановлює маленьку іконку на NotificationCompat.Builder
setMessagesCounterEnabled увімкнути або вимкнути лічильник повідомлень у сповіщеннях
setAvatarTheme встановлює модель HCAvatarTheme для сповіщення
setColor встановлює колір сповіщення для NotificationCompat.Builder

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

Щоб об’єднати всі частини теми, скористайтеся 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
);
setToolbarAreaTheme встановлює модель HCToolbarAreaTheme у HCTheme
setMessageAreaTheme встановлює модель HCMessageAreaTheme у HCTheme
setChatAreaTheme встановлює модель HCChatAreaTheme у HCTheme
setSystemAlertsTheme встановлює модель HCSystemAlertsTheme у HCTheme
setNotificationsTheme встановлює модель HCNotificationsTheme у HCTheme
setPreChatTheme встановлює модель HCPreChatTheme у HCTheme
Чи була наша стаття корисною?