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(red:0.93, green:0.94, blue:0.95, alpha:1.0)

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

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

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

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

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.

How to subscribe for events

Step 1: Import the framework as shown below:

import KommunicateChatUI_iOS_SDK
import Kommunicate

Step 2: Create a list of custom events to which you want to get real time update:

let eventList = [
             CustomEvent.attachmentClick,
             CustomEvent.faqClick,
             CustomEvent.locationClick,
             CustomEvent.messageSend,
             CustomEvent.notificationClick,
             CustomEvent.voiceClick
            ]

Step 4: Make your ViewController to inherit the protocol ALKCustomEventCallback to get the widget event callback. For example:

class ViewController: UIViewController, ALKCustomEventCallback {...... 

The protocol will add a method eventTriggered which will give you the real time update of subscribed events.

func eventTriggered(eventName: CustomEvent, data: [String : Any]?) {
  print("Event Name \(eventName) eventData \(data)")
}

Step 5: Subscribe to above list of events like below while starting the conversation:

    Kommunicate.subscribeCustomEvents(events: eventList, callback: self)