Customization

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

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

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]

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

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
}

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 == 'ApplozicSwift'
      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>

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