Pages & Layouts

Keep the default widget until you need custom pages, inline embeds, or your own shell.

Support stretches pretty far before you need the full-custom track. Most layout changes still fit inside the built-in runtime.

Use this when

you want a different first screen or an extra page
you want support inline instead of floating
you need your own widget shell but still want the Support router and state

Smallest working change

Use customPages when you want to replace one built-in page and keep the default shell.

import { Support, useSupportNavigation } from "@cossistant/react";
import { PENDING_CONVERSATION_ID } from "@cossistant/react/utils/id";
 
function CustomHomePage() {
  const { navigate } = useSupportNavigation();
 
  return (
    <div className="flex h-full flex-col gap-4 p-6">
      <h2 className="text-2xl font-semibold">Launch support</h2>
      <p className="text-sm text-zinc-500">
        Keep the default conversation page. Only change the first screen.
      </p>
 
      <button
        className="border px-4 py-3 text-left"
        onClick={() =>
          navigate({
            page: "CONVERSATION",
            params: {
              conversationId: PENDING_CONVERSATION_ID,
              initialMessage: "Help me launch with the React SDK",
            },
          })
        }
        type="button"
      >
        Start a conversation
      </button>
    </div>
  );
}
 
<Support
  customPages={[
    {
      name: "HOME",
      component: CustomHomePage,
    },
  ]}
/>;

PENDING_CONVERSATION_ID is the only sentinel the SDK treats as a not-yet-created conversation. Do not invent a placeholder ID: any other string is treated as a real conversation and may trigger a request for a record that does not exist.

The layout examples on this page use Tailwind utilities for brevity. The APIs do not require Tailwind; replace the classes with your own CSS when you import @cossistant/react/styles.css.

Common variants

Embed support inline

Use mode="responsive" when support should live inside the page instead of floating above it.

import { Support } from "@cossistant/react";
 
export default function SupportPanel() {
  return (
    <div className="h-[560px] overflow-hidden border">
      <Support mode="responsive" />
    </div>
  );
}

Morning Marc, how can we help?

We run on

Own the shell with `Support.Root`

Use full composition when you want your own trigger, content wrapper, and page registration.

import { Support } from "@cossistant/react";
 
function LaunchChecklistPage() {
  return <div className="p-6">Your custom page</div>;
}
 
export default function App() {
  return (
    <Support.Root>
      <Support.Trigger asChild>
        <button type="button">Compose support</button>
      </Support.Trigger>
 
      <Support.Content className="border shadow-2xl">
        <Support.Router>
          <Support.Page component={LaunchChecklistPage} name="HOME" />
        </Support.Router>
      </Support.Content>
    </Support.Root>
  );
}

Launch checklist

Pick the quickest path to ship a support widget that matches your product.

Install the package

Wrap your app with SupportProvider

Choose slots or full composition

Support.Page also works with Support when you want to keep the default widget and register one extra page.

When to stop here

customPages, mode="responsive", or Support.Root give you enough control
you still want the Support router, state, and built-in conversation flow
you do not need a headless build

Next step

Copy & Locale if the next change is wording
Advanced when you want to leave the ready-made widget path and build your own UI

Was this page helpful?

Open a prefilled documentation issue so the team can act on your feedback.

Yes, it helped Needs improvement

Match Your Brand Support State

On this page

Use this when Smallest working change Common variants Embed support inline Own the shell with Support.RootWhen to stop here Next step