Skip to main content
This is the fastest React integration path. The widget renders the journey UI and your app handles routing after admission. 
import {
  ExperienceWidget,
  FanfareProvider,
} from "@fanfare-io/fanfare-sdk-react";
import "@fanfare-io/fanfare-sdk-react/styles";

export function App() {
  return (
    <FanfareProvider
      organizationId="org_123"
      publishableKey="pk_live_123"
      locale="en"
    >
      <LaunchPage />
    </FanfareProvider>
  );
}

function LaunchPage() {
  return (
    <main>
      <h1>Limited release</h1>

      <ExperienceWidget
        experienceId="exp_123"
        autoStart
        theme={{
          primary: "#8C14FF",
          fontFamily: "Inter, system-ui, sans-serif",
        }}
        variant="clean"
        onGranted={async (grant) => {
          await fetch("/api/fanfare/admission", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ grant }),
          });

          window.location.assign("/checkout");
        }}
      />
    </main>
  );
}

​
When to add slots

Start with the default widget. Add slots when a specific state needs custom markup, such as a branded upcoming screen or a checkout CTA that connects to your router. 
<ExperienceWidget
  experienceId="exp_123"
  slots={{
    granted: ({ grant }) => (
      <CheckoutButton grant={grant} />
    ),
  }}
/>
Keep business behavior in your app. Keep access decisions in the Fanfare journey state.