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.
Check out our Wiki and FAQ page for in-depth guides and answers to common questions. Whether you're a newbie or an expert, you'll find valuable insights to enhance your experience.
For those of you who love diving into the technical details, we have a Roots of EmbeddedChat wiki that delves into the project's internals. Gain a deeper understanding of how everything works behind the scenes and unlock the full potential of the project.
npm i embeddedchatJust 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}
/>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 |
| headerColor | sets the background color of the chat header, providing visual customization. |
| toastBarPosition | defines where the toast bar appears in the chat interface, allowing you to control its position for better user experience. |
Follow this documentation to receive the GOOGLE_CLIENT_ID as well as to setup Google SSO for EmbeddedChat.
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.
Above command might not work if you are a Windowsuser because in package.json the scripts are written according to Linux environment so do these steps :-
step 1:- clone the forked repo in your vs code
step 2:- go to EmbeddedChat -> package.json
change
"scripts":{
"build": "NODE_ENV=development rollup -c --context=window",
"build:prod": "NODE_ENV=production rollup -c --context=window",
}
to ------>
"scripts":{
"build": "set NODE_ENV=development && rollup -c --context=window",
"build:prod": "set NODE_ENV=production && rollup -c --context=window",
}
step 3:- go to embeddedChat -> playground->package.json
change
"scripts":{
"start": "PORT=4000 node ../node_modules/react-scripts/bin/react-scripts.js start",
}
to ------>
"scripts":{
"start": " set PORT=4000 && node ../node_modules/react-scripts/bin/react-scripts.js start",
}
if npm i gives error try npm i --legacy-peerand error might be solved.
Make a .env file in the playground directory following the .env[example] file.
