Developer Docs | Kommunicate

Developer Docs | Kommunicate

  • Try For Free
  • Docs

›iOS

Web

  • Installation
  • CMS Installation
  • Authentication
  • Conversation
  • Conversation Assignment
  • Customization
  • Localization
  • Logout
  • Troubleshooting

Android

  • Installation
  • Authentication
  • Push Notification
  • Conversation
  • Customization
  • Localization
  • Logout
  • Migration
  • Troubleshooting

iOS

  • Installation
  • Authentication
  • Push Notification
  • Conversation
  • Customization
  • Localization
  • Logout
  • Troubleshooting

React Native

  • Installation
  • Authentication
  • Push Notification
  • Conversation
  • Customization
  • Logout

Flutter

  • Installation
  • Authentication
  • Customization
  • Conversation
  • Push Notification
  • Localization
  • Troubleshooting

Ionic/Cordova/Phonegap

  • Installation
  • Authentication
  • Push Notification
  • Conversation
  • Customization
  • Localization
  • Logout
  • Resolving Errors

Ionic/Capacitor

  • Installation
  • Authentication
  • Push notification
  • Customization

Rich Messages

  • How To Use
  • Types of Rich Messages

Bots

  • Bot setup
  • Dialogflow Integration
  • Lex Integration
  • Kompose Bot Builder
  • IBM Watson Integration
  • Custom Bot Integration
  • Import Kompose Bot
  • Bot Samples

Integrations

  • Zapier
  • WhatsApp
  • WhatsApp 360Dialog
  • WhatsApp Twilio
  • WhatsApp Cloud API

Platform APIs

  • Authentication
  • Endpoints

Dashboard Features

  • Analytics
  • Conversations
  • Users
  • Bot Integration
  • Helpcenter
  • Settings

Configuration

  • Email Fallback
  • Webhooks
  • Access Token URL

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:

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.

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)
← ConversationLocalization →
  • Overview
  • Theme Customization
  • Text view style
  • FAQ Button
  • Attachment Options
  • Attachment Selection Limit
  • Navigation Bar Bottom Line
  • Chat Bar Attachment Background Color
  • Start New Conversation Button
  • Back Button on Conversation List Screen
  • Divider Line between Send Button & Chat Text View
  • Rich Message Button Action
  • Restricted Words
  • Restrict Pattern
  • Refresh Button
  • Send additional metadata with messages
  • One Time Rating
  • Hide Sender Name
  • Speech-to-Text and Text-to-Speech support
  • Enable Text To Speech
  • Pass custom data to bot platform
  • Make the bot multilingual
  • Events
    • How to subscribe for events

Ready to automate more than 80% of your customer support?

Try for Free
  • support@kommunicate.io
  • United States
    (+1) (310) 402-2374
  • India
    (+91) 974-057-0196
  • Docs
    • Web
    • Android
    • iOS
    • Ionic/Phonegap
    • React Native
    • Flutter
  • Product
    • Kompose Chatbot Builder
    • Live Chat
    • Integrations
    • Helpcenter
    • Dialogflow Integration
    • Features
    • Pricing and FAQs
    • Get Demo
  • Resources
    • Chatbots Templates
    • Blog
    • Kommunity
    • Support Metrics
    • Free SaaS Icons
    • ROI Calculator
    • Comparison
  • Company
    • About Us
    • Partner Program
    • Terms of Service
    • Privacy Policy
    • Jobs
    • SLA
    • DPA
  • Support
    • Knowledge Base
    • Docs
    • Stack Overflow
    • API Status
    • Contact Us
Software Advice Frontrunners for Live Chat Mar-22crozdesk badgeCapterra Shortlist for Live Chat Mar-22GetApp Category Leaders for Live Chat Mar-22GDPR compliant - GDPR Copy 12Created with Sketch.COMPLIANTG2 reviews badge
Copyright © 2023 Kommunicate.io