Customization · Developer Docs

Overview

In this section, learn how to customize the Kommunicate SDK according to your requirements. You can customize the theme, fonts, and other attributes (such as location, attachments etc).

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

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

Hiding/Showing media attachment and location sharing options

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

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

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

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.

"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": false,        // Setting it 'false' will hide the logout option in the Option menu
"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
]

Changing 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="message_status_icon_colors" tools:override="true">#FF4081</color> // Message status icons' 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's color

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="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>

Sending 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");
 ApplozicClient.getInstance(context).setMessageMetaData(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.