Get started
Install the Webchat React library and build your first component.
Botpress offers a fully customizable React library that lets you seamlessly add Webchat to your existing React projects.
Step 1: Installation
You will need:
The Webchat library currently requires React 18. Make sure your project is using this version to avoid compatibility issues.
Install the NPM package
The Webchat library is hosted on npm
. Download it with your favorite package manager:
Obtain your Client ID
To integrate the Webchat client into your application, you need to obtain your bot’s Client ID. This ID identifies your bot and enables communication with the Webchat service.
To get your bot’s Client ID:
- From the Dashboard, select your bot.
- In the left navigation bar, select Webchat.
- Select the Advanced Settings tab.
- Copy the Client ID:


Step 2: Build a component
The library gives you two options for building a full Webchat experience:
Option 1: Use the Webchat
component
The library provides a batteries-included Webchat component that contains most of what you’d expect when injecting Webchat.
With this approach, the only other component you need to import is the Fab. Here’s an example implementation:
Option 2: Build Webchat manually
If you need more customization over each part of the Webchat experience, you can build it manually using the rest of the component library. Here’s an example implementation:
You just built your first Webchat component!