Get Started

Quickstart

User feedback

User feedback

Advanced

Concepts

Others

Self-Host

React

Install and launch the Cossistant support widget in React.

Quick start with shadcn registry

bunx --bun shadcn@latest add cossistantcom/cossistant/support-react

The registry installs a React-ready <Support /> starter, the CossistantProvider, the required dependencies, the widget CSS import, and a VITE_COSSISTANT_API_KEY placeholder.

1. Add your public API key

.env

VITE_COSSISTANT_API_KEY=pk_test_xxxx

2. Mount `CossistantProvider`

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { CossistantProvider } from "@/components/cossistant/provider";
import App from "./App";
import "./index.css";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <CossistantProvider>
      <App />
    </CossistantProvider>
  </React.StrictMode>,
);

3. Render `<Support />`

src/App.tsx

import { Support } from "@/components/cossistant/support";
 
export default function App() {
  return (
    <main>
      <h1>You are ready to chat</h1>
      <Support />
    </main>
  );
}

Quick start with AI prompt

Paste your public key to prefill the prompt, then copy it and run it in ChatGPT, Claude, or Cursor.

Public API key (optional)

cossistant-prompt.md

Manual package install

1. Install the package


pnpm add @cossistant/react

2. Add your public API key

.env

VITE_COSSISTANT_API_KEY=pk_test_xxxx

Auto-detection

The SDK automatically detects your framework and reads the right environment variable (VITE_COSSISTANT_API_KEY, NEXT_PUBLIC_COSSISTANT_API_KEY, or COSSISTANT_API_KEY). You can also pass the key explicitly through publicKey.

3. Add `SupportProvider`

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { SupportProvider } from "@cossistant/react";
import App from "./App";
import "./index.css";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <SupportProvider>
      <App />
    </SupportProvider>
  </React.StrictMode>,
);

Passing the key explicitly

If your framework does not support automatic env variable detection, pass publicKey directly: <SupportProvider publicKey={import.meta.env.VITE_COSSISTANT_API_KEY}>.

4. Import styles

The widget does not inject styles automatically. Import one CSS entrypoint at the app root. Use support.css when your app already runs Tailwind CSS v4. Use styles.css everywhere else. Both entrypoints share the same widget theme behavior. If your app already exposes standard shadcn-style tokens, the widget will usually pick up colors, radius, fonts, and dark mode automatically. No extra theme mapping is needed to start.

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { SupportProvider } from "@cossistant/react";
import "@cossistant/react/styles.css";
import App from "./App";
import "./index.css";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <SupportProvider>
      <App />
    </SupportProvider>
  </React.StrictMode>,
);

src/App.tsx

import { Support } from "@cossistant/react";
 
export default function App() {
  return (
    <main>
      <h1>You are ready to chat</h1>
      <Support />
    </main>
  );
}

6. Identify logged-in visitors (optional)

src/App.tsx

import { IdentifySupportVisitor, Support } from "@cossistant/react";
 
export default function App() {
  const user = {
    id: "user_123",
    email: "jane@acme.com",
    name: "Jane Doe",
  };
 
  return (
    <>
      <IdentifySupportVisitor
        externalId={user.id}
        email={user.email}
        name={user.name}
      />
      <Support />
    </>
  );
}

7. Display custom messages with `SupportConfig defaultMessages`

src/App.tsx

import { Support, SupportConfig } from "@cossistant/react";
import { type DefaultMessage, SenderType } from "@cossistant/types";
 
const user: { name: string | null } = {
  name: "Jane Doe",
};
 
const defaultMessages: DefaultMessage[] = [
  {
    content: `Hi ${user.name ?? "there"}, anything I can help with?`,
    senderType: SenderType.TEAM_MEMBER,
  },
];
 
const quickOptions: string[] = ["How to identify a visitor?"];
 
export default function App() {
  return (
    <>
      <SupportConfig
        defaultMessages={defaultMessages}
        quickOptions={quickOptions}
      />
      <Support />
    </>
  );
}

Next in the Support docs

Overview for the fastest path from first render to production-ready widget.
Change One Thing to swap the bubble or first screen without rebuilding the widget.
Match Your Brand to set colors, radius, and dark mode.

Next.js API Keys

On this page

Quick start with shadcn registry 1. Add your public API key 2. Mount CossistantProvider3. Render <Support />Quick start with AI prompt Manual package install 1. Install the package 2. Add your public API key 3. Add SupportProvider4. Import styles 5. Render the widget 6. Identify logged-in visitors (optional)7. Display custom messages with SupportConfig defaultMessagesNext in the Support docs

React

Quick start with shadcn registry

1. Add your public API key

2. Mount CossistantProvider

3. Render <Support />

Quick start with AI prompt

Manual package install

1. Install the package

2. Add your public API key

3. Add SupportProvider

4. Import styles

5. Render the widget

6. Identify logged-in visitors (optional)

7. Display custom messages with SupportConfig defaultMessages

Next in the Support docs

2. Mount `CossistantProvider`

3. Render `<Support />`

3. Add `SupportProvider`

7. Display custom messages with `SupportConfig defaultMessages`