Skip to main content

Creating Funnels

AIAsk AIChatGPTClaude

Use the Funnel Editor to design multi-step web experiences with customizable screens, branching logic, and seamless checkout integration.

📘Before you begin

Funnels require a payment provider (RevenueCat Web Billing or Paddle) to be configured. Make sure you've completed the payment configuration before creating your first funnel.

Creating a new funnel​

To create a new funnel, navigate to your project's Web section in the RevenueCat Dashboard and click Create web funnel. You'll have two options:

  1. From scratch: Start with a blank funnel and build it step by step
  2. Using template: Choose from pre-built funnel templates as a starting point

Using templates​

Templates provide pre-configured funnel structures that you can customize. When you select Using template, you'll see a gallery of available templates. Each template includes:

  • Pre-configured steps with sample content
  • Example flow logic and connections
  • Suggested component layouts

Selecting a template creates a new funnel as a copy of that template, named Copy of [template name]. You can customize any aspect of a template after selecting it — templates are just starting points to help you get up and running quickly.

Understanding the Funnel Editor​

The Funnel Editor has two main modes:

Interaction mode​

Interaction mode is where you design the flow of your funnel. In this mode, you can:

  • See all steps in your funnel as visual nodes
  • Connect steps together to define the user journey
  • Add new steps (screens or checkout)
  • Configure which step is the initial entry point
  • Set up branching logic based on user actions

Design mode​

Design mode is where you customize the content and appearance of individual screens. When you select a screen step and enter Design mode, you'll see the familiar Paywall Editor interface where you can:

  • Add and arrange components (text, images, buttons, etc.)
  • Configure component properties and styling
  • Set up localizations
  • Preview how the screen looks on different devices

Adding steps to your funnel​

Steps are the building blocks of your funnel. There are four types of steps:

Screen steps​

Screen steps are customizable pages built using RevenueCat's Paywall UI builder. To add a screen:

  1. Click Add page in the left sidebar
  2. Choose one of the following options:
    • Blank page: Start with an empty screen
    • From template: Use a paywall template as the starting point
    • From your paywalls: Copy an existing paywall from your project
    • From your funnels: Copy a screen from another funnel

Once added, you can click on the screen node in Interaction mode and switch to Design mode to customize its content.

Authentication steps​

Authentication steps allow you to redirect users to your own authentication system and bring them back to the funnel once they've logged in. This is useful when you need users to authenticate before proceeding to checkout or accessing certain content.

To add an authentication step:

  1. Click Add page in the left sidebar
  2. Select Authentication

Setting up the redirect flow​

After adding an authentication step, configure where users will be sent to authenticate:

  1. Click on the authentication step in the editor
  2. In the right panel, enter your External authentication URL
  3. This should be the URL of your authentication page (e.g., https://auth.example.com/login)
📘Query parameters

If your external authentication URL includes query parameters (e.g., https://auth.example.com/login?tracking_id=123), they will be preserved when RevenueCat appends the redirect_uri and state parameters. This is useful for passing tracking information or other data to your authentication system.

When a user reaches this authentication step, RevenueCat will redirect them to your external authentication URL with two query parameters:

  • redirect_uri: The callback URL where you must redirect users after authentication
  • state: A token used to tie the session together (you must return this unchanged)

Example redirect URL your authentication page will receive:

https://auth.example.com/login?redirect_uri=https%3A%2F%2Fsignup.cat%2Ffunnel%2Fcallback&state=eyJub25jZSI6IjEyMyIsIndvcmtmbG93X2xpbmtfaWQiOi4uLn0=

Redirecting back to the funnel​

After a user successfully authenticates, your authentication system must redirect back to the redirect_uri with two required query parameters:

  • state: The exact same state value you received (required)
  • app_user_id: The authenticated user's ID from your system (required)

Example callback URL you should redirect to:

https://signup.cat/funnel/callback?state=eyJub25jZSI6IjEyMyIsIndvcmtmbG93X2xpbmtfaWQiOi4uLn0=&app_user_id=user_12345
⚠️State parameter is required

You must include the state parameter exactly as you received it. Do not modify this value or RevenueCat validation will fail.

📘Callback URL

The redirect_uri parameter will always point to /funnel/callback on the appropriate domain (https://signup.cat/funnel/callback by default, or your custom domain if configured). For security, we recommend allowlisting these callback URLs in your authentication system. You can either use the redirect_uri parameter dynamically in your redirect or hard-code the callback URL if you know your domain configuration.

Auto-advance for authenticated users​

If a user who is already authenticated reaches an authentication step, they will automatically advance to the next step without being redirected. This prevents unnecessary re-authentication when users navigate back through your funnel.

Branch nodes​

Branch nodes are dedicated routing steps that evaluate conditions and direct users to different steps based on rules you define. Use a branch node when you need to split your funnel flow based on user data, UTM parameters, survey answers, or any other conditions — without tying that logic to a specific screen or button.

To add a branch node:

  1. Click Add page in the left sidebar
  2. Select Branch

Configuring routing rules​

After adding a branch node, click on it to open the Branch settings panel. Click Edit to open the rule editor.

Branch nodes can be setup to always navigate to a given step, or navigate to different steps depending on conditional rules you configure. Each conditional rule consists of:

  • A condition: based on user inputs, UTM parameters, URL parameters, or other context available in your funnel
  • A destination: the step to navigate to when the condition is met

You can add as many rules as needed. Rules are evaluated top to bottom, so order matters.

Checkout steps​

Checkout steps handle the payment flow. To add a checkout:

  1. Click Add page in the left sidebar
  2. Select Checkout

Checkout steps are automatically configured to use your configured payment provider (Web Billing or Paddle) and will display the appropriate payment interface based on your project's configuration.

📘Checkout configuration

Checkout steps use the app configuration and offering settings from your funnel's settings. Make sure your funnel is associated with the correct app and offering before adding checkout steps.

Connecting steps​

Steps are connected via triggers and actions. A trigger is an event that occurs on a step (like a button press), and an action defines what happens next (like navigating to another step).

Connecting steps visually​

In Interaction mode, you can connect steps by:

  1. Hovering over a step node to see available trigger handles
  2. Dragging from a trigger handle to another step's target handle
  3. The connection will be created automatically

Supported triggers​

Different components on your screens can trigger navigation:

TriggerDescriptionCan connect to
Button pressWhen a user clicks a button componentAny screen or checkout step
Purchase button pressWhen a user clicks a purchase buttonCheckout steps only
Option selectionWhen a user selects an option in an input component that's setup to immediately advance themAny screen with an option component

Configuring trigger actions​

When you connect a trigger to a step, you can configure the action:

  1. Click on the connection (edge) between two steps
  2. In the settings panel, you can configure:
    • Target step: Which step to navigate to
    • Conditional logic: Determine which step to navigate to based on conditions like UTM parameters, visitor demographics, other URL parameters, or visitor inputs

Customizing screen content​

When you select a screen step and enter Design mode, you'll use the same powerful editor that powers RevenueCat Paywalls. This means you have access to all the same components:

Available components​

ComponentDescriptionUse case
TextCustomizable text stringsHeadlines, descriptions, instructions
ImageUploaded imagesBranding, illustrations, screenshots
VideoUploaded videosProduct demos, testimonials
IconPre-built iconsVisual indicators, feature highlights
StackContainer for other componentsLayout organization
ButtonInteractive buttonsNavigation, actions, links
Purchase ButtonPurchase call-to-actionDirect users to checkout
Input: Single ChoiceSelect a single option from a listSurvey questions, preference selection
Input: Multiple ChoiceSelect a configurable number of options from a listMulti-select questions
PackageProduct/package displayShow available products
CarouselSwipeable content pagesFeature showcases
TimelineSequential item displayProcess steps, milestones
TabsTabbed content sectionsOrganize multiple packages into groups
CountdownLive countdown timerUrgency, deadlines

Input components​

Single Choice and Multiple Choice input components allow you to collect user selections that can be used for conditional navigation in your funnel.

Component structure​

Options components have a hierarchical structure:

  • Single Choice or Multiple Choice component: The container component that all child components are nested within

    • Identifier: A unique identifier for the field (required for publishing). This ID is used to reference the field's value in conditional logic.
    • Required: Whether the user must make a selection on this input before being allowed to proceed
    • Selection Range (Multiple Choice only): Constrains how many options can be selected:
      • Unlimited: Users can select any number of options
      • Exact: Users must select exactly a specified number (e.g., exactly 2)
      • Range: Users must select between a minimum and maximum number (e.g., 1-3 options)

  • Options: Individual selectable options nested inside the input component

    • Option ID: A unique identifier for the option (required for publishing)
    • Option Value: The value that will be stored when this option is selected (required for publishing)
    • Stack: Contains other components (like text or images) that define how the option appears visually

Using options in funnels​

Options components are particularly powerful in funnels because:

  1. Trigger navigation: When an option is selected, it can immediately trigger navigation to another step. Configure this by connecting the option's trigger handle to a target step in Interaction mode.

  2. Conditional logic: Option selections can be used in conditional expressions to determine which step users navigate to. Reference the field's value using the field ID in your conditional logic.

📘Coming soon

Selected option values will additionally be provided as dimensions to filter and breakdown analytics by, and as variables for screen content, in the near future.

For detailed information about each component and its properties, see the Paywalls Components documentation.

Configuring funnel settings​

The Settings panel allows you to configure funnel-wide options:

Initial step​

The initial step is the first page users see when they access your funnel. To set the initial step:

  1. Open the Settings panel from the left sidebar
  2. Under Initial step, select the step you want to use as the entry point

You can change the initial step at any time, and the change will be saved as part of your draft.

Parameters​

Funnels support custom parameters that can be passed via URL and used throughout your funnel. Parameters are useful for:

  • Including custom tracking data
  • Personalizing the experience based on the source

To add a parameter:

  1. Open the Settings panel
  2. Under Parameters, click Add parameter
  3. Configure:
    • Name: The parameter name (e.g., utm_source)
    • Type: The data type (string, string[], number, or boolean)

Parameters can be referenced in your funnel's components using variables, similar to how paywall variables work.

📘UTM Parameters

Standard UTM parameters are automatically captured and made available to your funnel, you do not need to manually add them as URL parameters.You can use them in your funnel's components to personalize the experience based on the source of the visitor.

Saving and publishing​

Funnels have two states:

StateDescription
DraftYour work-in-progress funnel. Changes are automatically saved as you work. Draft funnels are not accessible via public URLs.
PublishedYour live funnel that's accessible via shareable URLs. Published funnels can be viewed by users.

Auto-save​

The Funnel Editor automatically saves your changes as you work. You'll see an indicator showing when your last changes were saved.

Publishing​

To make your funnel live:

  1. Ensure your funnel has at least one step
  2. Click Publish in the top-right corner
  3. Confirm the publish action

Once published, your funnel will be available via shareable URLs for both production and sandbox environments.

⚠️Publishing changes

When you publish a funnel, the current draft becomes the live version. Users accessing your funnel URL will see the published version. You can continue editing after publishing—changes will be saved as drafts until you publish again.

Next steps​