Next.js

Install and launch the Cossistant support widget in Next.js.

If you are contributing to the Cossistant repo itself, start with the Contributor Setup Guide so you boot the full monorepo and local services, not just the widget in an existing app.

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

Manually

1. Install the package


pnpm add @cossistant/next

2. Add your public API key

.env.local

NEXT_PUBLIC_COSSISTANT_API_KEY=pk_test_xxxx

3. Add `SupportProvider`

app/layout.tsx

import { SupportProvider } from "@cossistant/next";
 
import "./globals.css";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SupportProvider>{children}</SupportProvider>
      </body>
    </html>
  );
}

4. Import styles

The widget does not inject styles automatically. 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.

app/globals.css

@import "tailwindcss";
 
@import "@cossistant/next/support.css";

app/page.tsx

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

6. Identify logged-in visitors (optional)

app/(app)/layout.tsx

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

7. Display custom messages with `SupportConfig defaultMessages`

app/page.tsx

import { Support, SupportConfig } from "@cossistant/next";
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 Page() {
  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.

What is Cossistant?React

On this page

Quick start with AI prompt Manually 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