Philosophy
The <Support /> component is built on progressive disclosure. Start with zero config, then customize as you grow.
How it Works
- Zero Config: Works out of the box with sensible defaults
- Progressive Enhancement: Start simple, customize as needed
- Compound Components: Radix-style API for full control when needed
- Real-time Chat: Built-in WebSocket support for live conversations
- Headless Architecture: Full control through primitive components when needed
Quick Start
Drop <Support /> anywhere in your app:
import { Support } from "@cossistant/next";
export default function App() {
return (
<div>
<Support />
{/* Your app */}
</div>
);
}That's it. You get a fully functional support widget.
Customizing Messages & Quick Options
Use <SupportConfig /> to customize messages and quick options per page:
import { 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 does billing work?",
"What's included in Pro?",
"Can I cancel anytime?",
];
export default function PricingPage() {
return (
<>
<SupportConfig
defaultMessages={defaultMessages}
quickOptions={quickOptions}
/>
<h1>Choose your plan</h1>
</>
);
}Prop
Type
Identifying Visitors
By default, visitors are anonymous. Use <IdentifySupportVisitor /> to connect them to your authenticated users:
import { 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>
);
}What happens when I identify a visitor?
Props
Prop
Type
Support Component Props
Prop
Type
Usage Examples
Basic styling:
<Support
theme="dark"
classNames={{
trigger: "bg-purple-600 hover:bg-purple-700",
content: "border-purple-200 shadow-2xl",
}}
/>With positioning:
<Support side="bottom" align="end" sideOffset={8} />With custom page:
import { Support, useSupportNavigation } from "@cossistant/next";
const HelpPage = () => {
const { goBack } = useSupportNavigation();
return (
<div className="p-4">
<button onClick={goBack} type="button">← Back</button>
<h1>Help Center</h1>
</div>
);
};
export default function App() {
return (
<Support>
<Support.Page name="HELP" component={HelpPage} />
</Support>
);
}For advanced customization, see the Customization guide.
Types
Shared support widget types now live on the
Types page. Use that reference for
DefaultMessage, VisitorMetadata, SenderType, TriggerRenderProps, and
the rest of the canonical support type docs.