Basic usage

Philosophy

The <Support /> component is built on the principle of simplicity first. Drop it into your React app and get a fully functional support system without configuration overhead.

How it Works

• Zero Config: Works out of the box with sensible defaults
• Progressive Enhancement: Start simple, customize as needed
• Real-time Chat: Built-in WebSocket support for live conversations
• Smart Routing: Automatically routes conversations to appropriate channels
• Headless Architecture: Full control through primitive components when needed

The component handles the complexity of modern support systems while maintaining a clean, minimal API surface.

Customizing Messages & Quick Options

Use the <SupportConfig /> component to customize default messages and quick options per page or route. This is perfect for providing context-specific help.

Example: Pricing Page

Copyimport { SupportConfig } from "@cossistant/next";
 
export default function PricingPage() {
  return (
    <>
      <SupportConfig
        quickOptions={[
          "How does billing work?",
          "What's included in Pro?",
          "Can I cancel anytime?",
        ]}
      />
      <h1>Choose your plan</h1>
      {/* rest of pricing page */}
    </>
  );
}

The <SupportConfig /> component accepts the following props:

Identifying Visitors

By default, visitors are anonymous. Use <IdentifySupportVisitor /> to connect them to your authenticated users, transforming them into contacts.

Once identified, all conversations and metadata are linked to the contact across devices.

Example: Dashboard Layout with Better Auth

Copyimport { IdentifySupportVisitor } from "@cossistant/next";
import { auth } from "@/lib/auth";
import { headers } from "next/headers";
 
export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await auth.api.getSession({
    headers: await headers(),
  });
 
  return (
    <div>
      {session?.user && (
        <IdentifySupportVisitor
          externalId={session.user.id}
          email={session.user.email}
          name={session.user.name}
          image={session.user.image}
          metadata={{
            plan: session.user.plan,
            signupDate: session.user.createdAt,
          }}
        />
      )}
      {children}
    </div>
  );
}

Props

Support Component Props

The <Support /> component accepts these optional props to customize its appearance and behavior:

Usage Examples

Basic customization with theme and styling:

Copy<Support
  theme="dark"
  position="bottom"
  align="right"
  classNames={{
    bubble: "bg-purple-600 hover:bg-purple-700",
    container: "border-purple-200 shadow-2xl",
  }}
/>

With custom page:

Copyimport { Support, Page, useSupportNavigation } from "@cossistant/next";
 
const HelpPage = () => {
  const { goBack } = useSupportNavigation();
  return (
    <div className="p-4">
      <button onClick={goBack}>← Back</button>
      <h1>Help Center</h1>
    </div>
  );
};
 
export default function App() {
  return (
    <Support>
      <Page name="HELP" component={HelpPage} />
    </Support>
  );
}

For advanced customization, see the Custom Components guide.

Types

DefaultMessage

Structure for pre-conversation welcome messages.

VisitorMetadata

Key-value pairs for storing custom data about contacts.

Type Definition: Record<string, string | number | boolean | null>

SenderType

Enum defining who can send messages.

Type Definition: "visitor" | "team_member" | "ai"