Web Chat UI Customization and Settings

Pre-built customizable chat UI

Download source code from Github and add it to your project.

Script mentioned in Installation section is not required when using the source code version directly.

There are 2 UI samples available:

  • Full view layout
  • Sidebox layout

Full view layout


Open fullview.html file from:

Copy the scripts and HTML code to your web page in the same order as done in fullview.html

For any feature and design modification, following 2 file can be modified:



Sidebox layout


Instruction: Enter your App Id in application key.

Add HTML, Javascript and CSS code to your web page:

Open sidebox.html sample file from:

Copy the scripts and HTML code to your web page in the same order as done in sidebox.html

For any feature and design modification, following 2 file can be modified:



Events subscription

Using events callback, you can subscribe to the following events.

$applozic.fn.applozic('subscribeToEvents', {
                 onConnect: function () {
                       //User subscribed successfully
                 onConnectFailed: function () {
                       //connection failed
                 onMessageDelivered: function (obj) {
                       //message delivered obj json: {'messageKey': 'delivered-message-key'}
                 onMessageRead: function (obj) {
                       //message read obj json: {'messageKey': 'read-message-key'}
                 onMessageReceived: function (obj) {
                       //message received
                 onMessageSent: function (obj) {
                       //message sent
                 onMessageSentUpdate: function (obj) {
                       //message sent confirmation: {'messageKey': 'sent-message-key'}
                 onMessageDeleted: function (obj) {
                       //message delete obj json : {'messageKey': 'deleted-message-key'}
                 onConversationDeleted: function (obj) {
                       //all messages deleted obj json : {'userId': userId}
                 onUserConnect: function (obj) {
                       //user from the contact list came online: {'userId': 'connected-user-Id'}
                 onUserDisconnect: function (obj) {
                       //user from the contact list went offline: {'userId': 'connected-user-Id'}
                 onUserBlocked: function (obj) {
                       //user blocks someone or gets blocked by someone: {'status': 'BLOCKED_TO or BLOCKED_BY', 'userId': userId}
                 onUserUnblocked: function (obj) {
                       //user unblocks someone or get unblocked by someone: {'status': 'BLOCKED_TO or BLOCKED_BY', 'userId': userId}
                 onUserActivated: function () {
                       //user is activated by app admin
                 onUserDeactivated: function () {
                       //user is deactivated by app admin

What's Next


Build your UI from scratch

How to Customise Our Sidebox Chat Plugin
CSS file to edit:
JS file to edit:
HTML file to edit:

Clone our public repo code

Chat Launcher CSS

id : mck-sidebox-launcher
Class : mck-sidebox-launcher

Properties you can change
z-index: 2243000;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;

To change Launcher Color change background color in css .mck-sidebox-launcher .mck-button-launcher

Resizing the chat window

id: mck-sidebox
Class : mck-sidebox

Properties you can change
position: fixed !important;
height: 100% !important;
right: 0 !important;
left: auto !important;
margin: 0 !important;
border: 0 !important;
padding-left: 0px !important;
z-index: 22435000 !important;
box-shadow: none !important;
border-radius: 0 !important;
line-height: 18px;
min-width: 310px;

For Conversation Template Changes (Ist screen)

Below is conversation template.(Inside _this.addContact())

var contactbox = '<li id="li-${contHtmlExpr}" class="${contIdExpr}" data-msg-time="${msgCreatedAtTimeExpr}">' +
  '<a class="${mckLauncherExpr}" href="#" data-mck-conversationid="${conversationExpr}" data-mck-id="${contIdExpr}" data-isgroup="${contTabExpr}">' +
  '<div class="mck-row" title="${contNameExpr}">' +
  '<div class="mck-conversation-topic mck-truncate ${contHeaderExpr}">${titleExpr}</div>' +
  '<div class="blk-lg-3">{{html contImgExpr}}</div>' +
  '<div class="blk-lg-9">' + '<div class="mck-row">' +
  '<div class="blk-lg-8 mck-cont-name mck-truncate"><div class="mck-ol-status ${contOlExpr}"><span class="mck-ol-icon" title="${onlineLabel}"></span>&nbsp;</div><strong>${contNameExpr}</strong></div>' +
  '<div class="mck-text-muted move-right mck-cont-msg-date mck-truncate blk-lg-4">${msgCreatedDateExpr}</div></div>' +
  '<div class="mck-row">' + '<div class="mck-cont-msg-wrapper blk-lg-6 mck-truncate msgTextExpr"></div>' +
  '<div class="mck-unread-count-box move-right mck-truncate ${contUnreadExpr}"><span class="mck-unread-count-text">{{html contUnreadCount}}</span></div>' +

We are adding details to this template using below code

var contactList = [{
                    contHtmlExpr: contHtmlExpr,
                    contIdExpr: contact.contactId,
                    contTabExpr: isGroupTab,
                    msgCreatedAtTimeExpr: message ? message.createdAtTime : '',
                    mckLauncherExpr: MCK_LAUNCHER,
                    contImgExpr: imgsrctag,
                    contOlExpr: olStatus,
                    onlineLabel: MCK_LABELS['online'],
                    contUnreadExpr: unreadCountStatus,
                    contUnreadCount: unreadCount,
                    contNameExpr: displayName,
                    conversationExpr: conversationId,
                    contHeaderExpr: isContHeader,
                    titleExpr: title,
                    groupUserCountExpr: isGroupTab ? contact.userCount : '',
                    displayGroupUserCountExpr: displayCount ? "vis" : "n-vis",
                    msgCreatedDateExpr: message ? mckDateUtils.getTimeOrDate(message.createdAtTime, true) : ''

If you want to add extra details in contact div then you can add that thing in above code and can replace these values in contactbox.

For message Template Change(Inside _this.addMessage())

var markup = '<div name="message" data-msgdelivered="${msgDeliveredExpr}" data-msgsent="${msgSentExpr}" data-msgtype="${msgTypeExpr}" data-msgtime="${msgCreatedAtTime}" data-msgcontent="${replyIdExpr}" data-msgkey="${msgKeyExpr}" data-contact="${toExpr}" class="mck-m-b ${msgKeyExpr} ${msgFloatExpr} ${msgAvatorClassExpr}">' +
                '<div class="mck-clear">' +
                '<div class="blk-lg-12">' +
                '<div class="mck-msg-avator blk-lg-3">{{html msgImgExpr}}</div>' +
                '<div class="mck-msg-box ${msgClassExpr}">' +
                '<div class= "move-right mck-msg-text"></div>' +
                '<div class ="mck-msg-reply mck-verticalLine ${msgReplyToVisibleExpr}">' +
                '<div class="mck-msgto">${msgReplyTo} </div>' +
                '</div>' +
                '<div class ="mck-msg-reply mck-verticalLine ${msgReplyDivExpr}">' +
                '<div class="mck-msgreply-border ${textreplyVisExpr}">${msgReply}</div>' +
                '<div class="mck-msgreply-border ${msgpreviewvisExpr}">{{html msgPreview}}</div>' +
                '</div>' +
                '<div class="${nameTextExpr} ${showNameExpr}"><span class="mck-ol-status ${contOlExpr}"><span class="mck-ol-icon" title="${onlineLabel}"></span>&nbsp;</span>${msgNameExpr}</div>' +
                '<div class="mck-file-text notranslate mck-attachment downloadimage ${downloadIconVisibleExpr}" data-filemetakey="${fileMetaKeyExpr}" data-filename="${fileNameExpr}" data-fileurl= "${fileUrlExpr}" data-filesize="${fileSizeExpr}"><div>{{html fileExpr}}</div> {{html downloadMediaUrlExpr}}</div>' +
                '<div class="mck-msg-text mck-msg-content"></div>' +
                '</div>' +
                '</div>' +
                '<div class="${msgFloatExpr}-muted mck-text-light mck-text-muted mck-text-xs mck-t-xs">${createdAtTimeExpr} <span class="${statusIconExpr} mck-message-status"></span></div>' +
                '</div>' +
                '<div class="n-vis mck-context-menu">' +
                '<ul>' +
                '<li><a class="mck-message-forward">${msgForwardExpr}</a></li>' +
                '<li><a class="mck-message-delete">${msgDeleteExpr}</a></li>' +
                '<li><a class="mck-message-reply">${msgReplyExpr}</a></li>' +
                '</ul>' +
                '</div>' +

We are adding details to this template using below code

var msgList = [{
                    msgReply: replyMsg ? replyMsg.message + "\n" : '',
                    msgReplyTo: replyMsg ? replyTo + "\n" : '',
                    msgReplyDivExpr: replyMsg ? 'vis' : 'n-vis',
                    msgReplyToVisibleExpr: msgReplyToVisible,
                    msgPreview: msgpreview ? _this.getImageForReplyMessage(replyMsg) :"",
                    msgpreviewvisExpr: msgpreviewVis,
                    textreplyVisExpr: textreply,
                    msgKeyExpr: msg.key,
                    msgDeliveredExpr: msg.delivered,
                    msgSentExpr: msg.sent,
                    msgCreatedAtTime: msg.createdAtTime,
                    msgTypeExpr: msg.type,
                    msgDeleteExpr: MCK_LABELS['delete'],
                    msgReplyExpr: MCK_LABELS['reply'],
                    msgForwardExpr: MCK_LABELS['forward'],
                    msgSourceExpr: msg.source,
                    statusIconExpr: statusIcon,
                    contactExpr: contactExpr,
                    msgAvatorClassExpr: msgAvatorClassExpr,
                    showNameExpr: showNameExpr,
                    msgNameExpr: displayName,
                    msgImgExpr: imgsrctag,
                    nameTextExpr: nameTextExpr,
                    msgFloatExpr: floatWhere,
                    replyIdExpr: replyId,
                    createdAtTimeExpr: mckDateUtils.getDate(msg.createdAtTime),
                    msgFeatExpr: msgFeatExpr,
                    replyMessageParametersExpr: replyMessageParameters,
                    downloadMediaUrlExpr: _this.getFileAttachment(msg),
                    msgClassExpr: messageClass,
                    msgExpr: frwdMsgExpr,
                    selfDestructTimeExpr: msg.timeToLive,
                    fileMetaKeyExpr: msg.fileMetaKey,
                    downloadIconVisibleExpr: downloadIconVisible,
                    fileExpr: _this.getFilePath(msg),
                    fileUrlExpr: _this.getFileurl(msg),
                    fileNameExpr: fileName,
                    fileSizeExpr: fileSize,
                    contOlExpr: olStatus

If you want to add extra details in message div then you can add that thing in above code and can replace these values in

To change profile image CSS in contactList

Class: mck-videocall-image class

Properties you can change
cursor: pointer;
float: left;
width: 50px;
height: 55px;
margin-right: 12px;
border-radius: 50%;
font-size: 25px;
text-align: center;
line-height: 50px;

To make changes in unread count CSS

Class: mck-unread-count-box

Properties you can change
width: 22px;
height: 22px;
background-color: red;
border-radius: 110px;

What’s Next
Did this page help you?