React Integration

The Knest React package provides a native React component for seamless integration into your React or Next.js application.

Installation

npm install @useknest/widget-react
# or
pnpm add @useknest/widget-react
# or
yarn add @useknest/widget-react

Basic usage

Import the ChatWidget component and add it to your app:

import { ChatWidget } from '@useknest/widget-react';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <ChatWidget
        publishableApiKey="your_api_key_here"
        mode="bubble"
      />
    </div>
  );
}

Props

The React component accepts props in camelCase. See the Widget Configuration page for a complete reference.

Required:

  • publishableApiKey (string) — Your project's API key

Optional:

  • mode ('inline' | 'bubble') — Display mode. Defaults to 'bubble'
  • defaultOpen (boolean) — Auto-open the chat in bubble mode. Defaults to false
  • user (object) — Identifies the logged-in user on your platform. Requires at least id or email. Fields: id (string), email (string), fullName (string), metadata (object)

Display modes

Inline mode

The widget renders directly in your page layout:

<ChatWidget
  publishableApiKey="your_api_key_here"
  mode="inline"
/>

Bubble mode

A floating button appears in the corner. Click to open the chat panel:

<ChatWidget
  publishableApiKey="your_api_key_here"
  mode="bubble"
  defaultOpen
/>

Styling

Styles are automatically injected when the component mounts. No additional CSS imports needed.

Customize colors, avatar, and messages in your Knest dashboard under the Branding tab.

React version compatibility

The widget is compatible with modern React versions.

Next steps