React
Install and launch the Cossistant support widget in React.
Quick start with AI prompt
Paste your public key to prefill the prompt, then copy it and run it in ChatGPT, Claude, or Cursor.
Manually
1. Install the package
pnpm add @cossistant/react
2. Add your public API key
VITE_COSSISTANT_API_KEY=pk_test_xxxxThe 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
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>,
);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.
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>,
);5. Render the widget
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)
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
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.