About Lazychat

Lazychat is a frontend chat module which can be integrated in any react project. To make it work user has to get the api-key and initialize the project with the api-key in backend with lazychat-sdk and generate client token and return to the client and save it in the session storage as "lazychat_key".

Features

• Create and manage channels with lazychat-sdk from your project backend
• Send files
• Send Text messages

Tech

Lazychat uses a number of open source projects to work properly: ReactJS, Node, Typescript External modules : axios, notistack, react-spinners, socket.io-client

Installation

Lazychat requires [React] v18.2.0+ to run.

Install the package and start the server.

npm install lazychat

Add Lazychat component in your React Application

import Lazychat from 'lazychat';

const App = () => {
    return (
        <div>
            <Lazychat />
        </div>
    );
}

You can pass additional arguments to Lazychat component and all these are optional

• channelId - By default, the first channel in the list will be opened, If you want to open particular channel then pass the id of the channel.
• primaryColor - Theme/Main color of the Lazychat component.
• secondaryColor
• errorColor
• fontColor

<Lazychat channelId={""} primaryColor={""} secondaryColor={""} fontColor={""} errorColor={""} />

NOTE : If you want to keep track of channels like opening particular channel in frontend when you visit a particular page then you should store channelIds in your project database.

Example setup:

import {useEffect} from 'react';
import Lazychat from 'lazychat';

const MyApp = () => {

    useEffect(() => {
        handleGetLazychatToken();
    }, []);
    
    const handleGetLazychatToken = async () => {
        const response = await fetch("http://your_backend_url/endpoint_path");
        const data = response.json();
        sessionStorage.setItem('lazychat_key', data.token);
    }

    return (
        <Lazychat />
    );
}

NOTE : Every page reload the client has to request for lazychat token from project backend and store in session storage