React JS Chat Compoment
Clone this github repo go to React-JS-Chat folder run npm install and npm start command.
Open source Chat and Messaging SDK that lets you add real time chat and messaging in your mobile (android, iOS) applications and website.
Signup at https://www.applozic.com/signup.html to get the application key.
Documentation: Applozic Web (Javascript) Chat & Messaging Plugin Documentation
You can modify css and js files based on your design, files are present under /React-JS-Chat/public/applozic/css/app/fullview and /React-JS-Chat/public/applozic/js/app/fullview folder .
One to one and Group Chat
Image capture
Photo sharing
File attachment
Location sharing
Push notifications
In-App notifications
Online presence
Last seen at
Unread message count
Typing indicator
Message sent, delivery report
Offline messaging
Multi Device sync
Application to user messaging
Customized chat bubble
UI Customization Toolkit
Cross Platform Support (iOS, Android & Web)
- Add applozic folder(/React-JS-Chat/public/applozic)in public folder of your project.
- Copy applozic.html (/React-JS-Chat/public/applozic) code and add it to your header or footer(Which is common to all your code).
- Call Following script in your login success
<script type="text/javascript">
window.applozic.init({
appId: applozicApplicationKey, //Get your application key from https://www.applozic.com
userId: userId, //Logged in user's id, a unique identifier for user
userName: username, //User's display name
imageLink : '', //User's profile picture url
email : '', //optional
contactNumber: '', //optional, pass with internationl code eg: +13109097458
desktopNotification: true,
source: '1', // optional, WEB(1),DESKTOP_BROWSER(5), MOBILE_BROWSER(6)
notificationIconLink: 'https://www.applozic.com/favicon.ico', //Icon to show in desktop notification, replace with your icon
authenticationTypeId: 1, //1 for password verification from Applozic server and 0 for access Token verification from your server
accessToken: '', //optional, leave it blank for testing purpose, read this if you want to add additional security by verifying password from your server https://www.applozic.com/docs/configuration.html#access-token-url
locShare: true,
googleApiKey: "AIzaSyDKfWHzu9X7Z2hByeW4RRFJrD9SizOzZt4", // your project google api key
googleMapScriptLoaded : false, // true if your app already loaded google maps script
mapStaticAPIkey: "AIzaSyCWRScTDtbt8tlXDr6hiceCsU83aS2UuZw",
autoTypeSearchEnabled : true, // set to false if you don't want to allow sending message to user who is not in the contact list
loadOwnContacts : false, //set to true if you want to populate your own contact list (see Step 4 for reference)
olStatus: false, //set to true for displaying a green dot in chat screen for users who are online
onInit : function(response) {
if (response === "success") {
// login successful, perform your actions if any, for example: load contacts, getting unread message count, etc
} else {
// error in user login/register (you can hide chat button or refresh page)
}
},
contactDisplayName: function(otherUserId) {
//return the display name of the user from your application code based on userId.
return "";
},
contactDisplayImage: function(otherUserId) {
//return the display image url of the user from your application code based on userId.
return "";
},
onTabClicked: function(response) {
// write your logic to execute task on tab load
// object response = {
// tabId : userId or groupId,
// isGroup : 'tab is group or not'
// }
}
});
</script>