diff --git a/src/assets/Inline/move-to-new-builder.svg b/src/assets/Inline/move-to-new-builder.svg new file mode 100644 index 0000000000..ea40f585f4 --- /dev/null +++ b/src/assets/Inline/move-to-new-builder.svg @@ -0,0 +1 @@ + diff --git a/src/assets/shared/img/move-to-new-builder.webp b/src/assets/shared/img/move-to-new-builder.webp new file mode 100644 index 0000000000..753478f82b Binary files /dev/null and b/src/assets/shared/img/move-to-new-builder.webp differ diff --git a/src/assets/shared/img/paywall-imported-toast.webp b/src/assets/shared/img/paywall-imported-toast.webp new file mode 100644 index 0000000000..c8882bc3a1 Binary files /dev/null and b/src/assets/shared/img/paywall-imported-toast.webp differ diff --git a/src/content/docs/guides/flow-builder/convert-paywall-to-flow.mdx b/src/content/docs/guides/flow-builder/convert-paywall-to-flow.mdx new file mode 100644 index 0000000000..2dd1c21abf --- /dev/null +++ b/src/content/docs/guides/flow-builder/convert-paywall-to-flow.mdx @@ -0,0 +1,55 @@ +--- +title: "Convert a paywall into a flow" +description: "Recreate an existing paywall as an editable flow in one click. Your original stays live while you build and test the new version." +metadataTitle: "Convert a paywall into a flow | Adapty Docs" +keywords: ['paywall builder', 'old paywall builder', 'move to new builder', 'paywall migration'] +--- + +If your current paywall was made in the old Paywall Builder, you can convert it into a flow without rebuilding it. **Move to new builder** recreates the paywall as an editable flow in one click. Layout, text, products, and localizations carry over. Your original paywall stays live and unchanged, so you can build and test the flow before you switch to it. + +## What carries over + +The conversion recreates your paywall as a new draft flow, using real flow elements. It copies over: + +- **Layout and design**: The screens, elements, and styling from the original paywall. +- **Text**: All copy, in every locale you added. +- **Products**: Each product, with prices and discounts as variables rather than hardcoded values. + +The new flow is a separate copy. Your original paywall keeps running until you decide to switch. + +### Known limitations + +Not every old Paywall Builder element has a direct flow equivalent. The conversion gets close, but a few things need a manual pass afterward: + +- **Hero images and videos**: A full-width image or video may not carry over exactly as in the original paywall. +- **Media overlays**: Flows don't support overlay images yet. +- **Image tint and mask**: Neither carries over. +- **Custom fonts**: Fonts don't carry over on their own. [Upload the fonts and manually style the text](using-custom-fonts-in-flow-builder) after the conversion. +- **Layer order**: A known z-index bug can stack some elements in the wrong order. +- **Relative sizing**: Flows can't size elements as a percentage of the parent. +- **Maximum width**: Flow elements don't have a maximum width setting. +- **Spacing and padding** may drift insignificantly. + +Always [preview the flow on a real device](migrate-to-flows#preview-on-device) and fix anything that looks off. + +## Convert your paywall + +To convert a paywall into a flow, open the paywall's overview page and click **Move to new builder**. + +The **Move to new builder** button only appears for paywalls made with the old Paywall Builder. Paywalls built by hand need to be [recreated manually](paywall-builder-templates). + + + +After a successful conversion, Adapty opens the flow draft in the editor. You can make any changes you want before publishing it. + + + +## Serve your flow + +:::link +Main article: [Migrate to flows](migrate-to-flows) +::: + +Converting the paywall creates the flow. To show it to users, you point a placement at the flow and update the SDK. + +A flow needs its own placement with a new, unique ID, and it renders only on Adapty SDK v4 and later. [Migrate to flows](migrate-to-flows) covers both steps — creating the placement and upgrading the SDK. It also explains how to keep your original paywall live during the switch. diff --git a/src/content/docs/guides/flow-builder/migrate-to-flows.mdx b/src/content/docs/guides/flow-builder/migrate-to-flows.mdx index c79426dfb9..a5b91f6c1d 100644 --- a/src/content/docs/guides/flow-builder/migrate-to-flows.mdx +++ b/src/content/docs/guides/flow-builder/migrate-to-flows.mdx @@ -8,7 +8,7 @@ import CustomDocCardList from '@site/src/components/CustomDocCardList'; In Adapty, a *flow* combines an onboarding and a paywall into a single entity behind one placement. A flow replaces the separate onboarding and paywall that you build and serve on their own today. -This guide explains what changes when you move to flows and how to roll the change out without disrupting users on older app versions. +This guide explains what changes when you move to flows and how to roll the change out without disrupting users on older app versions. Most of it is no-code: you can convert an existing paywall into a flow in one click. :::important Flows are currently supported in iOS SDK v4 and up, Android SDK v4 and up, React Native SDK v4 and up, and Capacitor SDK v4 and up. Support for other platforms and frameworks is coming soon. @@ -38,47 +38,42 @@ Flows are currently supported in iOS SDK v4 and up, Android SDK v4 and up, React /> -## Flows vs. onboardings and paywalls +## Why you should migrate -With separate onboardings and paywalls, you maintain two builders and two placements. You also hand users off from the onboarding to the paywall in your own code. +Adapty is sunsetting the standalone paywall and onboarding builders. Flows already offer native rendering, superior performance, and a richer feature set. New features will only ship to flows. -A flow replaces both with one experience — intro screens, a quiz, and the purchase screen — built in one editor and served from one placement. +Flows also replace two builders and two placements with a streamlined experience, so there's less to build and maintain. And moving is easy — you can convert your paywall builder creations in one click. -The table below compares what each option gives you: +Your existing onboardings and paywalls keep working, so nothing breaks before you migrate. Move at your own pace. -| | Flow | Paywall Builder paywall | Onboarding | -|---|---|---|---| -| Multiple screens | Yes | No — single screen | Yes | -| Rendering | Native | Native | WebView | -| Products and placement | One placement; you add products directly to the flow | One placement; you add products directly to the paywall | One placement, but no products of its own — to sell, you create a separate paywall and serve it from its own placement | +## How to migrate -## Should you migrate? +Migration takes three steps and minimal code changes. If you used the old paywall builder, the design can be converted with a single click. -Your existing onboardings and paywalls keep working, and Adapty continues to support them. New features, however, now ship to flows rather than to the standalone onboarding and paywall builders. +1. **[Convert or recreate your paywall](#convert-your-paywall-or-recreate-it-by-hand)**. If a paywall is made with the old Paywall Builder, you can convert it to a flow with a single click — no developer needed. Any other paywall or onboarding needs to be [manually recreated](paywall-builder-templates). +2. **[Create a new placement for your flow](#create-a-new-placement-for-your-flow)**: Give the flow its own placement with a new, unique ID. The flows can coexist with your existing paywall and onboarding placements, so you can transition gradually. +3. **[Update the SDK](#update-the-sdk)**: Upgrade to SDK v4, fetch the flow from its placement, and verify with a sandbox purchase. This task requires a few lines of code. -**If you're building for the long term, flows are the better foundation** — migrate to them when it fits your release schedule. +### Convert or recreate your paywall -## How to migrate +:::link +Main article: [Convert a paywall into a flow](convert-paywall-to-flow) +::: -The migration has four steps. Most of the effort is a one-time SDK upgrade — building and previewing the flow is no-code. +**If you built the paywall with the old Paywall Builder, convert it in one click.** Open its overview page and click **Move to new builder**. Adapty recreates it as a flow, keeping the layout, text, products, and locales. -1. **[Build your flow](#build-your-flow)**: Create a flow in the no-code editor; no developer needed. -2. **[Preview on device](#preview-on-device)**: Check the flow on a real device through the Adapty mobile app; no app build needed. -3. **[Create a new placement for your flow](#create-a-new-placement-for-your-flow)**: Create a new flow placement with its own unique ID, and decide how it coexists with your existing placements. -4. **[Update the SDK](#update-the-sdk)**: Upgrade to iOS, Android, React Native, or Capacitor SDK v4, fetch the flow from its placement, and verify a sandbox purchase. This is the main developer task. +If you built the paywall by hand, or you're migrating an onboarding, one-click conversion isn't available. [Create a flow](paywall-builder-templates) from one of the available templates — or completely from scratch. -### Build your flow +:::note +AI flow generation is coming soon. +::: -On the **Flows** page, click **Create flow** to start building, recreating your onboarding and paywall as one experience. To learn more about the builder: +To learn more about the builder: - **[Flows documentation](adapty-flow-builder)**: Walks you through the builder and what you can create. - **[Common flow recipes](flow-builder-recipes)**: Step-by-step guides for the most common screens. - **Ask AI**: Use the chat on any docs page when you get stuck. -:::note -Building a flow from a ready-made flow template or generating one with AI isn't available yet — both are coming soon. For now, every new flow starts with several commonly used screens that you can edit and style for your needs. -::: - ### Preview on device You can preview the flow on a real device without touching the app. Download the [Adapty app](https://apps.apple.com/us/app/adapty/id6739359219) from the App Store. Then, in the flow builder, click **Test on device**, choose a locale, and scan the QR code with your device. This shows the real screens, branching, copy, and design. @@ -96,14 +91,16 @@ A placement serves one type of content only — a flow, a paywall, or an onboard **Give the new flow placement a completely new, unique placement ID.** It can't match or reuse the ID of an existing paywall or onboarding placement. :::warning -Keep your old placements live during the transition +**Keep your old placements live during the transition** + +
Users on older app versions have your onboarding and paywall placement IDs compiled into the app. They keep calling the onboarding and paywall methods and see your existing onboarding and paywall until they update. Retire the old placements only once your SDK v4 adoption is high enough. ::: -You don't have to move every location to flows at once. In SDK v4, the `getFlow` method fetches from both flow placements and paywall placements, so your app calls the same method everywhere. Keep Paywall Builder paywalls in the placements where you want them, and use flows in the rest. +You don't have to move every location to flows at once. In SDK v4, the `getFlow` method fetches from both flow placements and paywall placements, so your app calls the same method everywhere. Migrate placements as you go — flows and any remaining paywalls run side by side during the transition. During the transition, each placement type tracks its own metrics. While both old and new app versions are live, your data splits across two sets of placements. The old onboarding and paywall placements cover older versions; the new flow placement covers SDK v4+. Compare these as separate cohorts, and expect the flow placement's share to grow as users update. @@ -113,6 +110,8 @@ You can keep A/B testing with flows: run a [Regular A/B test](ab-tests) across f With your flow placement ready, point the app at it. Flows render only on the Adapty SDK v4 and later. Upgrade the SDK and fetch the flow from your new placement with `getFlow`. See the v4 migration guide for your platform — [iOS](migration-to-ios-sdk-v4), [Android](migration-to-android-sdk-v4), [React Native](migration-to-react-native-sdk-v4), or [Capacitor](migration-to-capacitor-sdk-v4) — for specific upgrade steps. +Each migration guide has a **Copy for LLM** button at the top. Copy the guide, paste it into your AI coding assistant, and let it apply the upgrade to your app. + Once the flow is wired in, verify it like any other purchase flow: run it on a device or simulator and make a sandbox purchase ([iOS](ios-test) / [Android](testing-on-android)) to confirm that products, the purchase, and the access level all work. :::note @@ -120,3 +119,17 @@ Users see flows only after they install the app built with SDK v4+. Anyone on an ::: + +## Flows vs. old paywalls and onboardings + +Flows are a better, more modern, native-first, all-in-one alternative to both paywalls and onboardings. They expand your toolset whether you used the old paywall builder, the onboarding builder, or neither: + +| | Flows | Paywall Builder paywalls | Onboardings | +|---|---|---|---| +| Editor | Visual, design-tool-style canvas | Single-screen form editor | Visual canvas | +| Multiple screens | Yes | No — single screen | Yes | +| Rendering | Native | Native | WebView | +| Quizzes | Yes | No | Yes | +| Inputs & forms | Yes | No | Yes | +| Conditional logic without code | Yes | No | Yes | +| Products | Add products directly to the flow | Add products directly to the paywall | No product support — to sell products, you need to serve a separate paywall from a separate placement | diff --git a/src/content/docs/version-3.0/paywall-builder-templates.mdx b/src/content/docs/version-3.0/paywall-builder-templates.mdx index 341dc654a7..55810c2982 100644 --- a/src/content/docs/version-3.0/paywall-builder-templates.mdx +++ b/src/content/docs/version-3.0/paywall-builder-templates.mdx @@ -5,7 +5,7 @@ metadataTitle: "Create a flow | Flow Builder | Adapty Docs" keywords: ['flows', 'create flow', 'template', 'flow builder', 'paywall builder'] --- -You can create a flow from a template or from scratch. +You can create a flow from a template, from scratch, or from an existing paywall. ## Create flow @@ -43,6 +43,22 @@ The template loads in the builder. From here, you can change any element, screen Start from Scratch creates a flow with a single blank screen. Design the screen with elements from the [elements library](builder-elements). +## Convert an existing paywall + +:::link +Main article: [Convert a paywall into a flow](convert-paywall-to-flow) +::: + +:::warning + **Move to new builder** only converts paywalls. Onboardings and manually built paywalls require manual migration. +::: + +Instead of building a flow from a template, you can convert an old Paywall Builder paywall you already have. + +Open the paywall's dashboard page and click **Move to new builder**. Adapty recreates the paywall as a new draft flow — keeping the layout, text, products, and localizations. The old paywall remains functioning to allow for a smooth transition. + + + ## Change the template You can switch templates from inside the builder. Open the Screens panel and click the **Templates** button to reopen the Template library, then pick a new template. diff --git a/src/data/sidebars/tutorial.json b/src/data/sidebars/tutorial.json index 941d020590..83f73b7e2b 100644 --- a/src/data/sidebars/tutorial.json +++ b/src/data/sidebars/tutorial.json @@ -285,6 +285,11 @@ "id": "migrate-to-flows", "label": "Migrate to flows" }, + { + "type": "doc", + "id": "convert-paywall-to-flow", + "label": "Convert a paywall into a flow" + }, { "type": "doc", "label": "Screens and Layers",