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. Configure a web paywall.
4. Set up a web placement.

Before You Begin

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

• You have connected your Stripe or Paddle accounts via the Web Payments page.
• 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 under the desired product group.
3. Enter the following information:
   • Product Name
   • Product ID and Price ID (as defined in Stripe or Paddle).
4. Click Save.

Adding Products from the Uncategorized Section

If a product is in the Uncategorized section:

1. Click on the product.
2. Select Move to Product Group.
3. Configure the identifiers as follows:
   • Enter Product ID and Price ID.
4. Click Save.

Configuring a Web Paywall

Step 1: Create a Web Paywall

1. Go to the Web Paywalls page.
2. Click Create Paywall.
3. Provide a Paywall Name and Identifier, then click Save.

Step 2: Add Products to the Paywall

1. After creating the paywall, click the Pencil icon to edit.
2. In the paywall editor, click Add Product.

3. Use the interface to:
   • Add products.
   • Delete products.
   • Change their order.

For further details, refer to the Paywalls Guide.

---

Setting Up a Web Placement

Step 1: Create a Web Placement

1. Navigate to the Web Placements page.
2. Click Create Placement.
3. Enter a Placement Name and Identifier, then click Save.

Step 2. Set up paywall target audience.

Select a paywall configured from the previous step for this placement. You can set an audience segment for each paywall in the placement. For additional information, see the Placements Guide.

---

Setting Up Product Macros

Overview

Macros allow developers to set static values for each product. These values are automatically fetched by a Framer component and applied to the funnel’s paywall, replacing corresponding placeholders.

Example

If you set the full-price macro to "$9.99", this value will appear in the relevant paywall label.

Current Limitations

• Only static macros are supported (dynamic macros are not available yet).

Available Macros

Using Sandbox and Production Environments Simultaneously

You can configure a web placement to include both sandbox and production web products, making it easier to test your website while it is live in production.

Steps to Set Up:

1. Create Test and Production Products
   Navigate to the Products section in Product Hub and create separate test and production products.

2. Set Up Paywalls
   Create two paywalls:

   • One containing only test products.
   • Another containing only production products.
     You can use any identifier for the paywalls.

3. Configure Placement with Paywalls
   Add the two paywalls to your placement:

   • Place the paywall with test products at the top.
   • Place the paywall with production products below it.

4. Set Paywall Audiences
   Assign audiences to the paywalls:

   • For the top paywall (test products), select the Sandbox Users audience.
   • For the bottom paywall (production products), select the All users audience.
   • Enable both paywalls.

5. Update Website Body Script
   Replace the Apphud.init method with the following script:

   JavaScript

   const debugParam = new URLSearchParams(window.location.search).get('debug') === 'true';
   
   // Initialize SDK with debug parameter from query parameters
   apphud.init({
       apiKey: "YOUR_API_KEY",
       version: "1.0",
       debug: debugParam
   });
   

6. Testing

   • Test your website by appending debug=true to the URL:

     https://yourwebsite.com?debug=true
     

7. Once debug: true parameter is passed to the Apphud SDK's init method, the current web user will match to the Sandbox Users audience, and a test paywall will be returned.

8. Important Note

   • To easily identify when you're viewing the test paywall, modify product details in one of the following ways:
     • Adjust macros for test products to display distinct prices or custom symbols.
     • Use different prices for test and production products.

This setup ensures seamless testing and clear differentiation between test and production environments.