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

# Funnel demos

> Reference funnels by type — start with the basic post-purchase flow, then add more patterns as we publish them

# Funnel demos

This category is a **catalog of funnel types**. Each demo is a complete, copyable pattern: the graph, the offers, and how the thank-you page shows what the customer actually bought.

The first one is the simplest — a DTC post-purchase flow. More types will land here (subscriptions, digital goods, storefront inbound, geo splits, …) without changing this page’s job: **pick a type, reproduce it**.

<Info>
  **Finished project:** [`basic-post-purchase`](https://github.com/TagadaPay/examples/tree/main/basic-post-purchase) on GitHub. Clone it, run `tagada-init` → `pnpm seed` → `pnpm dev`, and walk the graph before you rebuild it.
</Info>

<Info>
  These demos are the *shape* of the funnel (nodes, edges, offers). You can build the same shape in the [dashboard](https://app.tagadapay.com), in [TagadaStudio](https://studio.tagadapay.com), with the [Node SDK](/developer-tools/node-sdk/upsell-downsell-funnel), or on your own domain with the [Headless SDK](/developer-tools/headless-sdk/introduction).
</Info>

***

## How to read a demo

Every demo page answers the same four questions:

1. **Graph** — which steps, which edges, which `when` conditions
2. **Catalog** — which products and checkout offers you need
3. **Pages** — native, Studio, Plugin SDK, or self-hosted Headless
4. **Thank you** — how add-on orders show up (`relatedOrders`)

Concepts (node types, routing, analytics) live in the [Funnel Orchestrator](/developer-tools/funnels/funnel-orchestrator). This category does not repeat that — it shows **worked examples**.

***

## Types

| Type                                                                     | Graph                                                        | Status    |
| ------------------------------------------------------------------------ | ------------------------------------------------------------ | --------- |
| [Basic post-purchase](/developer-tools/funnel-demos/basic-post-purchase) | Landing → checkout → OTO → downsell → second OTO → thank you | Published |
| Subscription / rebill                                                    | Checkout → offer (plan) → thank you                          | Coming    |
| Digital (no shipping)                                                    | Checkout → offer → thank you                                 | Coming    |
| Storefront inbound                                                       | Shopify / Woo product → checkout → thank you                 | Coming    |

<Tip>
  Start with **Basic post-purchase** even if your catalog is not apparel. The type is the graph (accept / decline / related orders), not the products.
</Tip>

***

## Which SDK?

| You want…                                | Use                                                                         |
| ---------------------------------------- | --------------------------------------------------------------------------- |
| The demo look, hosted on Tagada          | Studio pages on funnel steps                                                |
| The graph live in 10 minutes, default UI | [Node SDK + native pages](/developer-tools/node-sdk/upsell-downsell-funnel) |
| The same journey on *your* domain        | [Headless SDK](/developer-tools/headless-sdk/offers) — you own the routes   |
| A React plugin on Tagada’s edge          | [Plugin SDK](/developer-tools/sdk/tutorial)                                 |

<Note>
  **Headless SDK ≠ Studio.** `@tagadapay/headless-sdk` runs on your site. Studio / Plugin pages run on Tagada. Same offers and `mainOrderId` either way.
</Note>

<Card title="Clone the finished project" icon="github" href="https://github.com/TagadaPay/examples/tree/main/basic-post-purchase">
  `basic-post-purchase` — landing, checkout, cap OTO, downsell, tote, thank you
</Card>
