Overview

Configuring products for web funnels involves several steps:

1. Set up products in your web payment provider's dashboard.
2. Add products in Product Hub.
3. Build a paywall with those products in Mission Control.
4. Create a placement and a targeting to serve the paywall to your web users.

Before You Begin

Ensure the following prerequisites are complete before working with products in Flows:

• You have connected your Stripe or Paddle accounts via App settings → Web → Payment providers.
• All relevant products have been added in their respective dashboards. Refer to our guides for Stripe and Paddle.

---

Adding Products in Product Hub

Adding New Products

1. Navigate to the Product Hub.
2. Click Add Product in the desired permission group.
3. Enter the following information:
   • Product Name
   • Product ID and Price ID (as defined in Stripe or Paddle).
4. Click Save.

Build the Paywall in Mission Control

Create your paywall in Mission Control → Paywalls — see the Paywalls guide for the full walkthrough. Create a paywall, add your web products, and order them.

Web-specific configuration lives on the paywall editor's tabs:

Macros tab

Define the values injected into your funnel's screen — full-price, new-price, old-price, discount, duration, and custom-1…custom-5. Set values per product via the ⋯ → Set macros values menu, choosing variables (e.g. product.price, product.title, today) and optional Liquid modifiers (e.g. today | add_days: 5). Only define the macros actually used in your screen design; leave the rest empty. The full list is in Product macros below.

Introductory offer tab (Stripe / Paddle)

Introductory pricing for web products is configured on the paywall's Introductory offer tab — "Configure introductory pricing for web products (Stripe / Paddle)." For each product choose one:

• Free trial (Stripe only) — select Free trial and set Free trial duration in days.
• Discount — select Discount and enter the Stripe Coupon ID or Paddle Discount ID, depending on your provider.

Serve the Paywall to Web Users

A paywall reaches users through a placement plus a targeting. To show it to people who arrive through your web funnel, create a web-users audience and a high-ranked targeting.

Step 1 — Create a placement

In Mission Control → Placements, create a placement (e.g. web_onboarding). See the Placements guide.

Step 2 — Create a web-users audience

In Users & Audiences, create a custom audience that matches your web users. There are two ways:

• All Flow users — add the Install Source filter and select Flows.
• A specific flow (more precise) — use the Install Source Identifier filter set to your flow's identifier, so only users from that exact flow match.

See the Audiences guide.

Step 3 — Create a targeting with a high rank

In Mission Control → Targetings, create a targeting that binds the web-users audience to your placement and web paywall, then move it to the top of the list (high rank). Apphud evaluates targetings on every fetch and serves the first one whose audience matches, checking the most-recently-launched / highest-ranked targeting first. A top-ranked web targeting ensures web users get the web paywall before any broader (e.g. Default) targeting. See the Targetings guide.

Product macros

Macros let you set static values per product that your funnel component injects into the paywall, replacing placeholders. Only static macros are supported (dynamic macros aren't available yet).

Testing: Sandbox and Production Together

You can serve both sandbox and production web products at once to test on a live site, using two paywalls served by ranked targetings:

1. Create test and production products in Product Hub.

2. Create two paywalls — one with only test products, one with only production products.

3. Add a placement, then create two targetings on it:

   • A targeting with the Sandbox Users audience → the test paywall, ranked at the top.
   • The Default targeting (All Users) → the production paywall.

4. Update your website init script to pass the debug flag:

   JavaScript

   const debugParam = new URLSearchParams(window.location.search).get('debug') === 'true';
   
   apphud.init({
       apiKey: "YOUR_API_KEY",
       version: "1.0",
       debug: debugParam
   });

5. Test by appending ?debug=true to your URL — the user then matches the Sandbox Users audience, and the top-ranked test targeting returns the test paywall.

6. Tip: make the test paywall visually distinct (different macros or prices) so you can tell test vs production at a glance.