README.md

EmbeddedChat

An easy to use full-stack component (ReactJS + backend behaviors) embedding Rocket.Chat into your webapp.

EmbeddedChat is a full-stack React component node module of the RocketChat application that is fully configurable, extensible, and flexible for use. It is tightly bound with the RocketChat server using Rocket.Chat nodejs SDK and its UI using RocketChat's Fuselage Design System.

Installation

npm i embeddedchat

Usage

Just import the component,

import { RCComponent } from 'embeddedchat';

and use it,

<RCComponent
  isClosable={true}
  setClosableState={setClosableState}
  moreOpts={true}
  width="100%"
  height="40vh"
  GOOGLE_CLIENT_ID={process.env.REACT_APP_GOOGLE_CLIENT_ID}
  host={'http://localhost:3000'}
  roomId={'GENERAL'}
  channelName="Customer Service"
  anonymousMode={false}
  showAvatar={false}
  showRoles={false}
/>

Props

Read this wiki page for more info on each prop.

prop	description
isClosable	is the component closable?, defaults to false.
setClosableState	the reusable setState, which will track the opening and closing of EmbeddedChat. It is a setState fn => which toggles the previous state.
moreOpts	it adds a kebab menu with added functionalities like showing pinned, starred, thread messages
width	width of the component
height	height of the component (based on the ChatBody)
host	your Rocket.Chat host domain, defaults to http://localhost:3000 (the dev server)
GOOGLE_CLIENT_ID	it is the google client id that you will receive after creating a project in google console
roomId	the public room's id that you want to subscribe to
channelName	the fallback channel name to be present on the chat header
anonymousMode	if the user can see the chat without logging in
showAvatar	show the user's avatar in the chat component, defaults to false
showRoles	show the user's roles in the chat component, defaults to false
enableThreads	enable RocketChat's style thread messages, defaults to false

Setting up Authentication

Follow this documentation to receive the GOOGLE_CLIENT_ID as well as to setup Google SSO for EmbeddedChat.

Development

Local Setup

npm i
cd playground && npm i
npm run dev # at the root folder --> EMBEDDEDCHAT

It will open up a playground react app at http://localhost:4000. Make a .env file in the playground directory following the .env[example] file.

Gitpod Setup

Make a .env file in the playground directory following the .env[example] file.