The JavaScript client enables seamless interaction with the Webchat API directly from your web application. Specifically designed for browser environments, this client allows you to send and receive messages from the bot and subscribe to various events, such as incoming messages.

📘

This is for advanced use cases where you want to build your own front-end or listen to particular events.

We recommend most people start with the Embedded Webchat or React Components.

Quickstart

1. Install the package

Install the necessary package from the npm public registry.

npm install @botpress/webchat

pnpm add @botpress/webchat

yarn add @botpress/webchat

2. Obtain the Client ID

To integrate Botpress Webchat Client into your application, you need to obtain your bot's Client ID, which uniquely identifies your bot and enables communication with the Webchat service. Follow these steps to retrieve it:

1. Open your bot in the Botpress Workspace
2. Navigate to the Webchat tab
3. Access Advanced Settings
4. Copy the Client ID

3. Add the code

import { getClient } from '@botpress/webchat'

//Add your Client ID here ⬇️
const clientId = "YOUR_CLIENT_ID";

const client = getClient({ clientId })

client.on("message", (message) => {
  console.log("Received message", message); // Messages from the bot
});

await client.connect(); // Initialize the client

await client.sendMessage("Hello, Botpress!"); // Send a message to the bot

API Reference

The Webchat Client provides a set of properties and methods that allow you to manage conversations, send messages, and handle user sessions.

These are the available properties and methods:

Live Demo