DeskLeap for React & Next.js

Live chat in your React app.
One component.

The free DeskLeap SDK drops the chat widget into any React or Next.js app — typed, SSR-safe, and aware of who your signed-in user is.

Install

npm install https://deskleap.io/sdk/deskleap-react.tgz

Direct from us while our npm directory listing is in progress — same package, installs with npm, pnpm or yarn. @deskleap/react on the registry will be the same import.

Use

import { DeskLeapWidget } from '@deskleap/react';

export default function App() {
  return (
    <>
      {/* your app */}
      <DeskLeapWidget organizationId="your-org-id" />
    </>
  );
}

Your Organization ID is in the dashboard under Settings → Widget. Create a free account if you don't have one yet.

One component, whole widget

Mount <DeskLeapWidget /> once — in your root layout, typically — and the chat launcher is on every page. Colour, position and greeting are props or dashboard settings.

SSR-safe, Next.js ready

The component only touches the DOM in the browser, so it renders cleanly under server-side rendering and the Next.js App Router.

Know who you’re talking to

Pass your signed-in user as the visitor prop and agents see their name and email. Add a server-side HMAC and the identity is cryptographically verified.

The whole helpdesk behind it

Chats become tickets when they need follow-up; knowledge base and customer portal included. One free dashboard, unlimited teammates.

Signed-in users, identified in chat

No more “can you confirm your email address?” — pass the user you already have, and optionally verify it with a server-side HMAC.

<DeskLeapWidget
  organizationId="your-org-id"
  visitor={{
    name: user.name,
    email: user.email,
    userId: user.id,
    userHash: user.deskleapHash, // HMAC, computed server-side
  }}
/>
Download the SDK

DeskLeap — helpdesk, live chat and knowledge base, 100% free. Add an AI Agent for $29/mo.