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.
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 |
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.
Make a .env file in the playground directory following the .env[example] file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent