Customization
Overview
In this section, learn how to customize the Kommunicate SDK according to your requirements.
Note: Add these customization codes either in AppDelegate
didFinishLaunchingWithOptions
method or before creating the conversation.
Theme Customization
In this section we have explained about the configuration options present in the SDK to modify color, font etc.
You can override any of the properties from the default configuration. Doing it in your AppDelegate is preferred.
Conversation Screen Background Color
Background color of the Conversation screen
Kommunicate.defaultConfiguration.backgroundColor = UIColor.white
Received Message Background Color
The background color of the received message bubble.
KMMessageStyle.receivedBubble.color = UIColor.lightGray
Sent Message Background Color
The background color of the sent message bubble.
KMMessageStyle.sentBubble.color = UIColor.lightGray
Navigation Bar's Color Customization
Use the below UINavigationBar.appearance
code to change the navigation bar colors while launching the conversation.
let kmNavigationBarProxy = UINavigationBar.appearance(whenContainedInInstancesOf: [KMBaseNavigationViewController.self])
kmNavigationBarProxy.isTranslucent = false
// Navigation Bar's Background Color
kmNavigationBarProxy.barTintColor = UIColor.orange
// Navigation Bar's Tint color
kmNavigationBarProxy.tintColor = UIColor.navigationTextOceanBlue()
// Navigation Bar's Title color
kmNavigationBarProxy.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.black]
Text view style
Change the placeholder style
KMChatBarConfiguration.TextView.placeholder = KMStyle(font: .font(.normal(size: 16)), text: .red)
Change the text style
KMChatBarConfiguration.TextView.text = KMStyle(font: .font(.normal(size: 18)), text: .red)
Use this for changing message text font and color in the Conversation screen.
KMMessageStyle.receivedMessage = KMStyle(font: .systemFont(ofSize: 14), text: .blue) // Receiver side
KMMessageStyle.sentMessage = KMStyle(font: .systemFont(ofSize: 14), text: .black) // Sender side
FAQ Button
To hide the FAQ button in Conversation List or Conversation screen, use below setting
Kommunicate.defaultConfiguration.hideFaqButtonInConversationList = true // Hide from Conversation List screen
Kommunicate.defaultConfiguration.hideFaqButtonInConversationView = true // Hide from Conversation screen
Attachment Options
To hide all the attachment options(gallery, camera, video, contact, document and location), use optionsToShow
config as shown below. All will be shown by default except contact.
// To hide all the attachment options
Kommunicate.defaultConfiguration.chatBar.optionsToShow = .none
// If you want to show just two attachment options
Kommunicate.defaultConfiguration.chatBar.optionsToShow = .some([.camera, .location])
// If you want to show all attachment options then use this
Kommunicate.defaultConfiguration.chatBar.optionsToShow = .all
// For iOS 14+ devices, a new UI has been added to send the photos and videos, this will handle all privacy restrictions in iOS 14
// Add the below setting in the AppDelegate, just like other config options, by passing the value 'false' will disable the setting
Kommunicate.defaultConfiguration.isNewSystemPhotosUIEnabled = true
We also have the option to record and send an audio message. To hide this option use hideAudioOptionInChatBar
config.
Kommunicate.defaultConfiguration.hideAudioOptionInChatBar = true
Attachment Selection Limit
You can restrict the photo/video selection limit inside the conversation.
Note: The maximum limit is 30.
Kommunicate.defaultConfiguration.chatBar.photosSelectionLimit = 20
Navigation Bar Bottom Line
You can show/hide the navigation bar's bottom line. By default, it will be hidden.
Kommunicate.defaultConfiguration.hideNavigationBarBottomLine = false
Chat Bar Attachment Background Color
You can customize the background color of the Bottom Chat Bar, which contains attachment options.
Kommunicate.defaultConfiguration.chatBarAttachmentViewBackgroundColor = UIColor.init(red: 213,green: 255,blue: 255)
Delete Conversation
You can let end user delete conversation on their end. End user can delete a conversation by long pressing on the particular conversation on conversation list screen. To implement this, you can use the provided code below.
Kommunicate.defaultConfiguration.enableDeleteConversationOnLongpress = true
Start New Conversation Button
You can show/hide the start new conversation button on the Navigation Bar at the conversation list Screen. By default, it will be Visible.
Kommunicate.defaultConfiguration.hideStartChatButton = true
Back Button on Conversation List Screen
You can show/hide the back button on conversation list screen. By default, it will be visible.
Kommunicate.defaultConfiguration.hideBackButtonInConversationList = true
Divider Line between Send Button & Chat Text View
You can show/hide the divider line which separates the textview & send button on chat bar.
Kommunicate.defaultConfiguration.hideLineImageFromChatBar = true
Rich Message Button Action
You can disable the user's actions on rich messages like Quick replies, Generic cards,lists etc.It can be useful when you want to restrict these actions for a particular list of users. By default, it is false which means it won't restrict any actions.
Kommunicate.defaultConfiguration.disableRichMessageButtonAction = true
Restricted Words
To achieve this, create a file which contains a list of restricted words and mention your file name without extension like below. File extension should be text.
Kommunicate.defaultConfiguration.restrictedWordsFileName = "your file name without extension"
Restrict Pattern
You can configure a regex pattern that can be restricted when user tries to send in the conversation.This regular expression pattern that will be used to match the text that user is sending. This will be combined with the restricted words config option, which means if the text is matched with the restricted words or through this pattern, an alert will be shown. By default, it is empty.
Note: Make sure you verify this pattern before setting up here.
Kommunicate.defaultConfiguration.restrictedMessageRegexPattern = "your regular expression"
Refresh Button
You can enable/disable the default refresh button on the navigation bar of conversation Screen. By default, it will be visible.
Kommunicate.defaultConfiguration.isRefreshButtonEnabled = false
Start New Conversation
Use the below code to toggle the visibility of the Start New Conversation button on the conversation list screen. By default, it will be displayed.
Kommunicate.defaultConfiguration.hideBottomStartNewConversationButton = true
Send additional metadata with messages
If you want to send additional metadata with all the messages(sent from a device) then use messageMetadata
config in your AppDelegate like this:
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
let messageInfo = ["custom-key": "value"]
do {
let messageInfoData = try JSONSerialization.data(withJSONObject: messageInfo, options: .prettyPrinted)
let messageInfoString = String(data: messageInfoData, encoding: .utf8) ?? ""
Kommunicate.defaultConfiguration.messageMetadata = ["info": messageInfoString]
} catch {
print(error)
}
return true
}
One Time Rating
If it is true, customers can give feedback only once for the conversation. If it’s false, the customer can give feedback whenever the conversation gets resolved. By default it will be false.
Kommunicate.defaultConfiguration.oneTimeRating = true
Hide Sender Name
You can hide the sender name inside the conversation.First you need to import the module like this import KommunicateChatUI_iOS_SDK
. Then add the below line . By default it is false.
KMCellConfiguration.hideSenderName = true
Speech-to-Text and Text-to-Speech support
Enable Speech to Text
The quality of the customer journey is everything in a product. STT will help you in enhancing the user experience and people with different learning styles prefer using these features, which is supported on iOS SDK. The Speech-to-Text feature can be enabled using the below setting:
This feature is disabled by default, to enable it, add the below script in the bottom of the Podfile and run pod install
:
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name == 'KommunicateChatUI-iOS-SDK'
target.build_configurations.each do |config|
config.build_settings['SWIFT_ACTIVE_COMPILATION_CONDITIONS'] ||= ['$(inherited)']
config.build_settings['SWIFT_ACTIVE_COMPILATION_CONDITIONS'] << 'SPEECH_REC'
end
end
end
end
Also add this Speech recognition & Microphone usage entry in the project's Info.plist(open it as Source Code) file:
<key>NSSpeechRecognitionUsageDescription</key>
<string>Speech recognition will be used to determine which words you speak into the device's microphone.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Allow MicroPhone</string>
Multiple Language Support for Speech to Text
You can use the sample code below to add support for multiple languages in speech-to-text functionality. You can also trigger a specific message on change of language.
Note: Please make sure that you have enabled speech-to-text before adding multiple languges support
var languages = [KMLanguage(code: "hi", name: "Hindi", sendMessageOnClick: true, messageToSend: "handover to Hindi bot"), KMLanguage(code: "en", name: "English", sendMessageOnClick: true, messageToSend: "handover to English bot")]
Kommunicate.defaultConfiguration.languagesForSpeechToText = languages
Enable Text To Speech
By default TTS (Text To Speech) is disabled. You can enable it by using the below line.
Kommunicate.defaultConfiguration.enableTextToSpeechInConversation = true
Pass custom data to bot platform
To pass custom data with all the messages to the bot platform, use updateChatContext
config as shown below:
let messageInfo = ["custom-key": "value"]
do {
try Kommunicate.defaultConfiguration.updateChatContext(with: messageInfo)
} catch {
print("Failed to update chat context: ", error)
}
Make the bot multilingual
If you want to set a user's language(to get bot replies in that language), then use updateUserLanguage
config as shown below:
do {
try Kommunicate.defaultConfiguration.updateUserLanguage(tag: "fr")
} catch {
print("Failed to update user language: ", error)
}
Do not allow text input from users if the conversation is assigned to a bot
To prevent the users from sending a message when a conversation is assigned to a bot. Add the below configuration option before launching the chat. The input typing field will be hidden.
Kommunicate.kmConversationViewConfiguration.restrictMessageTypingWithBots = true
Adding toolbar subtitle and rating
You can add custom subtitle and rating on navigation bar using below code.
Kommunicate.kmConversationViewConfiguration.toolbarSubtitleText = "7 Years Experience"
Kommunicate.kmConversationViewConfiguration.toolbarSubtitleRating = 4.5
Adding conversation info
If you wish to display specific conversation information below the navigation bar, you can utilize the provided sample code for achieving this.
let bg = UIColor(5, green: 163, blue: 191) ?? UIColor.blue
let trailing = UIImage(named: "next") ?? UIImage()
let leading = UIImage(named: "file") ?? UIImage()
let font = UIFont.systemFont(ofSize: 14.0, weight: .bold)
let model = KMConversationInfoViewModel(infoContent: "This is your conversation info text", leadingImage: leading, trailingImage:trailing, backgroundColor: bg, contentColor: UIColor.white, contentFont:font)
Kommunicate.defaultConfiguration.conversationInfoModel = model
Hiding assignee status
You can use the below code for toggling the visibility of assignee's status for a conversation. By default, it will be visible
Kommunicate.hideAssigneeStatus(true)
FAQ button customization
You can utilize the code provided below to customize the color of the FAQ button.
Kommunicate.kmConversationViewConfiguration.faqTextColor = .red
Kommunicate.kmConversationViewConfiguration.faqBackgroundColor = .white
Events
To get real time updates of user activity inside the Kommunicate SDK, Subscribe to the following events while launching the conversation:
Event | Description |
---|---|
messageSend | Triggered when the message is sent by the user. |
faqClick | Triggered when the FAQ button in the conversation /conversation list screen. |
notificationClick | Triggered when user clicks on notification message. |
newConversation | Triggered when a new conversation gets started. |
attachmentClick | Triggered when the user clicks on the attachment icon in the conversation. |
voiceClick | Triggered when the user clicks on the voice icon in the conversation. |
locationClick | Triggered when the user clicks on the location icon in the conversation. |
rateConversationClick | Triggered when the user clicks on Rate this conversation button. |
rateConversationEmotionsClick | Triggered when user clicks on emoticons which are available on feedback. |
restartConversationClick | Triggered when the user clicks on the restart conversation button to restart the conversation. |
richMessageClick | Triggered when the user clicks on rich messages in a conversation. |
resolveConversation | Triggered when the user clicks on resolve conversation. |
conversationInfo | Triggered when the user clicks on conversation info view. |
How to subscribe for events
Step 1: Import the framework as shown below:
import KommunicateChatUI_iOS_SDK
import Kommunicate
import KommunicateCore_iOS_SDK
Step 2: Create a list of custom events to which you want to get real time update:
let event: [CustomEvent] = [.richMessageClick, .faqClick, .messageSend, .messageReceive]
ALKCustomEventCallback
to get the widget event callbacks.
Step 3: Make your ViewController to inherit the protocol For example:
class ViewController: UIViewController, ALKCustomEventCallback {......
The protocol will add set of callback functions. Which will give you the real time update of respective events.
func messageSent(message: ALMessage) {}
func messageReceived(message: ALMessage) {}
func conversationRestarted(conversationId: String) {}
func onBackButtonClick(isConversationOpened: Bool) {}
func faqClicked(url: String) {}
func conversationCreated(conversationId: String) {}
func ratingSubmitted(conversationId: String, rating: Int, comment: String) {}
func richMessageClicked(conversationId: String, action: Any, type: String) {}
func conversationInfoClicked() {}
Step 4: Subscribe to above list of events like below before starting the conversation:
Kommunicate.subscribeCustomEvents(events: eventList, callback: self)