Build a Web Flow

A Web Flow is built with the same Flow editor and the same Screen Composer as your In-App Flows. If you have already built a Flow in Purchasely, you know most of what follows; this page focuses on what is specific to the web. If not, start with Building a Flow with the Flow Composer and come back here.

Open Web2App → Flows: https://console.purchasely.io/web2app?tab=flows.

What a Web Flow is made of

1. Create the flow

1. In the Flows tab, click New Web Flow. The Flow editor opens on an empty web flow.
2. In the settings panel, give the flow a name and, optionally, a vendor ID you will recognize in your data.

The flow gets its live URL and sandbox URL as soon as it is saved. Both are shown in the settings panel with a copy button and a QR code to open them on your phone. The sandbox URL runs the same flow against Stripe test mode: use it to test and to demo, and share only the live URL in your campaigns.

2. Add your Screens

Add a step from the editor, then either pick an existing Screen, create one in the Composer or generate one from a prompt. When you create a Screen from a Web Flow, the Composer opens on its Web platform tab, with a web preview.

A typical funnel chains:

1. a landing Screen with your promise and social proof,
2. a few quiz Screens whose answers are saved as user attributes,
3. a loading or "building your plan" Screen that makes the personalization visible,
4. a paywall Screen with one or more purchase actions.

Quiz answers and text inputs are stored as user attributes. Use them to branch the flow with conditional transitions, exactly as in an In-App Flow (see Tailoring Flows to the user insights), and to personalize later Screens with dynamic text. They follow the user into the app once the subscription is redeemed.

📘

Keep the answers you want to use later

By default, an answer collected on the web only drives the flow. To store it in the user's profile, so that it is available in the app after the redemption, in your webhooks and for targeting, tick the box that saves the user attribute when you configure the quiz or the text input.

The Web components & AI generation page details the components specific to the web: text input, custom HTML, spin wheels and other generated components.

3. The purchase, the checkout and the Redeem step

As soon as a Screen of the flow contains a purchase action, Purchasely:

• adds a Redeem step at the end of the flow,
• connects the purchase action to it, with a Stripe Checkout chip on the transition.

At runtime, the purchase opens the Stripe checkout over the funnel. After a successful payment, the visitor lands on the Redeem step, which opens your app and activates the subscription; a receipt with the same link is emailed to them. See After the purchase.

The Redeem step is managed for you:

• it cannot be deleted, moved or set as the first step,
• it does not accept manual connections: only purchase actions lead to it,
• its Screen is generated from your app icon and brand colors. You can edit it freely in the Composer, as long as you keep the redemption button that opens the app.

🚧

Every plan needs a Stripe price

If a purchase action sells a plan without a Stripe price, the editor shows a warning: on the web the checkout cannot start, and the Redeem step is never reached. Map the plan in Setup 1 · Connect Stripe.

4. Transitions and animations

On the web, every transition is full screen. Instead of the mobile display modes, the flow settings offer a Web transition animation applied between all steps: Fade, Slide, Tiles, Curtain or None.

5. Custom JavaScript (optional)

The settings panel of a Web Flow has a Custom JavaScript field, executed on every page of the funnel. Use it for scripts you need on the web only, such as a consent manager or an analytics tag not covered by the ad platform integrations. A Screen can also carry its own script from its settings in the Composer.

6. Publish

As with In-App Flows, changes to the structure of a Web Flow (steps, transitions, settings) are visible on the live URL only once you publish the flow from the editor. Changes made to a Screen inside the flow, in the Composer, are reflected immediately on the live URL.

The Publish flow on Web toggle in the flow's header controls whether the flow is served at all. It is on by default when the flow is created. Turn it off to take a funnel offline: its URLs then return an HTTP 404 page. Turn it on again to bring it back.

Since Screen edits go live at once, iterate on the sandbox URL or on a duplicate of the flow, and edit the Screens of a live funnel only when you are ready. See Test and go live for the full checklist.

Managing your Web Flows

The Flows tab lists your Web Flows with a Web badge, and a green TEST badge when an A/B test is running on the flow. From a flow's menu you can:

• Edit it,
• Duplicate it, to create a campaign-specific variant in seconds,
• Duplicate for In-App, to turn the funnel into an In-App Flow that reuses the same Screens,
• Delete it.

👍

One funnel per campaign

Duplicate a proven funnel for each campaign and adapt its first Screens to the promise of the ad. Every duplicate has its own URLs, so you can read results funnel by funnel in your ad platforms and in Purchasely.

Troubleshooting