Щоб ваш віджет чату виглядав саме так, як ви хочете, скористайтеся об’єктом 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 на ваш смак!
