Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Visual learner? Watch our [Flows walkthrough on YouTube](https://youtu.be/q_PAkC
Flows are built to work well for any multi-step experience:

- **Onboarding flows** that branch based on user goals or preferences.
- **[Web Funnels](/dashboard/guides/web-funnels)** that qualify users on the web before sending them to your app.
- **[Web Flows](/dashboard/guides/web-flows)** that qualify users on the web before sending them to your app.
- **Cancellation surveys** with conditional paths based on feedback.
- **Multi-step upsell funnels** that guide users to the right product.
- **Personalized welcome experiences** tailored to user segments.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,11 @@ To complete setup, follow these steps:
Fill in the **Bundle ID** of your app. - Enter the **Key ID** of the key you created in App
Store Connect. You can find it in the "Key ID" column shown in the image from step 3. Locate the
row for the key you made and copy the corresponding Key ID here.
<Warning>
Bundle IDs are case-sensitive. Enter the Bundle ID exactly as it appears in App Store Connect
or Xcode, including capitalization. For example, `com.Company.App` and `com.company.app` are
treated as different bundle IDs.
</Warning>
<Frame>![](/images/overview-settings-rev-tracking-key-id.png)</Frame>- For **Issuer ID**, fill in
the value found at **Users and Access -> Integrations -> In-App Purchase** in App Store Connect:
<Frame>![](/images/overview-settings-rev-tracking-issuer-id.png)</Frame>- **Click** on
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ Add in your Revenue Cat [public API key](https://www.revenuecat.com/docs/welcome
**Apple App ID**<br />
Fill in your app's Apple identifier here. You can find it by going to **App Store Connect -> General -> App Information**.

**Bundle ID**<br />
Fill in your iOS app's bundle identifier exactly as it appears in App Store Connect or Xcode. Bundle IDs are case-sensitive, and the casing must match when configuring Apple keys such as your In-App Purchase configuration.

**Apple Custom URL Scheme**<br />
We use URL schemes to perform deep link logic and for in-app previews of paywalls for iOS apps. To learn more about setting up deep links, visit this [doc](/sdk/quickstart/in-app-paywall-previews#using-deep-links-to-present-paywalls).

Expand Down
Original file line number Diff line number Diff line change
@@ -1,84 +1,95 @@
---
title: "Web Funnels"
description: "Build web-to-app funnels that qualify campaign traffic, personalize offers, and activate users before sending them to your app."
title: "Web Flows"
description: "Build web-to-app flows that qualify campaign traffic, personalize offers, and activate users before sending them to your app."
---

Web Funnels are web-based acquisition and conversion funnels for web-to-app growth. Use them to qualify users from paid campaigns, collect preferences, personalize the path ahead, attribute traffic sources, present web checkout, and then send users to download or open your app.
Web Flows are web-based acquisition and conversion flows for web-to-app growth. Use them to qualify users from paid campaigns, collect preferences, personalize the path ahead, attribute traffic sources, present web checkout, and then send users to download or open your app.

<Frame>![](/images/web_funnel_overview.jpg)</Frame>

Web Funnels are designed for the people running growth campaigns. If you are building in-app onboarding after install, start with [Flows](/dashboard/dashboard-creating-flows/getting-started). If you are sending traffic from Meta, TikTok, search, influencers, lifecycle email, or landing pages into a web-to-app journey, start here.
Web Flows are part of Superwall's [Flows](/dashboard/dashboard-creating-flows/getting-started) feature, adapted for web-to-app journeys. They are designed for the people running growth campaigns. If you are building in-app onboarding after install, start with app Flows. If you are sending traffic from Meta, TikTok, search, influencers, lifecycle email, or landing pages into a web-to-app journey, start here.

<Note>
Web Funnels use the same underlying Superwall editor and navigation system as Flows, but the use case is different. App Flows focus on in-app onboarding, permissions, and app state. Web Funnels focus on acquisition, ad attribution, targeting, web checkout, and app handoff.
Web funnels are a function of Web Flows. In Superwall, the product capability is Web Flows: the same underlying editor and navigation system as Flows, used for web-based acquisition, ad attribution, targeting, web checkout, and app handoff.
</Note>

Here is an example of a live Web Funnel built from the funnel shown above. The user enters from a web URL, moves through the personalized funnel steps, and then continues toward checkout, app download, or app activation.
Here is an example of a live Web Flow built from the flow shown above. The user enters from a web URL, moves through the personalized steps, and then continues toward checkout, app download, or app activation.

<Frame>![](/images/web_funnel_example.jpg)</Frame>
<video
src="/images/webflowdemo.mp4"
controls
muted
playsInline
preload="metadata"
style={{ width: "100%", borderRadius: 8 }}
/>

## Web Funnels vs. app Flows
## Web Flows vs. app Flows

Web Funnels and app Flows share editor concepts, but they solve different jobs:
Web Flows and app Flows share editor concepts, but they solve different jobs:

| Use case | App Flows | Web Funnels |
| Use case | App Flows | Web Flows |
| --- | --- | --- |
| Primary audience | Product and app teams | Growth and marketing teams |
| User context | User is already in the app | User starts on the web before app activation |
| Common entry point | SDK placement, app install, feature moment, account setup | Ad click, social link, search campaign, influencer link, email, landing page |
| Main goal | Onboard, educate, collect preferences, request permissions, set user attributes | Qualify traffic, personalize the offer, track attribution, convert on web, send to app |
| Technical focus | App permissions, user attributes, native app behavior | Campaign URLs, query parameters, audience filters, web checkout, attribution integrations |
| Technical focus | App permissions, user attributes, native app behavior | Campaign URLs, query parameters, audience filters, web checkout, attribution |

## When to use Web Funnels
## When to use Web Flows

Use Web Funnels when the first meaningful step in the user journey happens on the web:
Use Web Flows when the first meaningful step in the user journey happens on the web:

- **Paid acquisition funnels** that start from Meta, TikTok, Google, social, search, influencer links, email, or a campaign landing page.
- **Paid acquisition flows** that start from Meta, TikTok, Google, social, search, influencer links, email, or a campaign landing page.
- **Quiz-style onboarding** that collects goals, experience level, preferences, or intent before app install.
- **Personalized plan builders** that branch users into different recommendations before checkout or download.
- **Web checkout flows** that let users purchase on the web, then redeem or activate access in your app.
- **Web-to-app funnel builder workflows** where you want the funnel, checkout, targeting, testing, and app handoff managed from Superwall.
- **Web-to-app funnel workflows** where Web Flows power the flow, checkout, targeting, testing, and app handoff from Superwall.

## How Web Funnels work
## How Web Flows work

A Web Funnel combines campaign routing, funnel screens, and web checkout:
A Web Flow combines campaign routing, flow screens, and web checkout:

1. [Web Checkout links](/web-checkout/web-checkout-creating-campaigns-to-show-paywalls) make each campaign placement available as a URL, such as `https://yourapp.superwall.app/start`.
2. Flow-style navigation defines the multi-step experience, including pages, routes, branching, transitions, and analytics.
3. Campaigns, audience filters, and query string parameters let you target and personalize the funnel for each traffic source.
3. Campaigns, audience filters, and query string parameters let you target and personalize the flow for each traffic source.

When a user visits the URL, Superwall presents the paywall or Flow assigned to that placement. From there, the Flow behaves like any other route-based Flow: buttons can move users between pages, routes can branch based on conditions, and Flow Journey analytics can show where users drop off.

If the Web Funnel includes a purchase, use [Web Checkout](/web-checkout) to sell subscriptions or one-time products through Stripe. After checkout, use your configured [post-purchase behavior](/web-checkout/web-checkout-configuring-stripe-keys-and-settings#post-purchase-behavior) to send the user to your app, a redemption flow, or a custom redirect URL.
If the Web Flow includes a purchase, use [Web Checkout](/web-checkout) to sell subscriptions or one-time products through Stripe. After checkout, use your configured [post-purchase behavior](/web-checkout/web-checkout-configuring-stripe-keys-and-settings#post-purchase-behavior) to send the user to your app, a redemption flow, or a custom redirect URL.

## Create a Web Funnel
## Create a Web Flow

<Tip>
Need help setting up your first web funnel with Web Flows? We have options to help. Reach out to us at [support@superwall.com](mailto:support@superwall.com).
</Tip>

### 1. Set up Web Checkout

Create and configure your Web Checkout app first, even if your first version only sends users to download the app:

1. [Create a Web Checkout app](/web-checkout/web-checkout-creating-an-app).
2. [Configure Stripe keys and settings](/web-checkout/web-checkout-configuring-stripe-keys-and-settings).
3. [Add Stripe products](/web-checkout/web-checkout-adding-a-stripe-product) if the funnel will include a purchase.
3. [Add Stripe products](/web-checkout/web-checkout-adding-a-stripe-product) if the flow will include a purchase.
4. [Create a campaign and placement URL](/web-checkout/web-checkout-creating-campaigns-to-show-paywalls).

### 2. Plan campaign targeting

Decide how each traffic source should enter the funnel. You can use separate placements for major campaigns, or use query string parameters for campaign details:
Decide how each traffic source should enter the flow. You can use separate placements for major campaigns, or use query string parameters for campaign details:

```html
https://yourapp.superwall.app/start?utm_source=meta&utm_campaign=python-beginner&utm_content=video-a
```

Use those parameters in [audience filters](/dashboard/dashboard-campaigns/campaigns-audience#using-user-properties-or-placement-parameters) or as [paywall variables](/using-placement-parameters) to change copy, route users into different branches, or compare performance by source.

### 3. Build the funnel screens
### 3. Build the flow screens

Open the paywall assigned to the web placement and build the Web Funnel:
Open the paywall assigned to the web placement and build the Web Flow:

1. Add a [Navigation element](/dashboard/dashboard-creating-paywalls/paywall-editor-navigation-component).
2. Switch the editor to Flow view.
3. Add pages for the funnel steps, such as welcome, goals, preferences, commitment, offer, checkout, and app handoff.
3. Add pages for the flow steps, such as welcome, goals, preferences, commitment, offer, checkout, and app handoff.
4. Connect pages with [routes](/dashboard/dashboard-creating-flows/linking-pages).
5. Use [conditional branching](/dashboard/dashboard-creating-flows/how-flows-are-structured#branching) to personalize the path based on what the user selects.

Expand All @@ -98,22 +109,22 @@ If you are using Redeem mode, make sure your app is ready to handle the post-che

## Attribute and target campaign traffic

For growth teams, the Web Funnel URL is part of the campaign. Treat each URL as a trackable entry point:
For growth teams, the Web Flow URL is part of the campaign. Treat each URL as a trackable entry point:

- Use UTM parameters for traffic source, campaign, ad set, creative, and keyword.
- Pass known identifiers, such as `email` or `app_user_id`, when you already have them.
- Use audience filters to show different funnels or offers by placement parameter.
- Use audience filters to show different flows or offers by placement parameter.
- Use paywall variables to personalize headlines, quiz copy, offer framing, and handoff pages.

This keeps the acquisition workflow separate from in-app onboarding. A marketer can reason about traffic sources, targeting, creative, checkout, and drop-off without needing to think through native permission prompts or app state.

## What is different from app Flows?

Most editor behavior works the same way on the web. The main difference is context: a Web Funnel runs in a browser, before the app can use native app capabilities.
Most editor behavior works the same way on the web. The main difference is context: a Web Flow runs in a browser, before the app can use native app capabilities.

That means app-only tap behaviors will not work in a Web Funnel. Avoid actions that require the installed app or native permissions, such as requesting location, camera, contacts, photos, or notification permissions. If you need those permissions, ask for them later inside the app after the user installs or opens it.
That means app-only tap behaviors will not work in a Web Flow. Avoid actions that require the installed app or native permissions, such as requesting location, camera, contacts, photos, or notification permissions. If you need those permissions, ask for them later inside the app after the user installs or opens it.

Web Funnels are best for web-safe steps:
Web Flows are best for web-safe steps:

- Multi-step education and onboarding.
- Multiple-choice questions.
Expand All @@ -127,7 +138,7 @@ Web Funnels are best for web-safe steps:

For route-based Flows, Superwall tracks Flow page views so you can inspect the user journey and identify drop-off. See [Flow Journey analytics](/dashboard/dashboard-creating-flows/analytics) for details.

For acquisition campaigns, add query string parameters to the Web Checkout link and use them in audience filters or paywall variables. This is useful for paid ads, creator campaigns, lifecycle email, and other sources where you want the funnel to adapt to the traffic source. See [query string parameters in Web Checkout links](/web-checkout/web-checkout-creating-campaigns-to-show-paywalls#how-query-string-parameters-work).
For acquisition campaigns, add query string parameters to the Web Checkout link and use them in audience filters or paywall variables. This is useful for paid ads, creator campaigns, lifecycle email, and other sources where you want the flow to adapt to the traffic source. See [query string parameters in Web Checkout links](/web-checkout/web-checkout-creating-campaigns-to-show-paywalls#how-query-string-parameters-work).

## Related docs

Expand Down
2 changes: 1 addition & 1 deletion content/docs/dashboard/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"templates",
"dashboard-creating-paywalls",
"dashboard-creating-flows",
"guides/web-funnels",
"guides/web-flows",
"charts",
"dashboard-demand-score",
"assets",
Expand Down
Loading
Loading