Quickstart
Get the Reechdesk chat widget running in your app in under 5 minutes.
1
Install the SDK
Choose your package manager and install the Reechdesk React SDK.
Terminalbash
npm install @reechdesk/sdk@latest
# or
yarn add @reechdesk/sdk@latest
# or
pnpm add @reechdesk/sdk@latest2
Wrap your app in HelpdeskProvider
Add the provider to your root layout. You'll need your Entity ID from the Reechdesk dashboard.
app/layout.tsxtsx
import { HelpdeskProvider } from '@reechdesk/sdk';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<HelpdeskProvider
entityId="your-entity-id"
apiUrl="https://your-app.reechdesk.com"
user={{
id: "user-123",
name: "John Doe",
email: "john@example.com",
}}
pusherKey="your-pusher-key"
>
{children}
</HelpdeskProvider>
</body>
</html>
);
}Finding your Entity ID
Navigate to Settings → Entities in the Reechdesk dashboard. Your Entity ID is the
slug field (e.g., cashmatrix).3
Add the ChatWidget
Drop the widget anywhere in your app. It renders a floating chat bubble.
app/page.tsxtsx
import { ChatWidget } from '@reechdesk/sdk';
export default function Home() {
return (
<main>
<h1>Welcome to my app</h1>
{/* The chat widget renders as a floating bubble */}
<ChatWidget
position="bottom-right"
greeting="Hi! How can we help you today?"
entityName="Acme Support"
primaryColor="#f26522"
poweredBy={true}
/>
</main>
);
}That's it!
Run your dev server and you'll see the chat bubble in the bottom-right corner. Try sending a message — it will appear in your Reechdesk dashboard.