Documentacion

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. Test variants

Add variants to your paywall in the studio to test copy, pricing, or product order. Variants are deltas on top of the published paywall, so edits to the base design propagate to every variant unless the variant explicitly overrides that node.

No flicker

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

Where to go next