Skip to main content
Version: 4.38.0

Appearance and Behavior Customization

The chat design and behavior are set by the THRAttributes fields.

info

Starting with 3.8.4 , a part of the values of THRAttributes are located in ThreadsLocalizable.

Display Settings​

History​

  • historyLoadingCount - Number of messages that are displayed from the history. Default: 50.
  • canShowSpecialistInfo - Parameter that controls whether to show the agent info screen (it opens when tapping the agent's avatar).

Loading Spinner + Screen​

  • launchActivityViewColor - (Spinner) Color of the animation that shows the loading process
  • launchViewInnerBoxBackgroundColor - (Spinner) Color of the rectangle in the middle of the screen
  • launchViewInnerBoxCornerRadius - (Spinner) Radius of rounding the corners of the rectangle in the middle of the screen
  • launchViewInnerBoxSize - (Spinner) Size of the rectangle in the middle of the screen
  • launchViewTextColor - (Spinner) Color of the text below the animation
  • launchViewTextFont - (Spinner) Font of the text below the animation
  • launchViewBackgroundColor - (Spinner) Loading screen color
  • loadingChatErrorImage - (Loading Screen) (UIImage) Picture on screen
  • loadingChatTitleFont - (Loading Screen) Font of the text
  • loadingChatTitleColor - (Loading Screen) Color of the text
  • loadingChatSubtitleFont - (Loading Screen) Font of the subtitle
  • loadingChatSubtitleColor - (Loading Screen) Color of the subtitle
  • loadingChatRepeatButtonTitleFont - (Loading Screen) Font of the button
  • loadingChatRepeatButtonTitleColor - (Loading Screen) Color of the button's title
  • loadingChatRepeatButtonBackgroundColor - (Loading Screen) Color of the button's background

Appearance of navigationBar​

  • statusBarStyle - Style of the status bar. It is only applied if the chat is integrated for the whole screen default: UIStatusBarStyleLightContent
  • navigationBarVisible - Attribute that indicates whether the chat header is displayed (by default, it is hidden)
  • attributes.showCloseButton - Attribute that indicates when the chat close button is hidden
  • closeButtonColor - (UIColor) Color of the chat close button (template rendering)
  • closeButtonImage - (UIImage) Icon of the chat close button (template rendering)
  • navigationBarTitleFont - Font of the main text in the chat header
  • navigationBarTitleColor - Color of the main text in the chat header
  • navigationBarBackButtonColor - Color of the back button in the chat header
  • navigationBarSubtitleFont - Sub-heading font of the chat header
  • navigationBarSubtitleColor - Sub-heading color of the chat header
  • chatStateNotConnectedTitle (deprecated starting with 3.8.4) - Chat header when there's no connection; by default, it is "Contact center". Starting from 3.8.4, it has been moved to ThreadsLocalizable. The new key is state_not_connected.
  • chatStateReadyTitle (deprecated starting with 3.8.4) - Header of the chat that is ready for work; by default, it is "Contact center". Starting from 3.8.4, it has been moved to ThreadsLocalizable. The new key us state_ready.
  • navigationBarSubtitleShowOrgUnit - Indicates whether to display the agent's department. It is disabled by default.
  • navigationBarCustomizeTitle - Indicates whether to display a dynamic heading in the chat header. It is enabled by default.
  • navigationBarTitle - Static heading in the chat header
  • navigationBarLarge - Enhanced heading in the chat header, alignment to the left, the chat close button is disabled.
  • navigationBarShadow - Navigation bar shadow (disabled by default)
  • navigationBarShadowSettings - (THRSettingsShadow) A set of settings for the navigation bar grouped into a structure
    let shadowSettings = THRSettingsShadow(opacity: 1.0,
                                           radius: 3.0,
                                           offset: CGSize(width: 3.0, height: 3.0),
                                           color: .black)
        
    Threads.threads().attributes.navigationBarShadowSettings = shadowSettings

Welcome Screen​

info

It is displayed while there are no messages in the chat.

  • helloTitle (deprecated starting with 3.8.4) - Heading, short text in a large font. Starting from 3.8.4, it has been moved to ThreadsLocalizable. The new key is placeholder_header.
  • helloDescription (deprecated starting with 3.8.4) - Heading, longer text in a large font. Starting from 3.8.4, it has been moved to  ThreadsLocalizable. The new key is placeholder_content.
  • backgroundColor - Background color of the chat
  • placeholderImage - Image on the empty screen
  • placeholderTitleColor - Main text color on the empty screen
  • placeholderSubtitleColor - Description color on the empty screen
  • placeholderTitleFont - Font of the main color on the empty screen
  • placeholderSubtitleFont - Font of the description on the empty screen

Appearance of Message Input Field​

  • showAttachButton - Indicates whether to display the send attachment button. Default: true.
  • attachButtonColor - Main color of the send attachment button
  • attachButtonHighlightColor - Color of the send attachment button when it's tapped
  • attachButtonImage -Icon of the send attachment button
  • sendButtonColor - Main color of the send button
  • sendButtonHighlightColor - Color of the send button when tapped
  • sendButtonDisabledColor - Color of the inactive send button
  • sendButtonImage - Icon of the send button (if specified, it has priority over the configuration of the button that says "Send")
  • sendButtonFont - Font of the send button (for buttons with no icons)
  • myMessageFont - Font of the types message
  • toolbarInputTextColor - Message color text
  • toolbarInputCursorColor - Cursor color in the message input field
  • toolbarBackgroundColor - Fill color of the toolbar
  • toolbarTintColor - Color for highlighting elements in the toolbar
  • toolbarSeparatorLineColor - Color for separator line of the toolbar
  • toolbarQuotedMessageAuthorFont - Font for the author's name in a quoted message
  • toolbarQuotedMessageFont - Font for the quoted message text
  • toolbarQuotedMessageAuthorColor - Color for the author's name in a quoted message
  • toolbarQuotedMessageColor - Color of the text in a quoted message
  • toolbarInputMinimumHeight - Minimal height of the field
  • toolbarInputMaximumHeight - Maximal height of the field
  • toolbarInputCornerRadius - Radius of rounding the corners of the field
  • toolbarInputHasBorder (true/false) - Attribute that indicates whether the field has borders
  • toolbarInputBackgroundColor - Fill color of the field

Appearance of Loading Indicator When Waiting for Agent​

  • waitingSpecialistSpinnerColor - Loading indicator color
  • waitingSpecialistBgColor - Loading indicator background color
  • waitingSpecialistBorderColor - Loading indicator border color
  • waitingSpecialistBorderWidth - Loading indicator border width
  • showWaitingForSpecialistProgress - Attribute that indicates whether to display the loading indicator while searching for an agent

Appearance of ScrollToBottom​

  • scrollToBottomImage - icon for button ScrollToBottom
  • scrollToBottomBadgeColor - background color for unreaded messages count badge above ScrollToBottom
  • scrollToBottomBadgeTextColor - text color for unreaded messages count badge above ScrollToBottom

General Message Settings​

  • bubbleMessageFont - Font in message texts
  • bubbleTimeFont - Font for the time when the message was sent
  • failedMessageFont - Font for the warning "The message has not been sent"
  • messageHeaderFont - Font for the message date
  • quoteAuthorFont - Font for the name of the author of a quoted message
  • quoteMessageFont - Font for the text of a quoted message
  • quoteTimeFont - Font for the time of a quoted message
  • quoteFilesizeFont - Font for the size of a quoted message
  • messageBubbleFilledMaskImage - Image of the message mask (a PNG file, a filled bubble with a transparent background). If default setting changes, you should correct messageBubbleStrokedMaskImage by new shape.
  • messageBubbleStrokedMaskImage - Image of the message mask (a PNG file, a border of a bubble with a transparent background)
  • messageContainerLeftOffset - Shift to right for compensation bubble's handle size
  • messageContainerRightOffset - Shift to left for compensation bubble's handle size
  • emptyImageColor - Color of an empty (not loaded) image
  • commonMessageAvatarSize - Size of the avatar of a non-system message in pt.
  • timeAndStatusBackgroundColor - Color of the background of the status and time on messages with a picture

System Messages​

  • systemMessageAvatarSize - Size of the avatar of a system message
  • specialisConnectTitleFont - Font of the text with the name of an assigned agent
  • specialisConnectSubtitleFont - Font of additional text below the agent's name ("has joined the chat")
  • specialisConnectTitleColor - Text color of the name of the assigned agent
  • specialisConnectSubtitleColor - Additional text color below the agent's name ("has joined the chat")
  • typingText - Text for the typing indicator (if it is not set, a standard for a chat animated view will be displayed)
  • scheduleIcon - Icon of a system message "The chat is unavailable"
  • scheduleAlertColor - Color of a system message "The chat is unavailable"
  • scheduleAlertFont - Text color of a system message "The chat is unavailable"
  • scheduleIconBackgroundColor - Color of the icon for the chat's non-working hours

Incoming Messages​

  • incomingBubbleStroked - (BOOL) Indicates whether the background of an incoming message needs to be contoured
  • incomingBubbleColor - Background/contour color of an incoming message
  • incomingBubbleTextColor - Incoming message text color
  • incomingTimeColor - Color of the time when the incoming message was sent
  • showIncomingAvatar - Indicates whether to show the agent's avatar in incoming messages
  • incomingQuoteSeparatorColor - Color of the vertical line in the incoming message with a quote
  • incomingQuoteAuthorColor - Color of the author's name in the incoming message with a quote
  • incomingQuoteMessageColor - Color of the text in the incoming message with a quote
  • incomingQuoteTimeColor - Color of the sending time in the incoming message with a quote
  • incomingQuoteFilesizeColor - Color of the file size in the incoming message with a quote
  • incomingFileIconTintColor - Color of the file icon in the incoming message
  • incomingFileIconBgColor - Background of the file download indicator in the incoming message
  • incomingMediaTimeColor - Color of the sending time in the incoming message
  • incomingBubbleLinkColor - Link color

Outgoing Messages​

  • failedBubbleStroked - (BOOL) Indicates whether the background of a not sent message needs to be contoured
  • failedBubbleColor - Background/contour color of a not sent message
  • outgoingBubbleStroked - (BOOL) Indicates whether the background of an incoming message needs to be contoured
  • outgoingBubbleColor - Background/contour color of a sent message
  • outgoingBubbleTextColor - Text color of a sent message
  • outgoingTimeColor - Color of the time when the outgoing message was sent
  • outgoingPendingStatusColor, outgoingDeliveredStatusColor, outgoingReadStatusColor - Colors of message sending status icons
  • avatarPlaceholderImage - Stub for non-existent avatars
  • outgoingQuoteSeparatorColor - Color of the separator in an outgoing message with a quote
  • outgoingQuoteAuthorColor - Color of the author's name in an outgoing message with a quote
  • outgoingQuoteMessageColor - Text of the quote in an outgoing message
  • outgoingQuoteTimeColor - Color of the time when the quoted outgoing message was sent
  • outgoingQuoteFilesizeColor - Color of the file size in a quoted outgoing message
  • outgoingMediaTimeColor - Color of the time when the outgoing message was sent with the picture
  • outgoingMediaPendingStatusColor, outgoingMediaDeliveredStatusColor, outgoingMediaReadStatusColor - Colors of status icons for sending messages with a picture
  • outgoingBubbleLinkColor - Link colors
    • outgoingPendingStatusImage - (UIImage) Image for the waiting status
    • outgoingDeliveredStatusImage - (UIImage) Image for the delivered status
    • outgoingReadStatusImage - (UIImage) Image for the read status

Voice Messages​

  • voiceRecordingAllowed - Whether to display the voice message recording button
  • voiceMessageRecordButtonImage - Icon of the voice message recording button
  • voiceMessageSendButtonImage - Icon of the send voice message button
  • voiceMessageRecordSendButtonColor - Color of the icon of the voice message recording/send button
  • voiceMessagePlayImage - Play button icon
  • voiceMessagePauseImage - Pause button icon
  • incomingVoiceMessagePlayPauseColor - Color of the incoming message play/pause button
  • outgoingVoiceMessagePlayPauseColor - Color of the outgoing message play/pause button
  • previewVoiceMessagePlayPauseColor - Color of the play/pause button of a preview message
  • incomingVoiceMessageProgressColor - Color of the part of a listened incoming message
  • outgoingVoiceMessageProgressColor - Color of the part of a listened outgoing message
  • previewVoiceMessageProgressColor - Color of the part of a listened preview of the message
  • previewVoiceMessageBackgroundColor - Background color of preview

Images and Indents from Message Edges​

  • imageEdgesActivated - (Bool) Enables/disables indentation of images inside the bubble message
  • imageEdges - (UIEdgeInsets) Structure that defines the indents (top, left, bottom, right)
  • imageCornerRadius - (CGFloat) Radius at the corners of the image (when the imageEdgesActivated option is enabled)
  • searchEnabled - Indicates whether to show the message search button (true by default)
  • searchScopeBarTintColor - Color of the highlight of the message search screen scopeBar (switching search modes - messages, images, files)
  • searchBarTextColor - Search bar text color
  • searchBarTintColor - Search bar tint color
  • searchScopeBarFont - Text font in scopeBar
  • searchBarTextFont - Text font in the search bar
  • clearSearchIcon - Icon for the "Clear" button in the search bar
  • findedMessageHeaderTextColor - Text color in the header of the table with the search results
  • findedMessageHeaderBackgroundColor - Background of the header of the table with the search results
  • findedMessageHeaderTextFont - Text font in the header of the table with the search results
  • findMoreMessageTextColor - Text color in the "Find more" button in the search bar
  • findMoreMessageTextFont - Text font in the "Find more" button in the search bar
  • searchMessageAuthorTextColor - Color of the found message author's name
  • searchMessageTextColor - Text color of the found message
  • searchMessageDateTextColor - Color of the date when the found message was sent
  • searchMessageFileTextColor - Color of the file name in the found message
  • searchMessageMatchTextColor - Color of the "match" of the search query in the text of the found message (if the search query is “hel”, in the message with the text “Hello”, the substring ”hel” will be highlighted in this color)
  • searchMessageAuthorTextFont - Font of the name of the author of the found message
  • searchMessageTextFont - Font of the text of the found message
  • searchMessageDateTextFont - Font of the date when the found message was sent
  • searchMessageFileTextFont - Font of the file name in the found message
  • searchMessageMatchTextFont - Font of the "match" of the search query in the text of the found message
  • searchBarIconTintColor - Color of the search icon in the chat header
  • linkPreviewEnabled - (on | off) Preview of links in messages (false by default)

Sending Photos to Chat​

  • photoPickerBackgroundColor - PickerSheet background color
  • photoPickerSheetTextColor - Font color in pickerSheet with a list of photos
  • photoPickerMaxImagesCount - Max number of photos that a client can send in one message (min 1, max 20, default 10)

Viewing Files and Images​

  • fileViewerNavBarBackgroundColor - Navbar color on the file/image viewing screen
  • fileViewerNavBarTintColor - Navbar control colors
  • fileViewerBackgroundColor - Background color
  • fileViewerTitleColor - Heading color
  • fileViewerTitleFont - Heading font

Surveys​

  • surveyTextColor - Main text color of the survey
  • surveyTextFont - Main text font of the survey
  • surveyCompletionColor - Color of the survey completion text
  • surveyCompletionFont - Font of the survey completion text
  • surveyCompletionDelay - Delay in completing the survey in milliseconds during which clients can change their score. Default: 3000.
  • iconStarRatingEmty - Empty rating icon - pass it as a template imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
  • iconStarRatingFull - Filled rating icon - pass it as a template imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
  • starRatingColorEnabled - Color of the filled survey rating icon
  • starRatingColorDisabled - Color of the empty survey rating icon
  • starRatingColorCompleted - Color of the completed survey rating icon
  • iconLikeEmpty - Icon of a not selected positive response of a binary survey - pass it as a template imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
  • iconLikeFull - Icon of a selected positive response of a binary survey - pass it as a template imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
  • iconDislikeEmpty - Icon of a not selected negative response of a binary survey - pass it as a template imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
  • iconDislikeFull - Icon of a selected negative response of a binary survey - pass it as a template imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate
  • likeRatingColorEnabled - Color of the selected binary survey response icon
  • likeRatingColorDisabled - Color of a not selected binary survey response icon
  • likeRatingColorCompleted - Color of the icon of a selected response of a completed binary survey
  • likeLabelOnStarColor - Color of the text on a completed survey icon
  • likeLabelUnderStarColor - Color of the text below the completed survey icon

Early Completion Survey​

  • closeThreadSurveyText (deprecated starting with с 3.8.4) - Survey text. Starting from 3.8.4, it has been moved to ThreadsLocalizable. The new key is threads_request_close_thread_text.
  • closeThreadSurveyAnswerClose (deprecated starting with 3.8.4) - Text of the response that closes the request. Starting from 3.8.4, it has been moved to ThreadsLocalizable. The new key is no.
  • closeThreadSurveyAnswerContinue (deprecated starting with 3.8.4) - Text of the response that continues the request. Starting from 3.8.4, it has been moved to ThreadsLocalizable. The new key is yes.

Quick Replies​

  • quickRepliesBlockInput - Indicates whether to block the message input field if there are quick replies.
  • quickReplyPresentationMode - Display mode of quick reply buttons. .toolbar - in the pop-up panel, .embed - in the message stream
  • quickReplyAlignment - Horizontal alignment of quick responses. Center alignment : .center. Left alignment: .left. Right alignment: .right. Default value: .right
  • quickReplyFont - Quick reply font text
  • quickReplyBorderCornerRadius - Radius of rounding the corners
  • quickReplyBorderColor - Border color
  • quickReplyBackgroundColor - Background color
  • quickReplyTextColor - Text color
  • quickReplyBackgroundColorHighlighted - Background color when tapped
  • quickReplyTextColorHighLighted - Text color when tapped

Local Notifications​

  • toastViewTextCopy - Notification text (String)
  • toastViewTextColor - Notification text color (UIColor)
  • toastViewBackgroundColor - Notification background color (UIColor)
  • toastViewSize - Notification size (CGSize)

Additional Parameters​

  • canShowSpecialistInfo - Indicates whether the screen with the agent's info can be opened
  • navigationBarVisible - Header visibility (navbar)
  • customHTTPHeadersForDataStore -Set of user HTTP headers for datastore
  • historyLoadingCount - Number of messages loaded when requesting the chat history
  • refreshColor - Color of the message loading indicator
  • scrollToLatest - Scroll to latest message in chat after getting the history (default is false)

Advanced Settings of Controls​

It is possible to fully override appearance settings for some controls:

Send Button​

  • [Threads threads].controls.sendButton - Message send button

    let sendButton = UIButton(frame: .zero)
      sendButton.backgroundColor = UIColor.lightGray
      sendButton.setTitle("Послать", for: .normal)
      sendButton.tintColor = (UIColor.blue)
      sendButton.setTitleColor(UIColor.red, for: .normal)
      sendButton.setTitleColor(UIColor.gray, for: .focused)
      sendButton.setTitleColor(UIColor.green, for: .disabled)
      sendButton.layer.borderWidth = 1
      sendButton.layer.cornerRadius = 4
      
      threads.controls.sendButton = sendButton

Attachment Button​

  • [Threads threads].controls.attachButton - Message attachment button

    let frame = CGRect(x: 0, y: 0, width: 60, height: 44)
    let attachButton = UIButton(frame: frame)
        attachButton.setImage(UIImage(named: "tabBarItemUsers"), for: .normal)
        attachButton.tintColor = UIColor.brown
        attachButton.backgroundColor = UIColor.lightGray
        attachButton.layer.borderWidth = 1
        attachButton.layer.cornerRadius = 4

    threads.controls.attachButton = attachButton
Last updated on