Skip to content

Roots of EmbeddedChat

Jump to bottom
Sidharth Mohanty edited this page Sep 19, 2022 · 7 revisions

EmbeddedChat as a whole

I've documented my entire journey (ups and downs, highs and lows) within my blogs. If you want to go through my entire journey you can check them out:

Here I want to mention the key design decisions we took through the entire 12 weeks to make this happen!

EmbeddedChat is just a React component to embed a chat solution into a web app easily and quickly.

EmbeddedChat as a component,

import { RCComponent } from 'yet-to-be-decided'

// 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}
  isFullScreenFromStart={false}
/>

Most of the props are self-explanatory, but still to be clear let's explore each of them one by one.

isClosable

If you want to make the EmbeddedChat stay forever, then assign it as false. Set it to true if you're going to make EmbeddedChat closable.

setClosableState

This is the setState function that will be used for toggling EmbeddedChat to show or hide. Basically, the idea is to reuse the state that you were going to use in a button to pass it to EmbeddedChat to use it there also.

// For example
const [closable, setClosable] = useState(false)

// you will be using a button or something like this,
<button onClick={() => setClosable(prev => !prev)}>Open button</button>

// so we are just reusing the setState here with same functionality,
<RCComponent isClosable={true} setClosable={setClosable} />

moreOpts

If you decide to give users some extra functionalities like -

  • Channel Threads
  • Channel Pinned Messages
  • Channel Starred Messages

You can set moreOpts={true}

width

This is the total width of the component. This maps to the most outer Box component to make it responsive across all screen sizes.

height

This is the height that will map to the Chat Body (where we display all the messages). To make it map to the whole page, you can set height as %s and if you want it to show within some pixel range or view height range, you can provide that too. For instance, 83vh will map to the component being full screen.

GOOGLE_CLIENT_ID

The Google client Id which you are going to receive after successfully setting up the OAuth Step(mentioned in README). Basically, you can follow the steps and set up OAuth from here

Why are we going with Google SSO OAuth?

We went with this approach because, a user visiting the web app of some company can just be someone who wants to roam around, chat around a bit, etc but nothing serious. So, by redirecting them to a completely new web app(or a RocketChat instance of that company) would drive away users (because of the whole unnecessary registration steps). So by this, we can log in users which are already present in that RC Instance(provided they have logged in with Google previously, else the previous account if linked to the same email will be superseded with the new Google account, but don’t worry no data will be lost in that process) and also the unregistered users will be able to log in and chat in that single click(this will create a new user in that RC instance),

host

This is the host URL of the RocketChat instance,

  • in dev, http://localhost:3000
  • in prod, yourrcinstanceurl.com

roomId

This is the rid of a channel.

Pro-tip: While accessing a channel, go to inspect -> network tab -> getRoomByRole, click on it. Its response should have the id which is the rid. For the main room (GENERAL), the id is also GENERAL.

channelName

It is the channel name you wish to show the users when they are not logged in. Basically, it is the fallback of a channel name that is present in the Chat Header after #.

anonymousMode

If you wish to enable anonymousMode which means you want the users to be able to see the chat without even logging in, then enable it in both your RocketChat instance and EmbeddedChat,

  • In RocketChat, go to Admin -> Accounts -> Allow Anonymous Read
  • In EmbeddedChat, pass in anonymousMode prop as true

isFullScreenFromStart

Do you want to start EmbeddedChat in your web app as a full-screen component or span it to some size? Depends on you. It is a boolean value btw. It defaults to false which makes use of the chat in minimized form.

Clone this wiki locally