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


Did this page help you?