Customization

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.
2. Place the downloaded applozic-settings.json file under your platforms/android/app/src/main/assets directory

There are a lot of customization options in the file, refer this link for more details.

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

Apart from the properties mentioned in the above Applozic documentation, there are some other 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, AI agent 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

Theme Customization

Not all the colors can be changed from the applozic-settings.json file. There are some colors like the statusbar/toolbar color, message status icon colors(sent, delivered etc icons) which you need to override in your colors file under platforms/android/res/values/colors.xml file. Create the file under the same directory if not created.

Follow the below steps to override the default colors in Kommunicate:

1. Add the below line in your <resources tag in the colors.xml file

xmlns:tools="http://schemas.android.com/tools"

2. Add the below colors in your colors.xml file and use your own color values in them

    <color name="message_status_icon_colors" tools:override="true">#FF4081</color> // Message status icon color
    <color name="applozic_theme_color" tools:override="true">#FFB3E5FC</color>     //Theme color
    <color name="applozic_theme_color_primary" tools:override="true">#FF4081</color>
    <color name="applozic_theme_color_primary_dark" tools:override="true">#FF4081</color>
    <color name="applozic_theme_color_accent" tools:override="true">#3F51B5</color>
    <color name="default_start_new_button_color" tools:override="true">#FF4081</color> //Default start new conversation button color

Sample colors.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <Your other app specific colors go here>

    <color name="message_status_icon_colors" tools:override="true">#FF4081</color>
    <color name="applozic_theme_color" tools:override="true">#FFB3E5FC</color>
    <color name="applozic_theme_color_primary" tools:override="true">#FF4081</color>
    <color name="applozic_theme_color_primary_dark" tools:override="true">#FF4081</color>
    <color name="applozic_theme_color_accent" tools:override="true">#3F51B5</color>
    <color name="default_start_new_button_color" tools:override="true">#FF4081</color>
</resources>

iOS

Follow the below steps to customize kommunicate for iOS platform.

Note: When using kommunicate-cordova-plugin in your app, a .xcworkpsace file will be generated under platform/ios directory since Kommunicate plugin uses CocoaPods. If you were using .xcodeproj file to do customizations earlier, you will have to use .xcworkspace file now. 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, MyApp.xcodeproj and MyApp.xcworkspace file. We will be using the later one to do customizations.

Note: If you have already added the KommunicateWrapper.swift file in your project while doing the push notification setup, then you can skip steps 2 and 3 below.

1. Open the platforms/ios/YourApp.xcworkspace in Xcode.

2. Download the KommunicateWrapper.swift file and add it to your platforms/ios/ directory. Ignore if this file already exists in your platforms/ios directory.

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

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

   #import "<Your-App-Target-Name>-Swift.h"

   For e.g if your target name is MyApp then the import statement should be as below:

   #import "MyApp-Swift.h"

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

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

Search for function useCustomConfigurations() in KommunicateWrapper.swift file and add the configurations you want to change.

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

Pass Custom data to AI agent platform

Use the below code to send the custom data to AI agent platform:

var chatContext = {
     email: "<EMAIL>",  //replace <EMAIL> with actual emailId
     deviceInfo: {
          manufacturer: 'OnePlus 6',
          OSVersion: '10.0'
          }
        }

     kommunicate.updateChatContext(chatContext, (response) => {
          console.log("Kommunicate chatContextUpdate successfull : " + response);
       }, (err) => {
          console.log("Kommunicate chatContextUpdate error : " + err);
      });