A jQuery plugin to integrate messaging into your web page for real time communication between users via Applozic messaging platform and also to see your latest conversations and past chat history. Add Applozic messaging plugin into your web application :
$3
Integrate messaging into your mobile apps and website without developing or maintaining any infrastructure.
#### Step 1: Add Plugin Add the Applozic Chat plugin script before closing of ``
` into your web page `
`
#### Step 2: Login/Register user Login or Register with userId and username Applozic will create a new user if the user doesn't exists. userId is the unique identifier for any user, it can be anything like email, phone number or uuid from your database. Add the below code just after Step 1.`
`
It can also be called from any event, for example: on click of a button.
Note :
1) desktopNotification support only for chrome browser, notificationIconLink will be displayed in desktop notification.
// Contacts Array var contactsJSON = [{"userId": "USER_1", "displayName": "Devashish", "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png", // image url (optional) "imageData" :"Base64 encoded image data" // or image data (optional) }, {"userId": "USER_2", "displayName": "Adarsh", "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png", // image url (optional) "imageData" :"Base64 encoded image data" // or image data (optional) }, {"userId": "USER_3", "displayName": "Shanki", "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png", // image url (optional) "imageData" :"Base64 encoded image data" // or image data (optional) } ];
// Function calling inside onInit(from #Step 2) after plugin initialize successfully onInit : function(response) { if (response === "success") { // calling function load contacts $applozic.fn.applozic('loadContacts', {"contacts":contactsJSON}); } else { // error in user login/register (you can hide chat button or refresh page) } }
//Set loadOwnContacts to true from Step 2 loadOwnContacts : true,
`
NOTE- Call loadContacts function only after plugin initialize callback (see Step 2 onInit function for reference).
#### Step 5: Group Messaging Group have 2 identifiers: groupId: Auto generated by Applozic clientGroupId (optional): In case if you already have group identifier on your applicaiton side, use clientGroupId in all functions.
##### Open group chat
` $applozic.fn.applozic('loadGroupTab', groupId); // group Id returned in response to group create api `
##### Remove User from Group (only for Group Admin) ` $applozic.fn.applozic('removeGroupMember',{'groupId': groupId, 'clientGroupId' : clientGroupId, //use either groupId or clientGroupId 'userId': userIdToRemove, 'callback': function(response) {console.log(response);} }); `
##### Leave Group ` $applozic.fn.applozic('leaveGroup', {'groupId' : groupId, 'clientGroupId' : clientGroupId, //use either groupId or clientGroupId 'callback' :function(response){console.log(response);} }); `
##### Update Group ` $applozic.fn.applozic('updateGroupInfo', {'groupId' : groupId 'clientGroupId' : clientGroupId, //use either groupId or clientGroupId, 'name' : groupName, // optional 'imageUrl' : '', //optional 'users': [ // required only if want to update user role { userId:userIdToUpdate, // required role:3, // (required) USER(0), ADMIN(1), MODERATOR(2), MEMBER(3) }], 'callback' : function(response){console.log(response);}}); `
##### Get group list
` $applozic.fn.applozic('getGroupList', {'callback':function (response) { //write your logic}}); `
Sample response:` {'status' : 'success' , // or error 'data': [ {'id': groupId, 'name' : groupName', 'type' : '2', // 1,2 or 5 (private, public or broadcast) 'memberName':[], // Array of group member ids 'adminName': '', // Put group admin's userId 'removedMembersId' [], // Array including removed or left members Id 'unreadCount' : '10' // total unread count of messages for current logged in user }] }] } `
#### Step 6: Context (Topic) based Chat
Add the following in window.applozic.init call:
` topicBox: true, getTopicDetail: function(topicId) { //Based on topicId, return the following details from your application return {'title': 'topic-title', // Product title 'subtitle': 'sub-title', // Product subTitle or Product Id 'link' :'image-link', // Product image link 'key1':'key1' , // Small text anything like Qty (Optional) 'value1':'value1', // Value of key1 ex-10 (number of quantity) Optional 'key2': 'key2', // Small text anything like MRP (product price) (Optional) 'value2':'value2' // Value of key2 ex-$100 (Optional) }; } `
Add a chat button inside your web page using `a` tag and add the following:
` Class Attribute - applozic-wt-launcher Data Attriutes - mck-id, mck-name and mck-topicid `` mck-id : User Id of the user with whom to initiate the chat mck-name : Display name of the user with whom to initiate the chat mck-topicId : Unique identifier for the topic/product `
We provide support over at StackOverflow when you tag using applozic, ask us anything.
Applozic is the best jquery chat plugin for instant messaging, still not convinced? Write to us at github@applozic.com and we will be happy to schedule a demo for you.
###Free Javascript (jQuery) Chat Plugin Special plans for startup and open source contributors, write to us at github@applozic.com
