Introducing the Headless SDK

Appfunnel is becoming the infrastructure layer for Web2App funnels. The new Headless SDK lets you build fully custom funnel experiences while we handle everything behind the scenes. Payments, analytics, attribution, and A/B testing.

Why Headless?

The drag-and-drop builder is great for getting started fast, but some teams need pixel-perfect control over their funnel UI. Maybe you have a design system to match, or your funnel needs interactions that go beyond what a visual builder can do.

The Headless SDK gives you the best of both worlds: your frontend, our infrastructure.

What you get

• Payment orchestration: Stripe checkout, subscription management, and discount logic handled for you
• Analytics & attribution: track every step of your funnel without instrumenting anything yourself
• A/B testing: run experiments on your custom funnels with the same testing engine used by the builder
• RevenueCat sync: purchases automatically sync to RevenueCat, just like builder funnels
• Product & pricing management: manage your products and pricing from the Appfunnel dashboard, query them from the SDK

How it works

Scaffold a new project with the CLI, define your pages as React components, and use SDK hooks for navigation, payments, and tracking.

npm install -g appfunnel
appfunnel init my-funnel
cd my-funnel && npm install
appfunnel dev

Define your funnel config and build each page with full control over the UI:

// appfunnel.config.ts
import { defineConfig } from '@appfunnel-dev/sdk'
 
export default defineConfig({
  name: 'My Funnel',
  initialPageKey: 'welcome',
  responses: {
    goal: { type: 'string', default: '' },
  },
  products: {
    items: [{ id: 'pro', name: 'Pro Plan', storePriceId: 'price_xxx' }],
    defaultId: 'pro',
  },
})

// src/pages/welcome.tsx
import { definePage, useNavigation, useResponse } from '@appfunnel-dev/sdk'
 
export const page = definePage({
  name: 'Welcome',
  routes: [{ to: 'checkout' }],
})
 
export default function Welcome() {
  const [goal, setGoal] = useResponse<string>('goal')
  const { goToNextPage } = useNavigation()
 
  return (
    <div>
      <h1>What's your goal?</h1>
      <button onClick={() => { setGoal('weight-loss'); goToNextPage() }}>
        Weight Loss
      </button>
    </div>
  )
}

When you're ready, build and publish in one step:

appfunnel build && appfunnel publish --promote

What this means for Appfunnel

This marks a shift in how we think about the product. Appfunnel is evolving from a funnel builder into the infrastructure for Web2App funnels, whether you use our builder or bring your own UI. The visual builder isn't going anywhere, but the Headless SDK opens up Appfunnel to teams who need more flexibility.