Customization (Brand Messenger in iOS) (APAC)
Customize your user experience in the Brand Messenger iOS SDK
Our SDK includes a pre-built UI that you can use to integrate with your application. This article describes all the things in the pre-build UI that you can customize.
Use the KBMConfiguration object to customize the appearance of our UI. You can overwrite the defaultConfiguration in BrandMessengerManager and add custom configs.
let config = KBMConfiguration()
/// Change properties here...
/// Read below to know about different properties used in `KBMConfiguration`
BrandMessengerManager.setDefaultConfiguration(config)
Change background color of Chat Detail screen
Use the color hex code to change background color of the Chat Detail screen.
DEFAULT: Color hex :: 0xf9f9f9
config.backgroundColor = UIColor.red
Show bottom line of navigation bar
Toggle the navigation bar on and off using the hideNavigationBarBottomLine config.
If true, the bottom line of navigation bar is hidden.
If false, the bottom line of navigation bar is visible.
DEFAULT: true
The setting controls all the ViewControllers where the navigation bar is visible.
config.hideNavigationBarBottomLine = true
Navigation bar color
You can change the appearance/colors of the navigation bar. To do so, you must create UINavigationBar.appearance
let navigationBarProxy = UINavigationBar.appearance(whenContainedInInstancesOf: [KBMBaseNavigationViewController.self])
navigationBarProxy.isTranslucent = false
Change navigation bar background color
To change the navigation bar's background color, edit the barTintColor value, shown below.
This value is used in all ViewControllers where the navigation bar is visible.
navigationBarProxy.barTintColor
= UIColor(red: 0.93, green: 0.94, blue: 0.95, alpha: 1.0)
Change navigation bar tint color
To change the navigation bar's tint color, edit the tintColor value, shown below.
DEFAULT: UIColor.navigationTextOceanBlue
This value is used in all the ViewControllers where the navigation bar is visible.
navigationBarProxy.tintColor = UIColor.red
Change navigation bar title color
To change the navigation bar's title color, edit the titleTextAttributes value, shown below.
DEFAULT: UIColor.black
This value is used in all the ViewControllers where the navigation bar is visible.
navigationBarProxy.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
Change status bar style
To change status bar style, edit the UIStatusBarStyle value, shown below.
DEFAULT: UIStatusBarStyle.lightContent
This value is used in all the ViewControllers where the navigation bar is visible.
config.statusBarStyle = UIStatusBarStyle.default
Back button configuration
The back button icon can be customized
var config = KBMConfiguration()
/// Set conversationViewControllerBackIcon to desired UIImage
config.conversationViewControllerBackIcon = UIImage(named: "close-icon-name-here", in: .main, compatibleWith: nil)
BrandMessengerManager.setDefaultConfiguration(config)
Customize Chat Bubble
You can change the font, text color, and background color of messages. Commonly edited options are listed below. Add these style-related changes to your AppDelegate's didFinishLaunchingWithOptions method or anywhere else before the chat is launched.
Chat Bubble Color
The background color of the sent and received chat bubble.
KBMMessageStyle.sentBubble.color = UIColor.lightGray // For sent messages
KBMMessageStyle.receivedBubble.color = UIColor.lightGray // For received messages
Chat Text Font and Color
The chat text font and color in the Conversation screen.
KBMMessageStyle.message = Style(font: UIFont.systemFont(ofSize: 14), text: UIColor.black)
Message Status Icon and Color
The message status (read receipt) style. You can change icon and the color of the each status (pending, sent, delivered, read).
// To hide message status
KBMMessageStyle.messageStatus.set(icon: .none, for: .sent)
// To set an image(template) with tint color
let sentStatusIcon = UIImage(named: "<image_name>", in: Bundle.brandMessengerUI, compatibleWith: nil) ?? UIImage()
KBMMessageStyle.messageStatus.set(icon: .templateImageWithTint(image: sentStatusIcon, tintColor: .red), for: .sent)
// Just an image, with default colors
let deliveredStatusIcon = UIImage(named: "<image_name>", in: Bundle.brandMessengerUI, compatibleWith: nil) ?? UIImage()
KBMMessageStyle.messageStatus.set(icon: .normalImage(image: deliveredStatusIcon), for: .delivered)
Agent avatar
You can customize the default agent avatar that appears for agent-profiles which do not have a thumbnail url.
var config = KBMConfiguration()
...
config.defaultAvatar = UIImage(named: "new-avatar")
BrandMessengerManager.setDefaultConfiguration(config)
// KBMConfiguration not available in Objective C
Customize Quick-Reply and AppLink buttons
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.buttonColor.border = UIColor.red.cgColor
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.buttonColor.text = UIColor.systemPink
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.buttonColor.background = .white
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.borderWidth = 1
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.cornerRadius = 2
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.buttonColor.tint = .orange
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.font = .systemFont(ofSize: 16)
Customize Card rich messages
KBMRichMessageStyles.KBMCardStyle.shared.descriptionLabel.textColor = .red
KBMRichMessageStyles.KBMCardStyle.shared.ratingLabel.textColor = .red
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.textColor = .white
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.backgroundColor = .green
KBMRichMessageStyles.KBMCardStyle.shared.subtitleLabel.textColor = .red
KBMRichMessageStyles.KBMCardStyle.shared.titleLabel.textColor = .red
KBMRichMessageStyles.KBMCardStyle.shared.overlayLabel.textColor = .black
KBMRichMessageStyles.KBMCardStyle.shared.overlayLabel.backgroundColor = .systemPink
KBMRichMessageStyles.KBMCardStyle.shared.ratingLabel.textColor = .red
Customize List template rich messages
KBMRichMessageStyles.KBMListTemplateStyle.shared.actionButton.backgroundColor = .blue
KBMRichMessageStyles.KBMListTemplateStyle.shared.actionButton.textColor = .white
KBMRichMessageStyles.KBMListTemplateStyle.shared.headerText.textColor = .red
KBMRichMessageStyles.KBMListTemplateStyle.shared.headerText.backgroundColor = .yellow
KBMRichMessageStyles.KBMListTemplateStyle.shared.listTemplateElementViewStyle.backgroundColor = .brown
KBMRichMessageStyles.KBMListTemplateStyle.shared.listTemplateElementViewStyle.titleTextColor = .white
KBMRichMessageStyles.KBMListTemplateStyle.shared.listTemplateElementViewStyle.subtitleTextColor = .white
Customize the Chat Bar
You can customize several of the chat bar options.
Change Chat Bar bottomView color
To change Chat Bar's bottom view color, edit the chatBarAttachmentViewBackgroundColor value, shown below.
This view contains all the attachment and other options.
DEFAULT: UIColor.background(.grayEF)
config.chatBarAttachmentViewBackgroundColor = UIColor.lightGray
Hide Attachment Buttons
You can choose to show or hide the 6 attachment-related buttons (contact, camera, document, gallery, video, location).
By default, camera, gallery, and document are visible. To hide all the attachment options, add the setting below.
config.chatBar.optionsToShow = .none
// If you want to show just two attachment options:
config.chatBar.optionsToShow = .some(options: [.camera, .location])
// If you want to show all attachment options then use this:
config.chatBar.optionsToShow = .all
Change Attachment Button Icons
To change the icons of any attachment options, edit the values below.
config.chatBar.set(
attachmentIcon: UIImage(named: "galleryIcon"),
for: .gallery)
config.chatBar.set(
attachmentIcon: UIImage(named: "custom-Contact"),
for: .contact)
Hide the mic button from Chat Bar
You can choose to show or hide the microphone button in the Chat Bar.
If true, then mic button is hidden.
If false, then mic button is visible.
DEFAULT: false
config.hideAudioOptionInChatBar = true
Hide the line between Send button and textView in Chat Bar
To change visibility of line between Send button and textView in Chat Bar, edit the hideLineImageFromChatBar value.
If true, the line between Send button and text view is hidden.
If false, the line between Send button and text view is visible.
DEFAULT: false
config.hideLineImageFromChatBar = true
Customize the Send button style
Some elements of the 'Send' text button can be customized via the KBMConfiguration class
var config = KBMConfiguration()
config.chatBar.messageInputViewStyle.sendButton = ButtonStyle(font: .systemFont(ofSize: 16),
titleColor: .green,
titleColorDisabled: .lightGray,
titleColorHighlighted: .blue,
background: .brown,
title: "BUTTON")
BrandMessengerManager.setDefaultConfiguration(config)
Customize message input area
The text-input area background and text fonts can be customized via KBMConfiguration
var config = KBMConfiguration()
config.chatBar.messageInputViewStyle.backgroundColor = .white
config.chatBar.messageInputViewStyle.textView = Style(font: .systemFont(ofSize: 15), text: .red)
config.chatBar.messageInputViewStyle.placeholder = Style(font: .systemFont(ofSize: 15), text: .red)
BrandMessengerManager.setDefaultConfiguration(config)
Use Localization
You can localize the strings used in BrandMessenger SDK by creating localizable strings file with all the translated keys. For more information, refer to the BrandMessenger Localization section.
If you are creating localizable file with a custom name, you must pass the file name here.
DEFAULT: Localizable
config.localizedStringFileName = "YOUR_FILE_NAME"
BrandMessenger Localization
System Messages
In your custom Localizable.strings file, you can update the system message at the top of conversation screen, for text such as privacy policy and terms and conditions.
StartOfConversation = "This is the start of the conversation. Click here";
LinkText = "Click here";
LinkValue = "https://www.google.com";
The LinkText substring will be replaced with an interactive element that will open LinkValue url in an external browser.
Navigation Bar Title
ProfileName = "Conversation screen title";
Change navigationBar right item in Chat Detail screen.
To customize the right-most navigation bar item in Chat Detail screen, edit the rightNavBarImageForConversationView value, shown below.
You can choose to show or hide and image or use the system icon.
DEFAULT: UIBarButtonItem.SystemItem.refresh
/// If you want to show an image
config.rightNavBarImageForConversationView = UIImage(named: "YOUR_IMAGE_NAME", in: Bundle.main, compatibleWith: nil)
/// If you want to use the system icon.
config.rightNavBarSystemIconForConversationView = UIBarButtonItem.SystemItem.add
/// If you want to hide the bar item.
config.hideRightNavBarButtonForConversationView = true
Change the color or the Date and Information cell.
To customize the colors for the Date and Information cell, edit the values listed below.
Date cell and Information cell Background color
Changes the background color for Date and Information cell.
DEFAULT: UIColor.gray
config.conversationViewCustomCellBackgroundColor = UIColor.red
Date cell and Information cell text color
Change the text color for the Date and Information cell.
DEFAULT: UIColor.white
config.conversationViewCustomCellTextColor = UIColor.red
Add metadata while sending messages
To add additional information (specific metadata) whenever a message is sent, edit the messageMetadata value.
This information is passed in message's metadata field.
var messageMetadata = [AnyHashable : Any]()
messageMetadata["customKey"] = "customValue"
config.messageMetadata = messageMetadata
Add metadata when Suggested Replies is selected
To send additional information as metadata when a Suggested Reply is selected, edit the quickReplyMetadataKey value.
The message's metadata will include this key along with the value that will be present in the json. For more information about this use case, refer to the RichMessage section.
config.quickReplyMetadataKey = "SUGGESTED_REPLY_KEY"
Disable Rich Message action
To enable or disable the click action on all rich messages, edit the disableRichMessageButtonAction value.
If true, the action is disabled.
If false, the action is enabled.
DEFAULT: false
config.disableRichMessageButtonAction = true
Custom Navigation bar buttons
This section describes how to add the custom navigation button in the Conversation View controller navigation bar and how to handle the Click or Tap of button notification callbacks in your app.
Conversation view controller
You can add a custom button in two ways: text or UIImage. The code below shows how to add KBMNavigationItem in both ways and how to handle the notification observer tap
var navigationItemsForConversationViewController = [KBMNavigationItem]()
// Example for button with text
let buttonOne = KBMNavigationItem(identifier: 1234, text: "FAQ")
// Adding an item in the list
navigationItemsForConversationViewController.append(buttonOne)
// Example for button with icon
let buttonTwo = KBMNavigationItem(identifier:23456, icon: UIImage(named: "icon_download", in: Bundle(for: KBMConversationViewController.self), compatibleWith: nil)!)
// Adding an item in the list
navigationItemsForConversationViewController.append(buttonTwo)
// Set the KBMNavigationItem array of objects to config
config.navigationItemsForConversationView = navigationItemsForConversationViewController
// Add an Observer to get the event callback
NotificationCenter.default.addObserver(forName: NSNotification.Name(rawValue: KBMNavigationItem.NSNotificationForConversationViewNavigationTap), object: nil, queue: nil, using: { notification in
guard let notificationUserInfo = notification.userInfo else { return }
let identifier = notificationUserInfo["identifier"] as! Int
print("Navigation button click for identifier in Conversation view controller is : ",identifier)
})
Disable In-App Notifications
To disable all in-app message notifications, edit the isInAppNotificationBannerDisabled value.
Note: Be sure to set this in the AppDelegate and pass the same configuration to all BrandMessenger APIs.
config.isInAppNotificationBannerDisabled = true
Disable Link Preview
To disable link preview in the chat for all the URLs, edit the isLinkPreviewDisabled value:
config.isLinkPreviewDisabled = true
Note: You must also set Allow Arbitrary Loads to YES on your project's Info.plist file:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
If you don't want to use the above option, then you can add specific websites to your allowlist in the Info.plist file:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<false/>
<key>NSExceptionDomains</key>
<dict>
<key>google.com</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
Read more about NSExceptionDomains here
Quick references
Updated 6 days ago