Chat APIs and In-app Messaging SDKs for Developers, by Developers

Applozic powers multi-platform Chat APIs and in-app Messaging SDKs for Android, iOS and the Web that will enable you to build advanced in-app chat solutions your users will love.

Integrate chat in your application with completely customizable UI kits, powerful messaging APIs and SDKs, developed with exceptional security measures in mind.

Guides    API Explorer

NativeScript

NativeScript customisation

Android

Changing Applozic's default theme

You can change the default themes used in applozic's Activities(blue colored themes) by following the below steps:

  1. Go to your app/App_Resources/Android/values/ and open styles.xml file.
  2. Add a theme extending NoActionBar theme as below and use your color codes in the attributes:
<style name="ApplozicThemeCustom" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#FF0000</item>
        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">#00FF00</item>
        <!-- colorAccent is used as the default value for colorControlActivated which is used to tint widgets -->
        <item name="colorAccent">#0000FF</item>
        <item name="windowActionModeOverlay">true</item>
    </style>

Then open Go to your app/App_Resources/Android/AndroidManifest.xml file and add the below activities in the file (inside application tag):

<activity android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"  android:configChanges="keyboardHidden|screenSize|locale|smallestScreenSize|screenLayout|orientation"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:parentActivityName="com.tns.NativeScriptActivity"
            android:theme="@style/ApplozicThemeCustom"
            tools:node="replace">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.tns.NativeScriptActivity" />
        </activity>

        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ContactSelectionActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            tools:node="replace"
            android:theme="@style/ApplozicThemeCustom">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />
        </activity>
        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ChannelCreateActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            tools:node="replace"
            android:theme="@style/ApplozicThemeCustom">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />
        </activity>
        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.people.activity.MobiComKitPeopleActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:label="@string/app_name"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            tools:node="replace"
            android:theme="@style/ApplozicThemeCustom"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />

            <intent-filter>
                <action android:name="android.intent.action.SEARCH" />
            </intent-filter>

            <intent-filter>
                <action android:name="android.intent.action.SEND" />
                <category android:name="android.intent.category.DEFAULT" />

                <data android:mimeType="image/*" />
                <data android:mimeType="audio/*" />
                <data android:mimeType="video/*" />
                <data android:mimeType="text/plain" />
            </intent-filter>

            <meta-data
                android:name="android.app.searchable"
                android:resource="@xml/searchable_contacts" />
        </activity>

        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.MobicomLocationActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            tools:node="replace"
            android:theme="@style/ApplozicThemeCustom"
            android:windowSoftInputMode="adjustResize" />

        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.MobiComAttachmentSelectorActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            android:theme="@style/ApplozicThemeCustom"
            tools:node="replace"
            android:windowSoftInputMode="stateHidden|adjustResize">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />
        </activity>

        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ChannelNameActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
            tools:node="replace"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            android:theme="@style/ApplozicThemeCustom" />
        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ChannelInfoActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
           tools:node="replace"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            android:theme="@style/ApplozicThemeCustom">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />

Add the tools attribute to your manifest tag as below:

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

Your complete app/App_Resources/Android/AndroidManifest.xml will look like below:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="org.nativescript.HelloWorld"
    android:versionCode="1"
    android:versionName="1.0">

    <supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="true" />

    <uses-sdk
        android:minSdkVersion="17"
        android:targetSdkVersion="27" />

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:name="com.tns.NativeScriptApplication"
        android:allowBackup="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@style/ApplozicThemeCustom">

        <activity
            android:name="com.tns.NativeScriptActivity"
            android:configChanges="keyboardHidden|orientation|screenSize"
            android:label="@string/title_activity_kimera"
            android:theme="@style/LaunchScreenTheme">

            <meta-data
                android:name="SET_THEME_ON_LAUNCH"
                android:resource="@style/AppTheme" />

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.tns.ErrorReportActivity" />

        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            android:configChanges="keyboardHidden|screenSize|locale|smallestScreenSize|screenLayout|orientation"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:parentActivityName="com.tns.NativeScriptActivity"
            android:theme="@style/ApplozicThemeCustom"
            tools:node="replace">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.tns.NativeScriptActivity" />
        </activity>

        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ContactSelectionActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            tools:node="replace"
            android:theme="@style/ApplozicThemeCustom">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />
        </activity>
        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ChannelCreateActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            tools:node="replace"
            android:theme="@style/ApplozicThemeCustom">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />
        </activity>
        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.people.activity.MobiComKitPeopleActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:label="@string/app_name"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            tools:node="replace"
            android:theme="@style/ApplozicThemeCustom"
            android:windowSoftInputMode="adjustResize">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />

            <intent-filter>
                <action android:name="android.intent.action.SEARCH" />
            </intent-filter>

            <intent-filter>
                <action android:name="android.intent.action.SEND" />
                <category android:name="android.intent.category.DEFAULT" />

                <data android:mimeType="image/*" />
                <data android:mimeType="audio/*" />
                <data android:mimeType="video/*" />
                <data android:mimeType="text/plain" />
            </intent-filter>

            <meta-data
                android:name="android.app.searchable"
                android:resource="@xml/searchable_contacts" />
        </activity>

        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.MobicomLocationActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            tools:node="replace"
            android:theme="@style/ApplozicThemeCustom"
            android:windowSoftInputMode="adjustResize" />

        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.MobiComAttachmentSelectorActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            android:theme="@style/ApplozicThemeCustom"
            tools:node="replace"
            android:windowSoftInputMode="stateHidden|adjustResize">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />
        </activity>

        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ChannelNameActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
            tools:node="replace"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            android:theme="@style/ApplozicThemeCustom" />
        <activity
            android:name="com.applozic.mobicomkit.uiwidgets.conversation.activity.ChannelInfoActivity"
            android:configChanges="keyboardHidden|screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTop"
           tools:node="replace"
            android:parentActivityName="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity"
            android:theme="@style/ApplozicThemeCustom">
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value="com.applozic.mobicomkit.uiwidgets.conversation.activity.ConversationActivity" />
        </activity>
    </application>
</manifest>

This will change the toolbar color, status bar color across all the Activities/Screens in applozic.

Changing attributes in applozic-settings.json file

Applozic provides an easy to customise setting for changing the colors/text/background of different icons and layouts. Download the applozic-settings.json file from here and add it in your app/platforms/android/app/src/main/assets directory. If the directory does not exists, create it. Refer here for the attributes and customisation you can do using applozic-settings.json file.

❗️

Make sure you backup your customised applozic-settings.json file somewhere. Since NativeScript hasn't provided a way to add assets in App_Resources, we have to add it under platforms directory. Every time you remove the platforms from the project, you'll lose your customisations in applozic-settings.json file. So every time you remove and add platforms, you'll need to create the assets directory again and add the file there again.

iOS

Changing iOS's default theme

You can change the text colors, background colors, etc for the default UI provided by Applozic iOS SDK. Open <Your-App>/node_modules/nativescript-applozic-chat/applozic-chat.ios.js file and change the values for the parameters in the defaultSettings function. Below is the function and its parameters:

❗️

Make sure to back up your applozic-chat.ios.js file after modifying it. You will have to do the changes every time you remove the ios platform and add it again.

ApplozicChat.prototype.defaultSettings = function () {
  ALApplozicSettings.setStatusBarBGColor(UIColor.colorWithRedGreenBlueAlpha(66.0 / 255, 173.0 / 255, 247.0 / 255, 1));
        ALApplozicSettings.setColorForNavigation(UIColor.colorWithRedGreenBlueAlpha(66.0 / 255, 173.0 / 255, 247.0 / 255, 1));
        ALApplozicSettings.setColorForNavigationItem(UIColor.whiteColor);
        ALApplozicSettings.hideRefreshButton(false);
        ALUserDefaultsHandler.setNavigationRightButtonHidden(false);
        ALUserDefaultsHandler.setBottomTabBarHidden(false);
        ALApplozicSettings.setTitleForConversationScreen("Chats");
        ALApplozicSettings.setCustomNavRightButtonMsgVC(false);
        ALApplozicSettings.setTitleForBackButtonMsgVC("Back");
        ALApplozicSettings.setTitleForBackButtonChatVC("Back");
        ALApplozicSettings.setSendMsgTextColor(UIColor.whiteColor);
        ALApplozicSettings.setReceiveMsgTextColor(UIColor.grayColor);
        ALApplozicSettings.setColorForReceiveMessages(UIColor.colorWithRedGreenBlueAlpha(255 / 255, 255 / 255, 255 / 255, 1));
        ALApplozicSettings.setColorForSendMessages(UIColor.colorWithRedGreenBlueAlpha(66.0 / 255, 173.0 / 255, 247.0 / 255, 1));
        ALApplozicSettings.setCustomMessageBackgroundColor(UIColor.lightGrayColor);
        ALApplozicSettings.setCustomMessageFont("Helvetica");
        ALApplozicSettings.setDateColor(UIColor.colorWithRedGreenBlueAlpha(51.0 / 255, 51.0 / 255, 51.0 / 255, 0.5));
        ALApplozicSettings.setMsgDateColor(UIColor.blackColor);
        ALApplozicSettings.setAbuseWarningText("AVOID USE OF ABUSE WORDS");
        ALApplozicSettings.setMessageAbuseMode(true);
        ALApplozicSettings.setReceiverUserProfileOption(false);
        ALApplozicSettings.setMaxCompressionFactor(0.1);
        ALApplozicSettings.setMaxImageSizeForUploadInMB(3);
        ALApplozicSettings.setMultipleAttachmentMaxLimit(5);
        ALApplozicSettings.setGroupOption(true);
        ALApplozicSettings.setGroupInfoDisabled(false);
        ALApplozicSettings.setGroupInfoEditDisabled(true);
        ALApplozicSettings.setGroupExitOption(true);
        ALApplozicSettings.setGroupMemberAddOption(true);
        ALApplozicSettings.setGroupMemberRemoveOption(true);
        ALApplozicSettings.setVisibilityForNoMoreConversationMsgVC(false);
        ALApplozicSettings.setEmptyConversationText("You have no conversations yet");
        ALApplozicSettings.setVisibilityForOnlineIndicator(true);
        ALApplozicSettings.setColorForSendButton(UIColor.colorWithRedGreenBlueAlpha(66.0 / 255, 173.0 / 255, 247.0 / 255, 1));
        ALApplozicSettings.setColorForTypeMsgBackground(UIColor.clearColor);
        ALApplozicSettings.setMsgTextViewBGColor(UIColor.lightGrayColor);
        ALApplozicSettings.setPlaceHolderColor(UIColor.grayColor);
        ALApplozicSettings.setVisibilityNoConversationLabelChatVC(true);
        ALApplozicSettings.setBGColorForTypingLabel(UIColor.colorWithRedGreenBlueAlpha(242 / 255.0, 242 / 255.0, 242 / 255.0, 1));
        ALApplozicSettings.setTextColorForTypingLabel(UIColor.colorWithRedGreenBlueAlpha(51.0 / 255, 51.0 / 255, 51.0 / 255, 0.5));
        ALApplozicSettings.setColorForToastText(UIColor.blackColor);
        ALApplozicSettings.setColorForToastBackground(UIColor.grayColor);
        ALApplozicSettings.setUnreadCountLabelBGColor(UIColor.purpleColor);
        ALApplozicSettings.setCustomClassName("ALChatManager");
        ALUserDefaultsHandler.setFetchConversationPageSize(60);
        ALApplozicSettings.setMaxTextViewLines(4);
        ALUserDefaultsHandler.setDebugLogsRequire(true);
        ALApplozicSettings.setFontFace("Helvetica");
        ALApplozicSettings.replyOptionEnabled(true);
        ALUserDefaultsHandler.setGoogleMapAPIKey("AIzaSyBnWMTGs1uTFuf8fqQtsmLk-vsWM7OrIXk");
        ALApplozicSettings.setUserDeletedText("User has been deleted");
        ALApplozicSettings.setChatListTabIcon("");
        ALApplozicSettings.setChatListTabTitle("");
        ALApplozicSettings.setProfileTabTitle("");
    };

Customizing attachment options.

You can hide particular attachment options or the attachment button itself by using the below settings. You need to use the below codes to hide different options from the action sheet.

:camera // hide camera
:gallery // hide attachment form gallery
:audio //hide audio attachment options
:video //hide video attachment options
:location //hide location sharing options
:blockUser //hide block user options
:shareContact //hide contact sharing options
:attachmentbutton //hide attachment button

For Example, In the below code we are hiding the location option. If you want to hide some more options you can add object like the below to hide them:

NOTE: This code will need to add in the function defaultSettings of file <Your-App>/node_modules/nativescript-applozic-chat/applozic-chat.ios.js

const attachmentOptionToHide =  NSMutableArray.new();
       attachmentOptionToHide.addObject(":location");
   ALApplozicSettings.setHideAttachmentsOption(attachmentOptionToHide.mutableCopy());

Updated 9 months ago


NativeScript


NativeScript customisation

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.