@team-plain/react-chat-ui

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 the Chat component and the usePlain hook.

Reference

• PlainProvider
  • appKey
  • customer
  • theme
• Chat
• usePlain()

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.