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";
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>
</>
);
}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>
);
}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
DefaultMessage
Structure for pre-conversation welcome messages.
Property
Type
VisitorMetadata
Key-value pairs for storing custom data about contacts.
Property
Type
Type Definition: Record<string, string | number | boolean | null>
SenderType
Enum defining who can send messages.
Property
Type
Type Definition: "visitor" | "team_member" | "ai"
TriggerRenderProps
Props provided to custom trigger render functions.
Property
Type