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 { LazySupport } from "@cossistant/react/lazy-support";
import { Suspense } from "react";
 
export default function App() {
  return (
    <Suspense fallback={null}>
      <LazySupport />
    </Suspense>
  );
}

Use the eager Support export only when you intentionally want the full widget in the current chunk. LazySupport is the default performance path.

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

Production checklist

• use a public key in the browser and allow every deployed hostname
• identify authenticated users by a stable external ID, including account switches
• import exactly one CSS entrypoint and test light/dark mode at 200% zoom
• provide privacy/retention disclosures for visitor and feedback context
• handle loading and API failures, and verify the flow with keyboard-only input

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.

Support Props