Add a co-creation banner

Requires: A publishable or secret key with READ_PUBLIC. Member session optional.

A community can let its members create their own events, products and courses. The co-creation banner tells each visitor whether they can, and what to do next: sign in, become a member, upgrade their tier, or start creating.

1. Read the state on your server

import { createCobuntu } from "@cobuntu/embed";
 
const cobuntu = createCobuntu({ apiKey: process.env.COBUNTU_KEY!, community: "your-community" });
 
export async function coCreationFor(session?: string) {
  const client = session ? cobuntu.as(session) : cobuntu;
  return client.coCreation.get();
}

Without a session every enabled surface answers signin. With one, the answer is the member's own: join, locked or allowed. A surface the community has not opened is disabled for everyone.

2. Render the banner

import { CreateBanner } from "@cobuntu/embed-react";
 
export default async function EventsPage() {
  const coCreation = await coCreationFor(await readSession());
  return (
    <CreateBanner
      surface="event"
      data={coCreation}
      signinHref="/login?next=/events"
      joinHref="/join"
      tiersHref="/membership"
      onAllowed={openCreateEvent}
    />
  );
}

Or pass fetcher instead of data to load it in the browser through your own route. The banner renders nothing in the disabled state, while loading, and after a failed fetch, so it never advertises something the visitor cannot do.

3. Style it

The banner ships no CSS. Target cb-create-banner and its data-state attribute (signin, join, locked, allowed) to vary the look per state, and data-require-approval="true" to add a note that new listings are reviewed first. Override any text with the copy prop.

The state is a hint for what to show. Whatever you build behind onAllowed, the create call itself is still checked by Cobuntu.