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,6 +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.
- **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 @@ -49,9 +49,10 @@ To change an animation:

Available animations:

- **Push** Slides the new page in from the right.
- **Push**: Slides the new page in from the right.
- **Fade**: Crossfades between pages.
- **Slide**: Smooth horizontal transition, like scrolling through a carousel.
- **Fade & Slide**: Combines a fade with a slide transition.
- **None**: Instant transition with no animation.

### Unlinked pages
Expand All @@ -69,7 +70,7 @@ Routes can be conditional, meaning users can see different pages based on their
To add branching:

1. Connect a route in the Canvas to a page.
2. Then, from the same destination of the route, click and drag it to add _another_ route to a different page.
2. Then, from the same source page, click and drag to add _another_ route to a different destination page.
3. Then, configure the rules from the resulting popup.

In this example, a route is already in place to go from the left-most page to the middle one. Adding another route from the same page to a new page creates a branch. The Flow editor recognizes that the route can now end up in more than one place:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: "Control how users move through your flow with forward and backward
Flows is currently in beta.
</Note>

Navigation in Flows is handled by the Navigation element and other components you add tap behaviors too (such as CTA buttons). Users move forward along the routes you've defined, or backward to previous pages. The system is intentionally simple. Complex routing logic lives in the routes, not the buttons.
Navigation in Flows is handled by the Navigation element and other components you add tap behaviors to (such as CTA buttons). Users move forward along the routes you've defined, or backward through the pages they've already visited. The system is intentionally simple. Complex routing logic lives in the routes, not the buttons.

### The Navigation element

Expand Down Expand Up @@ -43,7 +43,7 @@ Additionally, you can manually set which page should be navigated to within the

### Going forward and backward

When a user taps **Forward**, they move to the next page based on the route you've connected from the current page. If there's no branching, they go to the single connected page. If there's branching, the route conditions determine which page comes next. When they tap **Back**, they return to the last page they visited, unless any branching logic dictates otherwise.
When a user taps **Forward**, they move to the next page based on the route you've connected from the current page. If there's no branching, they go to the single connected page. If there's branching, the route conditions determine which page comes next. When they tap **Back**, they return to the last page they visited in that session. Back navigation follows the user's history; it does not re-evaluate route conditions in reverse.

### Auto-advance timer

Expand All @@ -69,4 +69,4 @@ You won't set a specific page number on a button in Flows. Instead, you simply m

<Tip>
Think of CTA buttons as "next" and "back". The routes decide where "next" actually goes.
</Tip>
</Tip>
138 changes: 138 additions & 0 deletions content/docs/dashboard/guides/web-funnels.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
---
title: "Web Funnels"
description: "Build web-to-app funnels 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.

<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.

<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.
</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.

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

## Web Funnels vs. app Flows

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

| Use case | App Flows | Web Funnels |
| --- | --- | --- |
| 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 |

## When to use Web Funnels

Use Web Funnels 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.
- **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.

## How Web Funnels work

A Web Funnel combines campaign routing, funnel 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.

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.

## Create a Web Funnel

### 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.
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:

```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

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

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.
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.

For the full editor walkthrough, start with [Getting Started with Flows](/dashboard/dashboard-creating-flows/getting-started).

### 4. Design the web-to-app handoff

The final pages should make the next step clear. Depending on your setup, that might be:

- Starting [Stripe checkout](/web-checkout/web-checkout-testing-purchases).
- Redirecting to the App Store, another app download page, or your own install instructions.
- Opening your app with a deep link or universal link.
- Sending the user through Superwall's web checkout redemption flow.
- Redirecting to your own account creation or activation page.

If you are using Redeem mode, make sure your app is ready to handle the post-checkout deep link. See [SDK setup for Web Checkout](/web-checkout/web-checkout-sdk-setup).

## 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:

- 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 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.

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.

Web Funnels are best for web-safe steps:

- Multi-step education and onboarding.
- Multiple-choice questions.
- Personalization and branching.
- Ad attribution and campaign-specific targeting.
- Web checkout.
- Campaign-specific messaging.
- App download, app open, or account activation calls to action.

## Track performance

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).

## Related docs

- [Getting Started with Flows](/dashboard/dashboard-creating-flows/getting-started)
- [How Flows are Structured](/dashboard/dashboard-creating-flows/how-flows-are-structured)
- [Linking Pages](/dashboard/dashboard-creating-flows/linking-pages)
- [Web Checkout](/web-checkout)
- [Web Checkout Links](/web-checkout/web-checkout-creating-campaigns-to-show-paywalls)
1 change: 1 addition & 0 deletions content/docs/dashboard/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"templates",
"dashboard-creating-paywalls",
"dashboard-creating-flows",
"guides/web-funnels",
"charts",
"dashboard-demand-score",
"assets",
Expand Down
Binary file added content/docs/images/web_funnel_example.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added content/docs/images/web_funnel_overview.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading