> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fanfare.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Deployment

> Production checklist for a public Fanfare SDK integration.

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

## Production Checklist

| Area         | Verify                                                                      |
| ------------ | --------------------------------------------------------------------------- |
| Credentials  | Production uses `pk_live_...` publishable keys and server-only secret keys. |
| Experience   | The production page points at the intended `experienceId`.                  |
| SDK defaults | Browser SDK config does not override the default environment or API URL.    |
| Handoff      | Granted customers pass through your trusted server or checkout flow.        |
| Logging      | Debug logging is disabled in production.                                    |
| Copy         | Gated, denied, and error states use generic customer-safe language.         |
| Fallback     | Your 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.

```bash theme={null}
NEXT_PUBLIC_FANFARE_ORG_ID=org_123
NEXT_PUBLIC_FANFARE_PUBLISHABLE_KEY=pk_live_123
NEXT_PUBLIC_FANFARE_EXPERIENCE_ID=exp_123
```

```tsx theme={null}
<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.

```tsx theme={null}
<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:

```tsx theme={null}
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.

```txt theme={null}
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.

```tsx theme={null}
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:

```bash theme={null}
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:

```toml theme={null}
[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.

```dockerfile theme={null}
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

* [Testing](/getting-started/testing) - Review test coverage before launch.
* [React Components](/sdk/components/react) - Check widget props and callbacks.
* [Public Integration Model](/sdk/security-and-public-model) - Keep public docs and customer copy contract-first.