Documentation

Getting started

Quickstart

Sign up, design your first paywall in the studio, integrate the React SDK, and ship a live A/B test in under ten minutes.

This guide takes you from a fresh signup to a live paywall that splits traffic across two variants. Total time: about ten minutes.

1. Create a project

Sign in to the dashboard and create a project. Every project gets a publishable API key and a publishable URL slug. You will need both to ship paywalls outside the dashboard.

2. Design a paywall

Open Paywalls → New paywall. The studio opens with an empty canvas. Drag components from the palette on the left, edit properties on the right, and bind text to variables using Liquid syntax.

Shortcut

Press ⌘K to open the AI chat. Describe the paywall you want and Experiwall scaffolds a complete component tree you can refine.

3. Install the SDK

bash
npm install @experiwall/react

Wrap your app in ExperiwallProvider and pass the publishable API key. The provider handles config fetching, caching, and analytics.

tsx
import { ExperiwallProvider } from "@experiwall/react";

export default function RootLayout({ children }) {
  return (
    <ExperiwallProvider apiKey={process.env.NEXT_PUBLIC_EXPERIWALL_KEY!}>
      {children}
    </ExperiwallProvider>
  );
}

4. Render the paywall

Use PaywallModal to open a paywall on demand, or render an inline Paywall anywhere in your tree.

tsx
import { PaywallModal } from "@experiwall/react";

export function UpgradeButton() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Upgrade</button>
      <PaywallModal
        paywallId="pro-upgrade"
        open={open}
        onClose={() => setOpen(false)}
        onSuccess={(purchase) => grantEntitlement(purchase)}
      />
    </>
  );
}

5. Launch an experiment

In the dashboard, create a campaign for your paywall. Pick an audience filter (device, country, locale, or a custom attribute), then split traffic across two or more variants. The SDK resolves the variant server-side, so the user only ever sees one paywall.

No flicker

Variant assignment happens on the server. There is no client-side flash of the wrong design.

Where to go next