Customization · Developer Docs

Overview

In this section, learn how to customize the Kommunicate SDK according to your requirements.

Getting started with customization

Kommunicate provides easy settings to customize different elements (such as fonts, message color, background colors) and enable or disable any particular feature.

Follow these steps:

Download the settings file from here (Right click -> Save as -> Save)
Place the downloaded applozic-settings.json file under your app/src/main/assets/ folder.

There are a lot of customization options in the file. Below are some common options available.

Change the message background colors

You can change the sent/received message background and text color by setting the hex color codes in the below properties in applozic-settings.json file.

"sentMessageBackgroundColor": "#5c5aa7",
"receivedMessageBackgroundColor": "#e6e5ec",
"sentMessageCreatedAtTimeColor": "#ede6e6",
"receivedMessageCreatedAtTimeColor": "#8a8686",
"sentMessageTextColor": "#FFFFFFFF",
"receivedMessageTextColor": "#646262"

Hide/Show media attachment and location sharing options

Android sdk

You can hide or show the media attachments options like camera, emoji, files and location sharing by changing the below values in applozic-settings.json file.

You can make any of the options 'false' if you want to hide them.

"attachmentOptions": {
    ":location": false, // Location sharing option will be disabled
    ":camera": true,
    ":file": true,
    ":audio":true
  }

If location sharing functionality is enabled

If you are enabling the location sharing 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:

   <uses-permission android:name="<PACKAGE_NAME>.permission.MAPS_RECEIVE" />
   <permission
        android:name="<PACKAGE_NAME>..permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

Add your geo-API_KEY in AndroidManifest.xml file:

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

Other properties

Below are some more properties which you can customize in the SDK:

"enableFaqOption": [         // Setting to enable/disable the FAQ button on the toolbar. Learn more about FAQs here: https://dashboard.kommunicate.io/helpcenter/content
    false,                   // Set it 'true' to enable the FAQ button on the conversation list screen (first screen)
    false                    // Set it 'true' to enable the FAQ button on the message list screen (individual chat thread)
  ],
"enableAwayMessage": false,   // Setting it 'false' will disable Away message. Learn more about Away message here: https://dashboard.kommunicate.io/settings/away-message
"logoutOption": true,        // Setting it 'true' will show the logout option in conversation list screen menu.
"logoutPackageName": "<RESOLVED_ACTIVITY_NAME>", // When logoutOption is set to true, add the activity name(resolved name) to which redirect will happen after logout is successfull. For e.g. kommunicate.io.sample.MainActivity
"showStartNewConversation" : false, // Setting it 'false' will hide the default 'Start New Conversation' button
"sentMessageCornerRadii": [  // The measurements of corner radii for 'sent message' bubbles
10,                          // Top left corner radius
10,                          // Top right corner radius
10,                          // Bottom right corner radius
10                           // Bottom left corner radius
],
"receivedMessageCornerRadii": [  // The measurements of corner radii for 'received message' bubbles . (Similar order as sentMessageCornerRadii)
10,
10,
10,
10
]

Change fonts

Fonts for some TextViews can be changed by setting the fonts in the applozic-settings.json file. Add the below property in applozic-settings.json file to change the fonts for the respective TextViews:

"fontModel": {
    "messageTextFont": "",  // The default font would be used if any of the font feilds is left blank
    "messageDisplayNameFont": "",
    "createdAtTimeFont": "",
    "toolbarTitleFont": "", 
    "toolbarSubtitleFont": "",
    "messageEditTextFont": ""
  }

If a particular field is left blank or is not included in the above object, then default font would be used for the same. To change the font, provide either an external font file or select from the list of default android fonts. The details on how to update external or default Android fonts are given below.

Use TTF font file

To use an external font, add the TTF font file under the directory app/src/main/assets/fonts/<your-font>.ttf

Then specify the font for the specific TextView. For example, to use the above font for the toolbar title, set the path to the property toolbarTitleFont:

"fontModel": {
    "messageTextFont": "",
    "messageDisplayNameFont": "",
    "createdAtTimeFont": "",
    "toolbarTitleFont": "fonts/<YOUR_FONT>.ttf", 
    "toolbarSubtitleFont": "",
    "messageEditTextFont": ""
  }

Use Android's default fonts

To use the font from the list of default android fonts, set the font name to the TextView property in the fontModel object in applozic-settings.json file. Use fonts from the below list. You can only use one font per TextView, no combinations are allowed.

normal, 
bold,
italic,
bold_italic,
default,
default_bold,
monospace,
sans_serif,
serif

For example, if you want to use sans_serif font for the toolbar subtitle TextView, set the font name to the toolbarSubtitleFont property:

"fontModel": {
    "messageTextFont": "",
    "messageDisplayNameFont": "",
    "createdAtTimeFont": "",
    "toolbarTitleFont": "fonts/<your-font>.ttf", // Custom fonts are set like this
    "toolbarSubtitleFont": "sans_serif", // Android default fonts are set like this
    "messageEditTextFont": ""
  }

Theme customization

You may not be able to change all the colors from the applozic-settings.json file. There are some colors such as the status bar/toolbar color, message status icon colors (sent, delivered etc icons) which you need to override in your colors file.

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

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

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

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

    <color name="applozic_theme_color_primary_dark" tools:override="true">#FF4081</color>Status bar color

NOTE: primary colors such as Tool bar color, message_status_icon_colors can be set from the Kommunicate dashboard

Change Toolbar title color and the Toolbar subtitle color

To change the toolbar colors, open the file applozic-settings.json as explained here and add the following fields and mention the color you want to add.

"toolbarTitleColor": "#5c5aa7",
"toolbarSubtitleColor": "#e6e5ec",

Sample colors.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <Your other custom colors go here> // Add the specific colors you want to set here
    <color name="applozic_theme_color_primary_dark" tools:override="true">#FF4081</color>Status bar color
</resources>

Send additional metadata with messages

If you need to send some additional data with all the messages sent from a device, then you need to set predefined metadata when logging in the user.

For example, if you need to send deviceInformation with all the messages sent from that device then call the below function in onSuccess of login or whichever initial method you are calling from Kommunicate:

 Map<String, String> metadata = new HashMap<>();
 metadata.put("deviceId", "Current Device ID");
 metadata.put("deviceManufaturer", "Some manufacturer");
 KmSettings.updateChatContext(context, metadata);

This data will be sent with all the messages sent from the device.

Pass Custom data to bot platform

Use the below code to send the custom data to bot platform and pass the key-value string to a Map to the below method Kommunicate.updateChatContext.

  Map<String, String> metadata = new HashMap<>();
  metadata.put("key1", "value1"); // Pass key value string 
  metadata.put("key2", "value2"); // Pass key value string 
  
  if (Kommunicate.isLoggedIn(context)) { // Pass application context
     Kommunicate.updateChatContext(context, metadata);
  }

Note: Make sure to call this method after login success or conversation builder success.

Set parent activity to the ConversationActivity dynamically

If you have a use case where the conversation is launched from multiple activities, then you can set the parent activity to the conversation activity so that the user navigates back to the parent activity when the app is launched from chat notification. Use the below code to set the parentActivity dynamically:

  KommunicateSetting.getInstance(getContext()).setParentActivity("<COMPLETE-RESOLVED-PATH-OF-THE-ACTIVITY>");
  //resolved path e.g: kommunicate.io.sample.MainActivity

Speech-to-Text and Text-to-Speech support

The quality of the customer journey is everything in a product. STT and TTS will help you in enhancing the user experience and people with different learning styles prefer using these features, hence we have decided to help our clients in this way and added the support for this.

Note : Add below code to enable Speech-to-Text or Text-to-Speech before launching a conversation.

import com.applozic.mobicomkit.uiwidgets.kommunicate.KmPrefSettings;

You can enable the Speech-to-Text and Text-to-Speech using the below setting:

KmPrefSettings.getInstance(SplashScreenActivity.this)
                     .enableSpeechToText(true) // if true, enables speech to text feature in the SDK.
                     .enableTextToSpeech(true) // if true, enables text to speech feature. All the messages received will be spoken when the chat screen is open.
                     .setSendMessageOnSpeechEnd(true) //if true, the speech will automatically be sent as a message without clicking the send message button.
                     .setSpeechToTextLanguage("zh-TW") // set the laguage code for speech recognition. Default is en-US.
                     .setTextToSpeechLanguage("zh-TW"); // set the language code for text to speech. Default is en-US

Text to speech: Works only when the conversation is open and a new message is received within the conversation.

Speech to text: The mic button used to record and send audio will function as STT starter. Just click the button once and the device will start listening. To cancel an ongoing listening, click on the button again. The audio button will scale animate depending on the input voice amplitude. The partial results will be set on the message edit text but the send message button will only be enabled once the complete speech is received. When isSendOnSpeechEnd = true, the message will be sent automatically once the text is received.

To Integrate your own STT or TTS service, replace the KmSpeechToText and KmTextToSpeech implementation with your service.