Build your first Webchat component
Use the React library to build a basic Webchat component.
You will need:
- A published bot
- A working React app
Webchat currently requires React 18. Make sure your project is using this version to avoid compatibility issues.
1
Install the NPM package
The Webchat library is hosted on npm
. Download it with your favorite package manager:
2
Obtain your Client ID
To integrate Botpress 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:
- Select your bot in your workspace.
- In the left navigation bar, select Webchat.
- Select the Advanced Settings tab.
- Copy the Client ID:
3
Build your component
Now that we have everything we need, let’s build a basic React component:
App.tsx
Congratulations! You just created your first Webchat component!
Was this page helpful?