Skip to main content
Fanfare helps commerce teams run controlled-access experiences for high-demand launches. Your storefront keeps ownership of the product page, cart, checkout, analytics, and customer messaging. Fanfare provides the public journey state that tells your application what the customer can do next.

​
Mental Model

The core concept is a journey: one customer’s progress through one Fanfare experience. Journey mental model showing your app using the Fanfare SDK to read JourneyView state and valid actions. Your integration reads the journey state, renders the matching UI, and calls only actions that are available in that state. It does not need to know private routing, enforcement, or operational details.

​
Key Concepts

​
Organization

Your Fanfare account is an organization. Your dashboard provides an organizationId and publishable keys for browser SDK setup.

​
Experience

An experience is the customer-facing event you embed in your site, such as a product launch, ticket sale, appointment release, or member access window. SDK examples use experience IDs such as exp_123.

​
Journey

A journey is the SDK object for a customer inside an experience. In the core SDK, you get one with: 
const journey = sdk.journeys.get("exp_123");
Most UI should render from journey.view$, which emits JourneyView.

​
JourneyView

JourneyView is the public UI contract. It exposes top-level stages such as:
StageWhat your UI usually shows
readyA start CTA or auto-start setup.
routingA loading state while the public path resolves.
gatedAuth, access-code, or verification UI.
routedThe current sequence state.
When the journey is routed, the nested sequence has a phase such as scheduled, enterable, participating, settling, granted, ended, or unavailable. It also has a mechanism such as queue, draw, auction, appointment, timed_release, or waitlist. See Journey State for the full model.

​
Grant

When the customer has access to continue, the public view exposes sequence.phase === "granted" and a sequence.grant. Treat grant values as sensitive runtime data. Use them only for the next step in your integration, such as a server handoff or checkout transition.

​
Integration Paths

PathBest fitMain APIs
React componentsMost React storefronts and launch pages.FanfareProvider, ExperienceWidget, useExperienceJourney
Core SDKFully custom UI or non-standard app state.initFanfare, sdk.journeys.get(), JourneyView
Web componentsStatic pages, CMS embeds, or non-React hosts.registerWebComponents(), <fanfare-experience-widget>
Start with Choose Your Path if you are deciding between these options.

​
How The Browser SDK Fits

Browser SDK fit showing a product page using the Fanfare SDK, Fanfare API, and backend checkout handoff. The SDK manages the browser-side journey. Your backend should validate the granted customer before completing protected business actions. Keep secret keys and validation logic on the server.

​
What You Need

  • A Fanfare account and dashboard access.
  • An organizationId and browser-safe publishableKey.
  • An experience ID, such as exp_123.
  • A frontend integration path: React, core SDK, or web components.
  • A server-side handoff for checkout or another protected next step.

​
Public-Safe Integration Rule

Build against the public state and action contract. Avoid customer-facing copy, analytics, tests, or routing logic that depends on private reasons why a customer reached a state.

​
Next Steps