Кастомізуйте віджет чату

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

Щоб ваш віджет чату виглядав саме так, як ви хочете, скористайтеся об’єктом HCSTheme, налаштуйте його будь-яким способом і скористайтеся методом HelpCrunch.setTheme(:) для його застосування.

На скріншоті вище ви можете побачити три різні теми: Світлу, Темну і Власну. Ми попередньо налаштували світлу та темну теми, тому ви можете легко ними користуватися, викликавши:

ObjC:

[HelpCrunch bindTheme:[HelpCrunch lightTheme]]; // Light theme
[HelpCrunch bindTheme:[HelpCrunch darkTheme]]; // Dark theme

Swift:

HelpCrunch.bindTheme(HelpCrunch.lightTheme()) // Light theme
HelpCrunch.bindTheme(HelpCrunch.darkTheme()) // Dark theme

Налаштування теми

Якщо ви хочете більше контролювати налаштування віджета чату, ви можете створити власний об’єкт HCSTheme або змінити будь-який із попередньо доданих.

Для вашого комфорту ми розділили різні налаштування теми на різні класи, які ви можете використовувати з такими властивостями класу HCSTheme :

  • chats - усе, що стосується екрана списку чату
  • navigationBar - фон, індикатори та налаштування агентів
  • chatArea - все, що стосується чату
  • sendMessageArea - введіть текст, додайте вкладення та область кнопки надсилання
  • prechatForm - повне налаштування форми чату.

ObjC:

HCSTheme *theme = [HelpCrunch defaultTheme];
theme.mainColor = [UIColor colorWithRed:0.90 green:0.51 blue:0.15 alpha:1.00];
theme.sendMessageArea.sendButtonText = @"Send";
[HelpCrunch bindTheme:theme];

Swift:

let theme = HelpCrunch.defaultTheme()
theme.mainColor = UIColor(red: 0.90, green: 0.51, blue: 0.15, alpha: 1.0)
theme.sendMessageArea.sendButtonText = "Send";
HelpCrunch.bindTheme(theme)

Нижче ви можете знайти всі властивості, які можна змінити

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

Налаштуйте форму попереднього чату за допомогою наступних властивостей. Ви можете встановити власний колір фону, кнопок і полів. Доступ до них можна отримати через властивість prechatForm (наприклад, theme.prechatForm.continueButtonColor).

topMessageBackgroundColor Колір фону для верхнього повідомлення
topMessageFontColor Колір шрифту для верхнього повідомлення
continueTextColor Колір тексту кнопки "Продовжити".
continueButtonColor Колір кнопки "Продовжити".
continueButtonText Текст кнопки "Продовжити".
textFieldBackgroundColor Колір фону текстового поля
textFieldBorderColor Колір рамки текстового поля
textFieldSelectedBorderColor Колір рамки вибраного текстового поля
textFieldPlaceholderColor Колір плейсхолдера текстового поля
textFieldFontColor Колір тексту текстового поля
backgroundColor Колір фону для екрану

Чати

Налаштуйте екран чатів за допомогою наступних властивостей. Доступ до них можна отримати через властивість chats (наприклад, theme.chats.backgroundColor).

titleColor Колір лейблу імені
backgroundColor Основний колір фону
unreadMessagesIndicatorColor Колір фону непрочитаних повідомлень
dateColor Колір тексту дати
messageColor Колір останнього повідомлення
createButtonColor Створення кольору відтінку кнопки
createButtonBackgroundColor Створення фонового кольору кнопки

Тема чату

Налаштуйте свій чат за допомогою наступних властивостей, щоб змінити його фон, кольори бульбашок, посилання, цитати, фрагменти коду та багато іншого. Доступ до них можна отримати за допомогою властивості chatArea (наприклад, theme.chatArea.backgroundColor).

1. Повідомлення очікування

waitingMessageBackgroundColor Колір фону повідомлення очікування
waitingMessageFontColor Колір шрифту повідомлення очікування
waitingMessageActivityIndicatorColor  Колір індикатора активності повідомлення очікування
waitingMessageIsVisible Булеве значення, щоб показати або приховати повідомлення «Пошук вільного агента».

2. Дати і фон

messageTimeColor Колір часу повідомлення
chatDateColor Колір дати повідомлення
chatBackgroundColor Фон для чату

3. Offline

offlineMessageIconColor Колір значка
offlineMessageBackgroundColor Загальний колір фону
offlineMessageTitleColor Колір тексту

4. Оцінка чату

ratingBackgroundColor Загальний колір фону
ratingTitleColor Колір тексту заголовка
ratingRatingsDefaultColor Колір оцінки чату за замовчуванням
ratingPoorColor Колір тексту за оцінки "Погано"
ratingAvarageColor Колір тексту за оцінки "Посередньо"
ratingGreatColor Колір тексту за оцінки "Чудово"

Повідомлення операторів

messageIncomingBubbleColor Колір фону бульбашки
messageIncomingFontColor Колір шрифту повідомлень
messageIncomingAgentNameFontColor Колір шрифту для імені агента
messageIncomingLinksColor Колір посилань

1. Вкладення файлів

messageIncomingFileTypeBackgroundColor Колір фону для блоку типу файлу
messageIncomingFileTypeFontColor Колір заголовка для блоку типу файлу

2. Цитування

messageIncomingQuoteLineColor Колір рядка цитати

3. Зразки коду

messageIncomingCodeBorderColor Колір рамки блоку коду
messageIncomingCodeFontColor Колір шрифту коду
messageIncomingCodeBackgroundColor Колір фону коду

Повідомлення користувачів

Ви можете змінити стиль повідомлень клієнта так само, як ви робили це з повідомленнями оператора. Ось властивості, які ви можете використовувати для цього:

messageOutgoingBubbleColor Колір фону
messageOutgoingFontColor Колір шрифту повідомлень
messageOutgoingLinksColor Колір посилань
messageOutgoingFileTypeBackgroundColor Колір фону для блоку типу файлу
messageOutgoingFileTypeFontColor Колір заголовка для блоку типу файлу
messageOutgoingQuoteLineColor Колір рядка цитати
messageOutgoingCodeBorderColor Колір рамки блоку коду
messageOutgoingCodeFontColor Колір шрифту коду
messageOutgoingCodeBackgroundColor Колір фону коду

Панель навігації

Ось як ви можете змінити вигляд панелі навігації – її колір тексту, фону, колір перегляду інформації про агента та навіть тінь розміром 1 піксель під панеллю!

Доступ до них можна отримати через властивість navigationBar (наприклад, theme.navigationBar.backgroundColor).

textColor Колір для тексту
backgroundColor Колір фону
agentsMoreBackgroundColor Колір фону для перегляду агента з текстом (+число).
bottomLineColor Колір тіні від лінії розміром 1px під панеллю навігації
isBottomLineVisible Булеве значення для показу або приховання тіні під панеллю навігації
chatsNewIndicatorColor Колір фону кола індикатора

Область "Надіслати повідомлення"

Ви можете налаштувати вигляд області "Надіслати повідомлення": змінити іконки, кольори або навіть замінити іконку кнопки "Надіслати" на звичайний текст. Доступ до них можна отримати через властивість sendMessageArea (наприклад, theme.sendMessageArea.backgroundColor).

backgroundColor Колір фону
attachmentIconImage UIImage for attachment button
sendButtonIconImage UIImage for send button
textFieldBackgroundColor Фон для текстового поля
textFieldBorderColor Колір рамки текстового поля
textFieldFontColor Колір тексту текстового поля
textFieldPlaceholderColor Колір плейсхолдера текстового поля
sendButtonText Текст для кнопки надсилання (якщо встановлено – він замінить зображення)
sendButtonColor Якщо налаштовано sendMessageSendButtonText – він керує кольором тексту, якщо ні – обведе фон під іконкою

Загальні зміни

Нарешті, ви можете змінити фон чату, типи клавіатури та іконку бренду відповідно до темної або світлої теми.

chatArea.brandingType

HCSThemeBrandingType : HCSThemeBrandingLight / HCSThemeBrandingDark

chatArea.keyboardAppearance

sendMessageArea.keyboardAppearance

UIKeyboardAppearance
mainColor

Це одна властивість, яка використовуватиметься, якщо не встановлені наступні властивості:

 messageIncomingLinksColor

 messageIncomingFileTypeBackgroundColor

 messageOutgoingBubbleColor

 sendMessageSendButtonColor

 prechatFormContinueButtonColor

 navigationBarBackgroundColor

 prechatFormTopMessageBackgroundColor

Chat modal presentation style

Наш чат працює як модальний view controller. Якщо ви хочете змінити його модальну презентацію, ви можете зробити це у своєму файлі HCSConfiguration. Просто змініть властивість chatPresentationStyle на будь-який UIModalPresentationStyle на ваш смак!

Чи була наша стаття корисною?