Test Webchat Admin Key

A simple application demonstrating Botpress Webchat integration with user authentication using admin keys.

Prerequisites

• Node.js (v14 or higher)
• pnpm

Setup

1. Configure Backend

Edit backend/server.js and update these values with your Botpress credentials:

const BOTPRESS_WEBCHAT_URL = "https://webchat.botpress.cloud";
const BOTPRESS_WEBCHAT_CLIENT_ID = "your-client-id";
const BOTPRESS_ADMIN_SECRET = "your-admin-secret";
const BOTPRESS_USER_KEY_EXPIRATION = Date.now() + 30_000;

2. Configure Frontend

Edit frontend/index.html and update these values:

window.botpress.init({
  botId: "your-bot-id",
  clientId: "your-client-id",
  // ...
});

3. Install Backend Dependencies

cd backend
pnpm install

Running the Application

Start the Backend

cd backend
pnpm start

The server runs on http://localhost:3000

Open the Frontend

Simply open frontend/index.html in your web browser

How to Use

1. Open the frontend in your browser
2. Enter a username in the input field
3. Press Enter or tab out of the field
4. The Botpress webchat will initialize and you can start chatting

How It Works

• The backend creates Botpress users and generates temporary access keys (30-second expiration)
• The frontend fetches user credentials from the backend and initializes the Botpress webchat
• Users are stored in memory (restarting the server clears all users)

API Endpoints

• GET / - Health check
• GET /users/:username - Get or create a user and return their credentials