Git Product home page Git Product logo

react-js-chat's Introduction

React-JS-Chat

React JS Chat Compoment

Usage

Clone this github repo go to React-JS-Chat folder run npm install and npm start command.

Overview

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 .

Applozic One to One and Group Chat SDK

Features:

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)

To Integrate Applozic Chat in Your Project

  1. Add applozic folder(/React-JS-Chat/public/applozic)in public folder of your project.
  2. Copy applozic.html (/React-JS-Chat/public/applozic) code and add it to your header or footer(Which is common to all your code).
  3. 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>

react-js-chat's People

Contributors

devashishmamgain avatar kusum-dhoundiyal avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.