ChatWidget

Floating chat bubble with real-time messaging, agent avatars, offline support, and paste media.

Live Preview — Chat Widget

Usage

app/page.tsxtsx

import { ChatWidget } from '@reechdesk/sdk';

export default function Home() {
  return (
    <main>
      <h1>Welcome to my app</h1>

      <ChatWidget
        position="bottom-right"
        primaryColor="#f26522"
        greeting="Hi {name}, how can we help?"
        entityName="Acme Support"
        poweredBy={true}
      />
    </main>
  );
}

Props

Prop	Type	Default	Description
position	'bottom-right' \| 'bottom-left'	'bottom-right'	Position of the chat bubble on screen.
primaryColor	string	'#f26522'	Brand color used for the chat bubble, header, and user messages.
greeting	string	'Hi! How can we help you today?'	Initial message shown when the chat opens. Supports {name} placeholder.
entityName	string	'Support'	Name displayed in the chat header.
logoUrl	string \| null	null	URL of the logo shown in the chat header.
borderRadius	number	12	Border radius of the chat window in pixels.
inputBorderRadius	number	8	Border radius of the message input field.
poweredBy	boolean	true	Show "Powered by Reechdesk" badge at the bottom of the chat.
soundEnabled	boolean	true	Play a notification sound when a new message arrives.

Features

Agent Avatars

Shows agent photos and online status in the chat header and messages.

Online/Offline Status

Displays agent count when online, or a "Leave a message" form when offline.

Paste Media

Visitors can paste images and files directly into the chat input.

Resume from URL

Automatically resumes existing sessions via ?chat=resume&id=xxx.

Personalized Greeting

Use {name} or {Name}in the greeting to insert the visitor's name.

tsx

<ChatWidget
  greeting="Hi {name}, how can we help you today?"
  // When user.name = "Sarah", renders:
  // "Hi Sarah, how can we help you today?"
/>

Requires HelpdeskProvider

The ChatWidget must be rendered inside a HelpdeskProvider. See the HelpdeskProvider docs for setup.