Developer DiscussionDeveloper BlogAtlas

Customization (Brand Messenger in iOS) (APAC)

Customize your user experience in the Brand Messenger iOS SDK

Suggest Edits

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)

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

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)

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

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]

Bottom Line

Toggle the navigation bar on and off using the hideNavigationBarBottomLine config.
If true the navigation bar is hidden.
If false, the bottom line of the navigation bar is visible.

DEFAULT: true

📘

The setting controls all the ViewControllers where the navigation bar is visible.

config.hideNavigationBarBottomLine = true

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)

Change Right Navigation Item

To customize the right-most navigation bar item in the Chat Detail screen, edit the rightNavBarImageForConversationView value, shown below.

You can choose to show or hide an 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

Custom Navigation 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")

// 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 
})

Text

See section on Navigation Bar Title for more info on customizing the text for the navigation bar.

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.

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

Padding

The padding to left/right of the chat bubbles to the screen-edge can be adjusted.

KBMMessageStyle.sentBubble.cellMargin = .init(left: 20, right: 20)
KBMMessageStyle.receivedBubble.cellMargin = .init(left: 20, right: 20)

Text Message Font and Color

The chat text message font, text color, and link color in the Conversation screen for sent and received messages can be customized.

KBMMessageStyle.sentMessage = Style(font: UIFont.systemFont(ofSize: 13), text: .white, linkTextColor: .red)
KBMMessageStyle.receivedMessage = Style (font: UIFont.systemFont(ofSize: 13), text: .black, linkTextColor: .red)

Message Status Icon and Color

The message status (read receipt) style. You can change icon, size 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)

// Update image icon size
KBMMessageStyle.messageStatus.stateViewSize = CGSize(width: 20, height: 20)

Message Timestamp text style

The message timestamp text style can be customized.

KBMMessageStyle.time = Style(font: UIFontMetrics(forTextStyle: .footnote).scaledFont(for: UIFont.font(.italic(size: 12))), text: UIColor.red)

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

Rich Messages

Customize Quick-Reply and AppLink buttons

KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.buttonColor.border = UIColor.red.cgColor
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.curvedButtonTextStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont(name: "HelveticaNeue", size: CGFloat(14)) ?? .systemFont(ofSize: 14)), text: UIColor.systemPink)

/// Spacing between the two horizontal buttons.
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.horizontalSpacing = 10

/// Spacing between the two vertical buttons.
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.verticalSpacing = 10

Add icons to link buttons in Quick-Reply

/// Link button: If true, then it will ignore applying the `curvedButtonTextStyle` text color and will use the actual image color
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.disableImageTintColor = false

/// Link button: Space between image and text.
/// Default Spacing: 10
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.textImageSpace = 10

/// Link button: Size of image.
/// Default size :  width 12 and height 12.
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.imageSize = .init(width: 12, height: 12)

/// Link button: use this to set your own Icon of the link button which is right of the text.
/// Default icon: Added from SDK which has icon name `link`
KBMRichMessageStyles.KBMQuickReplyButtonStyle.shared.linkIcon = UIImage(named: "link", in: Bundle(for: SuggestedReplyView.self), compatibleWith: nil)

Card Rich Messages

/// Use this to set the background of the card view.
KBMRichMessageStyles.KBMCardStyle.shared.backgroundColor = .white

/// Border width of card view.
KBMRichMessageStyles.KBMCardStyle.shared.borderWidth = 0

/// Border color of card view
KBMRichMessageStyles.KBMCardStyle.shared.borderColor = UIColor.lightGray.cgColor

// Title Style

/// Use this to set the padding of the subtitle label.
KBMRichMessageStyles.KBMCardStyle.shared.titleLabel.outerPadding = Padding(left: 10.0, right: 10.0, top: 10.0, bottom: 0.0)

/// Use this to set the style of subtitle.
KBMRichMessageStyles.KBMCardStyle.shared.titleLabel.textStyle = Style(font: UIFontMetrics(forTextStyle: .title3).scaledFont(for: UIFont.font(.medium(size: 18))), text: UIColor(red: 20, green: 19, blue: 19))
        

// Overlay label

/// Use this to set the padding of the overlay label
KBMRichMessageStyles.KBMCardStyle.shared.overlayLabel.padding = Padding(left: 5.0, right: 5.0, top: 5.0, bottom: 5.0)

/// Use this to set the Text Alignment of the overlay label
KBMRichMessageStyles.KBMCardStyle.shared.overlayLabel.textAlignment = .natural

// Subtitle Style

/// Use this to set the padding of the subtitle label.
KBMRichMessageStyles.KBMCardStyle.shared.subtitleLabel.padding = Padding(left: 10.0, right: 10.0, top: 10.0, bottom: 0.0)

/// Use this to set the style of subtitle.
KBMRichMessageStyles.KBMCardStyle.shared.subtitleLabel.textStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont.font(.normal(size: 14))), text: UIColor(red: 86, green: 84, blue: 84))

// Description Label Style

/// Use this to set the padding for description label.
KBMRichMessageStyles.KBMCardStyle.shared.descriptionLabel.padding = Padding(left: 10.0, right: 10.0, top: 10.0, bottom: 0.0)

KBMRichMessageStyles.KBMCardStyle.shared.descriptionLabel.textStyle = Style(font: UIFontMetrics(forTextStyle: .body).scaledFont(for: UIFont.font(.light(size: 14))), text:.black)

// Action button styles

/// Spacing between the buttons.
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.spacing = 10

/// Corner radius of button.
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.cornerRadius = 0

/// Border width of button.
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.borderWidth = 1

/// Use this to set the border color of button.
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.borderColor = UIColor.red.cgColor

/// Outer padding of button views.
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.outerPadding = Padding(left: 10.0, right: 10.0, top: 10.0, bottom: 10.0)

/// Inner padding for action button text.
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.padding = Padding(left: 20.0, right: 20.0, top: 10.0, bottom: 10.0)

/// Use this to style action button text.
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.textStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont.font(.medium(size: 15))), text: .red)

Add icon to link buttons in Card rich messages

/// Link button: Size of image.
/// Default size :  width 12 and height 12.
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.imageSize = CGSize(width: 12, height: 12)

/// Link button: Space between image and text.
/// Default Spacing: 10
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.textImageSpace = 10

/// Link button: If true, then it will ignore applying `textStyle` text color and will use the actual image color
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.disableImageTintColor = false

/// Link button: use this to set your own Icon of link button which is right of text.
/// Default icon: Added from SDK which has icon name `link`
KBMRichMessageStyles.KBMCardStyle.shared.actionButton.linkIcon = UIImage(named: "link", in: Bundle(for: SuggestedReplyView.self), compatibleWith: nil)

Customize List template rich messages

KBMRichMessageStyles.KBMListTemplateStyle.shared.headerText.activeButtonTextStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont.font(.normal(size: 15))), text: .red)
KBMRichMessageStyles.KBMListTemplateStyle.shared.actionButton.deactivatedButtonTextStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont.font(.bold(size: 15))), text: UIColor.gray)

KBMRichMessageStyles.KBMListTemplateStyle.shared.headerText.backgroundColor = .yellow

KBMRichMessageStyles.KBMListTemplateStyle.shared.actionButton.backgroundColor = .blue
KBMRichMessageStyles.KBMListTemplateStyle.shared.actionButton.textStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont.font(.bold(size: 15))), text: .white)

KBMRichMessageStyles.KBMListTemplateStyle.shared.listTemplateElementViewStyle.backgroundColor = .white

KBMRichMessageStyles.KBMListTemplateStyle.shared.listTemplateElementViewStyle.titleTextStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont.font(.normal(size: 14))), text: UIColor(red: 86, green: 84, blue: 84))

KBMRichMessageStyles.KBMListTemplateStyle.shared.listTemplateElementViewStyle.subtitleTextStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont.font(.normal(size: 14))), text: UIColor(red: 121, green: 116, blue: 116))

Chat Bar

You can customize several of the chat bar options.

Chat Bar Bottom View 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

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. 

//To hide all options in attachment
config.chatBar.optionsToShow = .none

// If you want to show just two attachment options:
config.chatBar.optionsToShow = .some([.camera, .location])

// If you want to show all attachment options then use this:
config.chatBar.optionsToShow = .all

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)

Mic Button

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

Line between Send button and textView

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

Send button

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)

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)

Line Above Chatbar

The line above chat-bar can be hidden via KBMConfiguration

var config = KBMConfiguration()

config.chatBar.hideAboveLineView = true

BrandMessengerManager.setDefaultConfiguration(config)

Typing Indicator

The typing-indicator animation displayed when Agent is typing can be customized by supplying your own set of images to loop through via KBMConfiguration.

var config = KBMConfiguration()

var animationImages = [UIImage]()

animationImages.append(image1)
animationImages.append(image2)
animationImages.append(image3)
animationImages.append(image4)

/// Typing view default minimum height.
config.chatBar.typingViewStyle.typingViewMinimumHeight = 40.0

/// Animation duration in TimeInterval seconds.
config.chatBar.typingViewStyle.animationDuration = 1.3

/// If false, then it will show the typing string at the front of the anmiation dots.
config.chatBar.typingViewStyle.hideTypingString = true

/// Array of animation images for animating.
config.chatBar.typingViewStyle.animationImages = animationImages

/// Background color of Typing view.
config.chatBar.typingViewStyle.backgroundColor = .white

BrandMessengerManager.setDefaultConfiguration(config)

Optional string before the animated image can be added by turning off hideTypingString

config.chatBar.typingViewStyle.hideTypingString = false

and adding string to Localizable.string

/// You can change the suffix text
com.kbm.IsTyping = "%@ is typing";

///  You can change the prefix text
com.kbm.TypingStatusDefaultPrefixName = "Agent";

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"

From v1.7.0, all BrandMessenger's customizable localized string names are prefixed with com.kbm..

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. This message scrolls with the page and will be at the top of the conversation

com.kbm.StartOfConversation = "This is the start of the conversation. Click here";
com.kbm.LinkText = "Click here";
com.kbm.LinkValue = "https://www.google.com";

The com.kbm.LinkText substring will be replaced with an interactive element that will open com.kbm.LinkValue url in an external browser.

To customize the color and style of the system message, KBMHeaderViewConfiguration can be written into config.headerViewConfiguration.

var config = KBMConfiguration() 

var headerviewConfig = KBMHeaderViewConfiguration() 
headerviewConfig.textColor = UIColor.green 
headerviewConfig.linkTextColor = UIColor.red 
headerviewConfig.linkUnderlineColor = UIColor.red 
headerviewConfig.headerIcon = UIImage(named: "iconChat") 
headerviewConfig.kIconWidth = 20 
headerviewConfig.kIconHeight = 20 

config.headerViewConfiguration = headerviewConfig 
BrandMessengerManager.setDefaultConfiguration(config)

Pinned System Message

In your code, you can update the pinned system message at the top of conversation screen, for text such as privacy policy and terms and conditions. This message is pinned and does not scroll even when the conversation is scroll, and is always visible to the user.

First, to enable showing of this pinned system message, set hidePinnedSystemMessageHeader in config to false. The styling can be updated by writing to pinnedHeaderConfig.

var config = KBMConfiguration()

var headerConfig = KBMPinnedSystemHeaderConfig()
headerConfig.pinnedSystemMessageIcon = UIImage(named: "iconChat")
config.pinnedHeaderConfig = headerConfig
config.hidePinnedSystemMessageHeader = false

BrandMessengerManager.setDefaultConfiguration(config)

The default KBMPinnedSystemHeaderConfig is as follows:

public struct KBMPinnedSystemHeaderConfig {
    public var textColor =  UIColor.black
    public var headerBackgroundColor = UIColor.white
    public var kLabelInsets = UIEdgeInsets(top: 12, left: 10, bottom: 0, right: 12)
    public var kLabelLineSpacing = 2.0
    public var kLabelParagraphSpacing = 7.0
    public var textStyle = Style(
        font: Font.normal(size: 12.0).font(),
        text: .text(.black00)
    )
    public var pinnedSystemMessageIcon = UIImage(named: "placeholder")
    public var kIconWidth = 10.0
    public var kIconHeight = 10.0
    public var linkTextColor = UIColor.black
    public var linkUnderlineColor = UIColor.black
    public init(){}
}

As with system header, the pinned system header's text and link can be customized in Localzable.strings file.

com.kbm.PinnedSystemMessageText = "Welcome, click the link to go to www.khoros.com";
com.kbm.PinnedLinkText = "www.khoros.com";
com.kbm.PinnedLinkValue = "https://www.khoros.com";

Navigation Bar Title

com.kbm.ProfileName = "Conversation screen title";

Message Timestamp

Each message's timestamp dateformatter can be customized.

com.kbm.MessageTimestampDateFormat = "h:mm a"
com.kbm.MessageTimestampAMSymbol = "am"
com.kbm.MessageTimestampPMSymbol = "pm"

All customizable localizable strings

com.kbm.Back = "Back";
com.kbm.ChatHere = "Type a message";
com.kbm.DeleteSingleConversation = "Are you sure you want to remove the chat with";
com.kbm.LeaveGroupConversation = "Are you sure you want to leave the group";
com.kbm.DeleteGroupConversation = "Are you sure you want to remove the group";
com.kbm.ButtonCancel = "Cancel";
com.kbm.CamNotAvaiable = "Unable to start your camera";
com.kbm.PleaseAllowCamera = "Please change Settings to allow to access your camera";
com.kbm.UnspecifiedLocation = "Unspecified Location";
com.kbm.PhotoAlbumSuccessTitle = "Done";
com.kbm.PhotoAlbumSuccess = "Photo saved";
com.kbm.PhotoAlbumOk = "Ok";
com.kbm.PhotoAlbumFailureTitle = "Error";
com.kbm.PhotoAlbumFail = "Save failed";
com.kbm.DownloadOriginalImageFail = "Fail to download the original image";
com.kbm.IsTypingForRTL = "typing is %@";
com.kbm.ButtonDiscard = "Discard";

// Storyboard
com.kbm.LocationTitle = "Location";
com.kbm.DoneButton = "Done";
com.kbm.AddToGroupTitle = "Add to Group";
com.kbm.InviteButton = "INVITE";
com.kbm.CreateGroupTitle = "Create Group";
com.kbm.EditGroupTitle = "Edit Group";
com.kbm.SaveButtonTitle = "Save";
com.kbm.InviteMessage = "Invite";
com.kbm.DiscardChangeTitle = "Discard Change";
com.kbm.DiscardChangeMessage = "If you go back now, your change will be discarded";
com.kbm.Edit = "Edit";
com.kbm.Camera = "Camera";
com.kbm.CropImage = "Crop Image";
com.kbm.ResetPhotoButton = "Reset Photo";
com.kbm.SelectButton = "Select";
com.kbm.SendPhoto = "Send Photo";
com.kbm.PhotosTitle = "Photos";
com.kbm.CameraNotAvailableMessage = "Camera is not Available !!!";
com.kbm.GalleryNotAvailableMessage = "Gallery is not available";
com.kbm.ImageCroppedMessage = "Image cropped";
com.kbm.ImageResetMessage = "Image reset";
com.kbm.CameraNotAvailableTitle = "OOPS !!!";
com.kbm.ShareLocationTitle = "Share Location";
com.kbm.SendLocationButton = "Send Location";
com.kbm.Participants = "Participants";
com.kbm.TypeGroupName = "Type group name";
com.kbm.NewChatTitle = "New Chat";
com.kbm.SearchPlaceholder = "Search";
com.kbm.HoldToTalkMessage = "Hold to Talk / Tap to Type";

com.kbm.RecordingMessage = "Recording";
com.kbm.MicrophoneNotAvailableMessage = "Microphone is not available";
com.kbm.AllowSoundRecordingMessage = "Please change Settings to allow sound recording";
com.kbm.SlideToCancelMessage = "Slide to cancel";
com.kbm.FriendAddedMessage = "Friend Added";
com.kbm.FriendRemovedMessage = "Friend Removed";
com.kbm.CheckImageAndNameField = "Please input display name and profile image";
com.kbm.UpdateMoodMessage = "Update Mood success";
com.kbm.UpdateProfileSuccessMessage = "Update Profile success";
com.kbm.FailedToUpdateMessage = "Failed to update";

com.kbm.EnterEmailMessage = "Please enter email address";
com.kbm.InvalidEmailMessage = "Invalid email address";
com.kbm.FillAllFieldsMessage = "Please fill-in all fields";
com.kbm.FillPasswordMessage = "Please fill-in password";
com.kbm.PasswordNotMatchedMessage = "Password does not match the confirm password";
com.kbm.CancelMessage = "Cancelled";
com.kbm.ConnectionFailedMessage = "Connection failed. Please retry again";
com.kbm.FetchFailedMessage = "Fetch data failed. Please retry again";
com.kbm.OperationFailedMessage = "Operation could not be completed. Please retry again";
com.kbm.RemoveMessage = "Are you sure you want to remove";
com.kbm.UploadingImageMessage = "The image is being uploaded";
com.kbm.SignOutMessage = "Are you sure you want to sign out?";
com.kbm.SignOutButtonName = "Sign out";
com.kbm.RetryButtonName = "Retry";
com.kbm.RemoveButtonName = "Remove";
com.kbm.LeaveButtonName = "Leave";
com.kbm.DeleteButtonName = "Delete";
com.kbm.NoNameMessage = "No Name";
com.kbm.ConversationListVCTitle = "My Chats";
com.kbm.EnableCameraPermissionMessage = "Enable Camera Permission";
com.kbm.FillGroupName = "Please fill out group name";
com.kbm.Settings = "Settings";
com.kbm.Cancel = "Cancel";
com.kbm.SendVideo = "Send Video";
com.kbm.NotNow = "Not Now";
com.kbm.IsTyping = "%@ is typing";
com.kbm.AreTyping = " are typing";
com.kbm.Copy = "Copy";
com.kbm.Reply = "Reply";
com.kbm.You = "You";

com.kbm.NotPartOfGroup = "You are not part of this group";
com.kbm.MuteChannel = "Mute group %@";
com.kbm.MuteUser = "Mute user %@";
com.kbm.UnmuteChannel = "Are you sure you want to unmute group %@";
com.kbm.UnmuteUser = "Are you sure you want to unmute user %@";
com.kbm.ConfirmButton = "Confirm";
com.kbm.EightHour = "8 Hours";
com.kbm.OneWeek = "1 Week";
com.kbm.OneYear = "1 Year";
com.kbm.MuteButton = "Mute";
com.kbm.UnmuteButton = "Unmute";
com.kbm.NoConversationsLabelText = "Start to chat with your friends by tapping the 'New Chat' button";
com.kbm.Online = "Online";
com.kbm.LastSeen = "Last seen %@";
com.kbm.JustNow = "just now";
com.kbm.MinutesAgo = "%@ mins ago";
com.kbm.HoursAgo = "%@ hrs ago";
com.kbm.LoadingIndicatorText = "Loading...";
com.kbm.BlockTitle = "Block";
com.kbm.UnblockTitle = "Unblock";
com.kbm.BlockUser = "Are you sure you want to block user %@";
com.kbm.UnblockUser = "Are you sure you want to unblock user %@";
com.kbm.ErrorMessage = "OOPS !!! Some error occured";
com.kbm.OkMessage = "Ok";
com.kbm.BlockSuccess = "Successfully blocked";
com.kbm.UnblockSuccess = "Successfully unblocked";
com.kbm.UnblockToEnableChat = "Unblock user to enable chat";
com.kbm.profaneWordsTitle = "Profane Words";
com.kbm.profaneWordsMessage = "Please avoid using profane words.";
com.kbm.Admin = "Admin";
com.kbm.AddParticipant = "Add participants";
com.kbm.RemoveUser = "Remove user";
com.kbm.MakeAdmin = "Make group admin";
com.kbm.DismissAdmin = "Dismiss group admin";
com.kbm.SendMessage = "Send message";
com.kbm.RemoveFromGroup = "Remove %@ from the \"%@\" group?";
com.kbm.Info = "Info";
com.kbm.VideoExportError = "Some error occured while exporting files";
com.kbm.ReportAlertTitle = "Are you sure you want to report this message?";
com.kbm.ReportAlertMessage = "If you report the message, it will be sent to admin of this application for review";
com.kbm.ReportMessage = "REPORT MESSAGE";
com.kbm.ReportMessageSuccess = "Message has been reported";
com.kbm.ReportMessageError = "Failed to report the message";
com.kbm.NetworkAccessFailedMessage = "No internet access";
com.kbm.CapitalLetterCancelText = "CANCEL";
com.kbm.EmailWebViewTitle =  "Email";
com.kbm.OkayMessage = "OKAY";
com.kbm.ReplyInfoMessage = "We are unable to directly retrieve this message for you. You can still scroll up your messages and view it.";
com.kbm.FailedToLoadLink = "Failed to load a link";
com.kbm.ExportLoadingIndicatorText = "Exporting...";

/* Speech to text */
com.kbm.SpeechToTextPlaceholder = "(Go ahead, I'm listening)";

com.kbm.DatePickerTimeTitle = "Select time";
com.kbm.DatePickerDateTitle = "Select date";
com.kbm.DatePickerDateAndTimeTitle = "Select date and time";

/* Form UI*/
com.kbm.InvalidDatErrorInForm = "Please enter valid data";

com.kbm.RichMessageImagePreviewTitle = "Image";

com.kbm.EnableCameraPermissionMessage = "Enable Contact Permission";

com.kbm.GroupDescriptionHeaderTitle = "Group Description";

/* Group Description VC */
com.kbm.GroupDescriptionVCTitle = "Group Description";
com.kbm.RemainingCharactersInfo = "Remaining characters: %@";
com.kbm.AddGroupDescriptionPlaceHolder = "Add group description";

// set up a title for conversation screen
com.kbm.ProfileName = "";

// system message headers
com.kbm.StartOfConversation = "";
com.kbm.LinkText = "";
com.kbm.LinkValue = "";

com.kbm.PinnedSystemMessageText = "";
com.kbm.PinnedLinkText = "";
com.kbm.PinnedLinkValue = "";

// date formatters
com.kbm.DateSectionHeaderDateFormat = "dd MMM yyyy, h:mma";
com.kbm.DateSectionHeaderAMSymbol = "am"
com.kbm.DateSectionHeaderPMSymbol = "pm"

com.kbm.MessageTimestampDateFormat = "h:mm a"
com.kbm.MessageTimestampAMSymbol = "am"
com.kbm.MessageTimestampPMSymbol = "pm"

// Accessibility Button label names
com.kbm.BackButtonAccessibilityLabelName = "back";
com.kbm.ContactButtonAccessibilityLabelName = "contact";
com.kbm.CameraButtonAccessibilityLabelName = "camera";
com.kbm.VideoButtonAccessibilityLabelName = "video";
com.kbm.VoiceButtonAccessibilityLabelName = "voice message button";
com.kbm.GalleryButtonAccessibilityLabelName = "gallery";
com.kbm.LocationButtonAccessibilityLabelName = "location";
com.kbm.DocumentButtonAccessibilityLabelName = "document";
com.kbm.SendButtonAccessibilityLabelName = "send";

// Accessibility Button label values
com.kbm.VoiceButtonAccessibilityValue = "Double tap and hold to record, release to send";

// a11y message labels
com.kbm.Delivered = "delivered to recipient";
com.kbm.Read = "read by recipient";
com.kbm.Sent = "sent to recipient";
com.kbm.Pending = "pending";
com.kbm.ReceivedMessageText = "Messsage %@ by %@ at %@";
com.kbm.SentMessageText = "Your message %@ at %@, %@";
com.kbm.ReceivedMessageLinks = "Link %@ by %@ at %@";
com.kbm.SentMessageLinks = "Your link %@ at %@, %@";
com.kbm.ReceivedMessageImage = "Image by %@ at %@";
com.kbm.SentMessageImage = "Your image at %@, %@";
com.kbm.ReceivedMessageVoice = "Voice message by %@ at %@";
com.kbm.SentMessageVoice = "Your voice message at %@, %@";
com.kbm.ReceivedMessageLocation = "Location by %@ at %@";
com.kbm.SentMessageLocation = "Your location at %@, %@";
com.kbm.ReceivedMessageVideo = "Video by %@ at %@";
com.kbm.SentMessageVideo = "Your video at %@, %@";
com.kbm.ReceivedMessageCards = "Cards by %@ at %@";
com.kbm.SentMessageCards = "Your cards at %@, %@";
com.kbm.ReceivedMessageFAQ = "F.A.Q. by %@ at %@";
com.kbm.SentMessageFAQ = "Your F.A.Q. at %@, %@";
com.kbm.ReceivedMessageQuickReply = "Suggested replies by %@ at %@";
com.kbm.SentMessageQuickReply = "Your suggested replies at %@, %@";
com.kbm.ReceivedMessageButton = "Button by %@ at %@";
com.kbm.SentMessageButton = "Your button at %@, %@";
com.kbm.ReceivedMessageListTemplate = "List template by %@ at %@";
com.kbm.SentMessageListTemplate = "Your list template at %@, %@";
com.kbm.ReceivedMessageDocument = "Document by %@ at %@";
com.kbm.SentMessageDocument = "Your document at %@, %@";
com.kbm.ReceivedMessageContact = "Contact by %@ at %@";
com.kbm.SentMessageContact = "Your contact at %@, %@";
com.kbm.ReceivedMessageImageWithCaption = "Image with caption: %@, by %@ at %@";
com.kbm.SentMessageImageWithCaption = "Your image with caption: %@ at %@, %@";
com.kbm.ReceivedMessageButtons = "Buttons by %@ at %@";
com.kbm.SentMessageButtons = "Your buttons at %@, %@";
com.kbm.ReceivedMessageForm = "Form by %@ at %@";
com.kbm.SentMessageForm = "Your form at %@, %@";
com.kbm.ListTemplateElement = "List item with title %@ and subtitle %@, double tap to select";
com.kbm.SaveContact = "Double tap to save contact";
com.kbm.Download = "Double tap to download";
com.kbm.Location = "Location latitude %f, longitude %f";
com.kbm.Upload = "Double tap to upload";
com.kbm.FileSize = "File size is %@";
com.kbm.Play = "Double tap to play";

Chat screen

Background Color

Use the color hex code to change the background color of the Chat Detail screen.

DEFAULT: Color hex : : 0xf9f9f9

config.backgroundColor = UIColor.red

Date-section Separator

The conversation screen's date-section separator time's dateformatter can be customized.

com.kbm.DateSectionHeaderDateFormat = "dd MM yyyy, h:mma";
com.kbm.DateSectionHeaderAMSymbol = "am"
com.kbm.DateSectionHeaderPMSymbol = "pm"

Date Separator cell

To customize the font, text color, and background color for the Date Separator cell, edit the values listed below.

DEFAULT BACKGROUND COLOR: UIColor.gray
DEFAULT TEXT COLOR: UIColor.white

KBMMessageStyle.dateSeparator = Style (
font: UIFontMetrics(forTextStyle: .footnote).scaledFont(for: UIFont.font(.bold(size: 12))),
text: UIColor.white
background: UIColor.gray

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

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

Enable Link Preview

To enable link preview in the chat for all the URLs, edit the isLinkPreviewDisabled value:

config.isLinkPreviewDisabled = false

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

Customizing icons on individual buttons

Customers can set each rich-message button's icon individually. For example, they can now inspect a url button's data, and set one icon if it is khoros.com or something else for elsewhere.

Button style can be implemented using protocol KBMRichButtonStyleDelegate and method getButtonStyle(buttonModel:).
Eg:

class AppDelegate: UIResponder, UIApplicationDelegate, UNUserNotificationCenterDelegate, KBMRichButtonStyleDelegate {
    
    func getButtonStyle(buttonModel: KBMButtonModel) -> KBMRichMessageButtonStyle {
        
        var richMessageButtonStyle = KBMRichMessageButtonStyle()
        // Common style config templates.
        richMessageButtonStyle.textAlignment = .center
        richMessageButtonStyle.padding = .init(left: 20, right: 20, top: 10, bottom: 10)
        richMessageButtonStyle.backgroundColor = .white
        richMessageButtonStyle.cornerRadius = 10
        richMessageButtonStyle.borderWidth = 1
        
        // Card button template style for templateId 10
        if buttonModel.templateId == "10" {
            
            
            // Card Link button style
            if buttonModel.type == .link {
                
                richMessageButtonStyle.textStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont(name: "HelveticaNeue", size: CGFloat(14)) ?? UIFont.systemFont(ofSize: 14)), text: UIColor.red)
                
                richMessageButtonStyle.borderColor = UIColor.red.cgColor
                richMessageButtonStyle.tintColor = .red
                
                if let url = buttonModel.url {
                    // Example for internal deep link icon config
                    if url.hasPrefix("myappscheme") {
                        richMessageButtonStyle.linkIcon = UIImage(named: "icon_arrow", in: Bundle(for: KBMConversationListViewController.self), compatibleWith: nil)
                    } else {
                        // For external link config
                        richMessageButtonStyle.linkIcon = UIImage(named: "link", in: Bundle.richMessageKit, compatibleWith: nil)
                    }
                }
                
            } else {
                // Normal button  style without link
                richMessageButtonStyle.textStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont(name: "HelveticaNeue", size: CGFloat(14)) ?? UIFont.systemFont(ofSize: 14)), text: UIColor.blue)
                
                richMessageButtonStyle.borderColor = UIColor.blue.cgColor
            }
        } else {
            // SUGGESTED REPLIES or LINK BUTTON or SUBMIT BUTTON style for templateId 6, 3
            
            richMessageButtonStyle.textStyle = Style(font: UIFontMetrics(forTextStyle: .subheadline).scaledFont(for: UIFont(name: "HelveticaNeue", size: CGFloat(14)) ?? UIFont.systemFont(ofSize: 14)), text: UIColor.blue)
            
            if buttonModel.type == .link {
                
                richMessageButtonStyle.borderColor = UIColor.blue.cgColor
                richMessageButtonStyle.tintColor = .blue
                
                if let url = buttonModel.url {
                    // Example for internal deep link icon config
                    if url.hasPrefix("myappscheme") {
                        richMessageButtonStyle.linkIcon = UIImage(named: "icon_arrow", in: Bundle(for: KBMConversationListViewController.self), compatibleWith: nil)
                    } else {
                        // For external link config
                        richMessageButtonStyle.linkIcon = UIImage(named: "link", in: Bundle.richMessageKit, compatibleWith: nil)
                    }
                }
                
            } else {
                // Normal button  style without link
                richMessageButtonStyle.borderColor = UIColor.blue.cgColor
            }
        }
        return richMessageButtonStyle
    }
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
         // Set the delegate the rich message button delegate using the below code :
          BrandMessengerManager.setRichMessageButtonStyleDelegate(self)
         return true
  }
}

Quick references

11441144

Updated about 1 month ago

Did this page help you?