Overview

Support is the fast path. Ship the widget with good defaults, change the parts users see first, and go deeper only if you need to.

Use this when

• the widget already renders and you want the quickest path to production
• you want to know which API to reach for next
• you want to keep the default shell while you brand a few parts

30-second version

Copyimport { Support } from "@cossistant/react";
 
export default function App() {
  return <Support />;
}

The default widget gives you three good things right away:

• fast to production
• easy branding
• safe partial overrides

What you can change without rebuilding

• classNames and slotProps for styling the built-in UI
• slots.trigger to swap the bubble
• slots.homePage to change the first screen
• SupportConfig for route-level welcome messages and quick options
• theme and --co-theme-* tokens for colors, radius, and light or dark mode

If that covers your use case, stay here. You do not need the Advanced track to ship a polished widget.

Identifying visitors

Use IdentifySupportVisitor when a user signs in. Add SupportConfig when a page needs its own support context.

Copyimport {
  IdentifySupportVisitor,
  Support,
  SupportConfig,
} from "@cossistant/react";
import { SenderType, type DefaultMessage } from "@cossistant/types";
 
const defaultMessages: DefaultMessage[] = [
  {
    content: "Hi Jane, I can help with billing, onboarding, or migration.",
    senderType: SenderType.TEAM_MEMBER,
  },
];
 
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}
      />
 
      <SupportConfig
        defaultMessages={defaultMessages}
        quickOptions={[
          "How do I set this up?",
          "Can you help with billing?",
          "How do I import old conversations?",
        ]}
      />
 
      <Support />
    </>
  );
}

When to stop here

• the default widget already fits your product
• you only need identity, welcome messages, quick options, or prop-level styling
• you do not need custom pages or a custom shell

Next step

1. Change One Thing to swap the bubble or first screen without rebuilding the widget.
2. Match Your Brand to set colors, radius, and dark mode.
3. Pages & Layouts when you need an inline embed, a custom page, or a custom shell.

Want to build your own?

That is a separate track now.

Use Advanced when you want to go fully custom. The shipped widget is built from reusable logic and primitives, and you can inspect the support source if you want a real starting point today.

We are also working on templates with full examples for common custom builds.

Support Props