react-chatsbot-widget

Embeddable React chat widget for ChatSBot. Your customer installs the npm package, adds their project API key, and the widget connects to your ChatSBot backend through Socket.IO.

Install

npm install react-chatsbot-widget

Usage

import { ChatWidget } from 'react-chatsbot-widget';
import 'react-chatsbot-widget/dist/react-chatsbot-widget.css';

export default function App() {
  return (
    <ChatWidget apiKey="PROJECT_API_KEY_FROM_DASHBOARD" />
  );
}

By default the package connects to the configured ChatSBot backend. For local development this is currently http://localhost:5000.

The backend must expose:

• POST /api/project/verify
• Socket.IO events: joinProject, sendMessage, receiveMessage

You can still pass serverUrl or dashboardUrl as an optional override when testing another backend.

Props

| Prop | Required | Description | | --- | --- | --- | | apiKey | Yes | Project API key generated by your dashboard. | | dashboardUrl / serverUrl | No | Optional ChatSBot backend URL override, without any API path. | | title | No | Header title. Default: Live Support. | | placeholder | No | Input placeholder. | | emptyMessage | No | Empty chat text. | | offlineMessage | No | Message shown when the widget cannot connect. | | position | No | bottom-right, bottom-left, top-right, or top-left. | | defaultOpen | No | Opens the chat panel by default. | | primaryColor | No | Main widget color. | | accentColor | No | Launcher/header gradient second color. | | onError | No | Callback when verification or connection fails. |

Publish

npm run build
npm publish --access public

Before publishing, update name, version, description, and repository details in package.json.