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

Message Text Font and Color

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 and location), use optionsToShow config as shown below. All will be shown by default.

// 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(options: [.camera, .location])

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

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

Kommunicate.defaultConfiguration.hideAudioOptionInChatBar = true

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

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