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]

convo_list_screen_ios.png convo_screen_ios.png

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

message_text_style_ios.png

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

faqButtonDisabledConversationListView.png

Kommunicate.defaultConfiguration.hideFaqButtonInConversationView = true // Hide from Conversation screen

faqButtonDisabledConversationView.png

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

no_attachment_option.png

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

some_attachment_option.png

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

all_attachment_option.png

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

new_system_photos_ui.png

We also have the option to record and send an audio message. To hide this option use hideAudioOptionInChatBar config.

Kommunicate.defaultConfiguration.hideAudioOptionInChatBar = true

audio_option_hidden.png

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)

attachment_background_color.png

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

start_new_convo_hidden.png

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

hide_back_button.png

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

hide_divider_line.png

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

hide_refresh_button.png

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

hide_start_new_conversation.png

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

hide_sender_name.png

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

multiple-languages-support.png

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

navigation-bar-subtitle.png

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

conversation_info.png

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

faq-button-customization.png

Events

To get real time updates of user activity inside the Kommunicate SDK, Subscribe to the following events while launching the conversation:

EventDescription
messageSendTriggered when the message is sent by the user.
faqClickTriggered when the FAQ button in the conversation /conversation list screen.
notificationClickTriggered when user clicks on notification message.
newConversationTriggered when a new conversation gets started.
attachmentClickTriggered when the user clicks on the attachment icon in the conversation.
voiceClickTriggered when the user clicks on the voice icon in the conversation.
locationClickTriggered when the user clicks on the location icon in the conversation.
rateConversationClickTriggered when the user clicks on Rate this conversation button.
rateConversationEmotionsClickTriggered when user clicks on emoticons which are available on feedback.
restartConversationClickTriggered when the user clicks on the restart conversation button to restart the conversation.
richMessageClickTriggered when the user clicks on rich messages in a conversation.
resolveConversationTriggered when the user clicks on resolve conversation.
conversationInfoTriggered 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]

Step 3: Make your ViewController to inherit the protocol ALKCustomEventCallback to get the widget event callbacks.

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)
← ConversationLocalization →