Webchat React Library
When using the react library, the configuration in the dashboard will not be used. You will need to configure the webchat using the React components.
The Webchat React library is a set of React components that makes it easy to embed a webchat in any application or build a more advance version of the actual webchat. It is the building block for the Webchat UI.
Let's start simple, there are 3 main components to get started with the Webchat React library:
Webchat
The Webchat
component is the main component that will render the webchat. It must be wrapped in a WebchatProvider
to work.
useClient
The useClient
hook is a custom hook that will create an instance of the WebchatClient
. It requires a clientId
prop that is a unique identifier for the client.
WebchatProvider
The WebchatProvider
component is a context provider that will provide the webchat with the necessary configuration. It requires a client
prop that is an instance of the WebchatClient
. The WebchatProvider
must be provided for any Webchat component to work.
Theme & Styles
The WebchatProvider
component also accepts a theme
prop which is an object that will style the webchat. Read the extending Botpress themes to generate the theme object
and stylesheet
.
What it looks like
import "./style.css"
import theme from "./theme.json"
import { Webchat, WebchatProvider, useClient } from '@botpress/webchat'
const App = () => {
const client = useClient({ clientId: '453254325-54325-435-345-345534253' })
return (
<WebchatProvider client={client} theme={theme}>
<Webchat />
</WebchatProvider>
)
}
This is the simplest way to get started with the Webchat React library. After this, we'll get into more advanced topics like advance components, custom messages components, and more.
Webchat Advance Components
The webchat offers 4 advanced components to help you build a more advanced version of the webchat. These components are:
1. Message List
2. Fab
3. Header
4. Composer
Updated 3 months ago