Plain React Chat UI
This package provides everything you need to add Plain's chat capabilities to your React website.
In order to use the 'Plain React Chat UI', you need to sign up with Plain at https://www.plain.com.
Please refer to our documentation to learn how to integrate the chat UI in your website.
What's included in this package?
- A
Chat
component which renders the Plain chat. - A custom
usePlain
hook which exposes a function to log out and the number of unread messages for the customer. - The
PlainProvider
which provides context for theChat
component and theusePlain
hook.
Reference
PlainProvider
The PlainProvider
is the required context provider for the Chat
component and the usePlain
hook.
appKey
Required prop. Used to specify which workspace your chat is for. Learn how to get an app key in our documentation.
customer
Optional prop. This is how you specify which kind of customer is currently using your app.
In the case of a logged-out customer you can provide an object which matches this type. If the customer prop is not provided this is the default.
type LoggedOutCustomer = {
type: 'logged-out';
};
If you have a logged-in customer you should provide an object which matches this type:
type LoggedInCustomer = {
type: 'logged-in';
getCustomerJwt: () => Promise<string>;
};
getCustomerJwt
should return a JWT signed with the private key whose public key you uploaded to Plain. Learn more on
this function in our documentation.
theme
Through the theme
prop, you can incrementally adopt a custom theme for your chat UI. If any values not provided by
your custom theme will fall back to the defaultTheme
which you can import from @team-plain/react-chat-ui
.
For those using Typescript, the type ThemeConfig
is available from @team-plain/react-chat-ui
.
Chat
The component which renders the chat UI. It can be used anywhere within the PlainProvider
. It will take the full width
of its parents.
usePlain()
This hook can be used anywhere within the PlainProvider
. It returns:
-
logout
: a function you can call when you need to log the customer out and reset any state within the chat -
notificationsCount
: a number which is the current number of unread messages a customer has. You can use this to render custom badges and such.