Skip to main content
Before shipping Fanfare to production, verify that your browser SDK setup, granted-state handoff, and fallback behavior are ready for real customers.

​
Production Checklist

AreaVerify
CredentialsProduction uses pk_live_... publishable keys and server-only secret keys.
ExperienceThe production page points at the intended experienceId.
SDK defaultsBrowser SDK config does not override the default environment or API URL.
HandoffGranted customers pass through your trusted server or checkout flow.
LoggingDebug logging is disabled in production.
CopyGated, denied, and error states use generic customer-safe language.
FallbackYour app has a plan if the launch experience cannot be rendered.

​
Use Production Credentials

Configure browser-safe production values through your platform’s public environment variable mechanism. 
NEXT_PUBLIC_FANFARE_ORG_ID=org_123
NEXT_PUBLIC_FANFARE_PUBLISHABLE_KEY=pk_live_123
NEXT_PUBLIC_FANFARE_EXPERIENCE_ID=exp_123

<FanfareProvider
  organizationId={process.env.NEXT_PUBLIC_FANFARE_ORG_ID!}
  publishableKey={process.env.NEXT_PUBLIC_FANFARE_PUBLISHABLE_KEY!}
>
  <ExperienceWidget
    experienceId={process.env.NEXT_PUBLIC_FANFARE_EXPERIENCE_ID!}
    autoStart
    checkoutUrl="/checkout"
  />
</FanfareProvider>
Never expose secret API keys in frontend code, static HTML, client logs, or browser-visible environment variables.

​
Handle Admission Safely

When a customer receives a grant, send it to the next trusted step. Avoid placing grants in URLs or third-party telemetry. 
<ExperienceWidget
  experienceId="exp_123"
  autoStart
  onGranted={async (admissionGrant) => {
    await fetch("/api/fanfare/admission", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ admissionGrant }),
    });

    window.location.assign("/checkout");
  }}
/>
If your custom UI renders directly from JourneyView, read the grant from the public sequence view: 
if (view.sequence.phase === "granted") {
  return (
    <CheckoutPanel
      admissionGrant={view.sequence.grant.token}
      admissionGrantExpiresAt={view.sequence.grant.expiresAt}
    />
  );
}
Your backend should validate granted customers before completing protected actions such as checkout, booking, or fulfillment.

​
Avoid Development Overrides

Use the SDK defaults for environment and API URL. Do not ship customer-facing code that overrides them unless your Fanfare contact has directed you to do so. Use debug logging only during guided troubleshooting, and remove it before launch. Production logs and analytics should capture high-level outcomes, such as “admitted” or “checkout started”, rather than raw grants, snapshots, or session values.

​
Content Security Policy

If your site uses a Content Security Policy, allow browser connections to Fanfare. 
connect-src 'self' https://api.fanfare.io https://beacon.fanfare.io;
Keep the rest of your policy aligned with your application framework and security requirements.

​
Fallback Behavior

Decide what the product page should do if the SDK cannot initialize or the experience is unavailable. 
function LaunchExperience() {
  const fanfareEnabled = useFeatureFlag("fanfare-launch");

  if (!fanfareEnabled) {
    return <FallbackLaunchPanel />;
  }

  return (
    <ExperienceWidget
      experienceId="exp_123"
      autoStart
      onError={(error) => {
        reportLaunchExperienceError(error);
      }}
    />
  );
}
Fallback copy should be clear without exposing private enforcement or operational details.

​
Platform Notes

​
Vercel

Set public browser values in Vercel project settings or with the CLI: 
vercel env add NEXT_PUBLIC_FANFARE_ORG_ID
vercel env add NEXT_PUBLIC_FANFARE_PUBLISHABLE_KEY
vercel env add NEXT_PUBLIC_FANFARE_EXPERIENCE_ID

​
Netlify

Set public values in site environment settings: 
[build.environment]
  NEXT_PUBLIC_FANFARE_ORG_ID = "org_123"
  NEXT_PUBLIC_FANFARE_PUBLISHABLE_KEY = "pk_live_123"
  NEXT_PUBLIC_FANFARE_EXPERIENCE_ID = "exp_123"

​
Docker

Pass public browser values at build time only if your framework embeds them into the client bundle. 
ARG NEXT_PUBLIC_FANFARE_ORG_ID
ARG NEXT_PUBLIC_FANFARE_PUBLISHABLE_KEY
ARG NEXT_PUBLIC_FANFARE_EXPERIENCE_ID
ENV NEXT_PUBLIC_FANFARE_ORG_ID=$NEXT_PUBLIC_FANFARE_ORG_ID
ENV NEXT_PUBLIC_FANFARE_PUBLISHABLE_KEY=$NEXT_PUBLIC_FANFARE_PUBLISHABLE_KEY
ENV NEXT_PUBLIC_FANFARE_EXPERIENCE_ID=$NEXT_PUBLIC_FANFARE_EXPERIENCE_ID
Keep server secrets in runtime-only secret storage.

​
Post-Deployment Verification

After deployment:
  1. Visit the production page in a clean browser profile.
  2. Confirm the widget or custom UI renders the expected public state.
  3. Confirm the SDK uses its default environment and the production experience ID is configured.
  4. Confirm admitted-state handoff reaches your backend or checkout flow.
  5. Confirm debug logging is off.
  6. Confirm analytics and error tracking do not include raw grants or snapshots.
  7. Repeat with an existing session and a second browser tab.

​
Rollback Plan

Use your normal release controls so you can pause or bypass the integration quickly if needed:
  • Feature flag the launch experience.
  • Keep fallback product-page copy ready.
  • Keep the previous deployment available.
  • Route support messaging through your normal customer support path.

​
Next Steps