Documentación

Quickstart

Regístrate, diseña tu primer paywall en el estudio, integra el SDK de React y lanza una prueba A/B en vivo en menos de diez minutos.

Esta guía te lleva desde un registro nuevo hasta un paywall en vivo que reparte tráfico entre dos variantes. Tiempo total: unos diez minutos.

1. Crea un proyecto

Inicia sesión en el panel y crea un proyecto. Cada proyecto obtiene una clave de API publicable y un slug de URL publicable. Necesitarás ambos para publicar paywalls fuera del panel.

2. Diseña un paywall

Abre Paywalls → Nuevo paywall. El estudio se abre con un lienzo vacío. Arrastra componentes desde la paleta de la izquierda, edita las propiedades a la derecha y vincula texto a variables usando la sintaxis de Liquid.

Atajo

Pulsa ⌘K para abrir el chat de IA. Describe el paywall que quieres y Experiwall genera un árbol de componentes completo que puedes refinar.

3. Instala el SDK

bash
npm install @experiwall/react

Envuelve tu app en ExperiwallProvider y pasa la clave de API publicable. El proveedor se encarga de obtener la configuración, el caché y las analíticas.

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

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

4. Renderiza el paywall

Usa PaywallModal para abrir un paywall bajo demanda, o renderiza un Paywall en línea en cualquier parte de tu árbol.

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. Prueba variantes

Agrega variantes a tu paywall en el estudio para probar copy, precios u orden de productos. Las variantes son diferencias sobre el paywall publicado, así que los cambios en el diseño base se propagan a cada variante a menos que la variante los sobrescriba explícitamente en ese nodo.

Sin parpadeo

La asignación de variantes ocurre en el servidor. No hay ningún destello del diseño incorrecto del lado del cliente.

Próximos pasos