Customization

Kommunicate provides out of the box theme customization from the dashboard under customization section. Changing the theme color will automatically change the below Kommunicate colors on the mobile apps:

1. Toolbar color
2. Sent message background color
3. Message status icon colors
4. Rich message primary colors

However, if you would like to override these colors from the mobile specific SDKs, Kommunicate provides device side customization as well. Follow the below sections for the same.

Events

To receive real-time updates on user activity within the Kommunicate SDK for iOS and Android, use the following events when launching the conversation:

Event	Description
onMessageSend	Triggered when a message is sent by the user.
onMessageReceived	Triggered when a message is received by the user.
onFaqClick	Triggered when the FAQ button is clicked in the conversation or conversation list screen.
onStartNewConversation	Triggered when a new conversation is started.
onBackButtonClicked	Triggered when the user taps the back button on the conversation screen.
onConversationRestarted	Triggered when the user clicks the restart conversation button.
onRichMessageButtonClick	Triggered when the user clicks on rich messages in a conversation.
onSubmitRatingClick	Triggered when the user submits a rating for a conversation.
onConversationInfoClicked	Triggered when the user clicks on the conversation info view.

How to Use Events

Step 1: Import the services package into your project.

import 'package:flutter/services.dart';

Step 2: Create a MethodChannel for kommunicate_flutter.

MethodChannel channel = MethodChannel('kommunicate_flutter');

Step 3: Add the following code in your initState() method.

  @override
  void initState() {
    channel.setMethodCallHandler((call){
      if(call.method == 'onPluginLaunch'){
        print(call.arguments);
      } else if(call.method == 'onMessageSend'){
        print(call.arguments);
      } else if(call.method == 'onMessageReceived'){
        print(call.arguments);
      } else if(call.method == 'onFaqClick'){
        print(call.arguments);
      } else if(call.method == 'onStartNewConversation'){
        print(call.arguments);
      } else if(call.method == 'onBackButtonClicked'){
        print(call.arguments);
      } else if(call.method == 'onConversationRestarted'){
        print(call.arguments);
      } else if(call.method == 'onRichMessageButtonClick'){
        print(call.arguments);
      } else if(call.method == 'onSubmitRatingClick'){
        print(call.arguments);
      } else if(call.method == 'onConversationInfoClicked'){
        print(call.arguments);
      } 
      return Future.value(null);
    });
    super.initState();
  }

Note: The call.arguments contains the response for the corresponding action.

Note: Events do not work with Flutter Web for now. Therefore, ensure you implement a platform check when using Events, specifically to exclude the web platform. Events are only supported on Android and iOS.

Android

Kommunicate provides easy settings to customize message text color, background colors and enable of disable any particular feature.

Follow the below steps:

1. Download the setting file from here(Right click and Save as).
2. Place the downloaded applozic-settings.json file under your /android/app/src/main/assets directory

Hide/Show media attachment and location sharing options

You can hide or show the media attachments options like camera,files and location sharing by changing the below values in applozic-settings.json file. Make an option false if you want to hide it.

"attachmentOptions": {
    ":location": true,
    ":camera": true,
    ":file": true
  }

If location sharing functionality is enabled:

If you are NOT enabling location sharing functionality, you may go to the next step: Other properties

If you are enabling the location option in the applozic-settings.json file, make sure to include the below permissions and geo-API key in your AndroidManifest.xml file

Add the following permissions in your AndroidManifest.xml file in platforms/android/AndroidManifest.xml:

Add this inside </application> tag

   <meta-data
       android:name="com.google.android.geo.API_KEY"
       android:value="<your-geo-API-KEY>" />

Other properties

Here are the properties in applozic-settings.json file that are specific to Kommunicate.

"hideGroupSubtitle" : true,   //True will hide the subtitle in the support group(for e.g 'Keith, bot and You' will be hidden)
"enableAwayMessage": false,   //Away message will be disabled
"logoutOption": false,        //The logout option in the Option menu will be hidden
"showStartNewConversation" : false, //The default Start New Conversation button will be hidden
"toolbarTitleColor": "#ffffff",  //toolbar title text color
"toolbarSubtitleColor": "#ffffff" //toolbar subtitle text color

Refer this doc for different configurations provided by Kommunicate Android SDK.

iOS

Note: When using kommunicate_flutter_plugin in your app, you need to open the ios/Runner.xcworkpsace file in Xcode to do the customizations as Kommunicate plugin uses CocoaPods. Refer this sample for the project structure and the location where you need to add the KommunicateWrapper.swift file. The sample contains two build files, Runner.xcodeproj and Runner.xcworkspace file. We will be using the later one to do customizations.

To customize Kommunicate settings for iOS, follow the below steps:

1. Open the ios/Runner.xcworkspace in Xcode.

2. Download the KommunicateWrapper.swift(Right click and Save as) file.

3. Right click on your Runner target name in Xcode -> Add files to "Runner" -> Select the KommunicateWrapper.swift file downloaded in step 2. Ignore if this file is already added. If your app does not have the Bridging header file, Xcode will show a dialog to add the file, click Yes.

4. Click on YourApp in Xcode and select Build Settings -> Build Options -> Always Embeded Swift Standard Libraries -> Yes

5. Open AppDelegate.m file and add the below import (Ignore if already done):

#import "Runner-Swift.h"

5. Then in your didFinishLaunchingWithOptions method add the below line just above the return statement(Refer here for details):

   [KommunicateWrapper.shared application:application didFinishLaunchingWithOptions:launchOptions];

6. Search for function useCustomConfigurations() in KommunicateWrapper.swift file and add the configurations you want to customize inside the function. Refer this doc for different configurations provided by Kommunicate iOS SDK.