diff --git a/content/docs/dashboard/dashboard-creating-flows/analytics.mdx b/content/docs/dashboard/dashboard-creating-flows/analytics.mdx index bd23302..e8ca1b7 100644 --- a/content/docs/dashboard/dashboard-creating-flows/analytics.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/analytics.mdx @@ -3,10 +3,6 @@ title: "Flows Analytics" description: "Understand Flow Journey analytics, drop-off, page transitions, and how users move through multi-page flows." --- - -Flows is currently in beta. - - Flows Analytics help you understand how users move through a flow after it is live. Instead of only seeing whether a paywall opened or converted, you can inspect each step in the journey, see where users drop off, and compare how different flow variants perform. You will find Flows Analytics in experiment results for flows. The section is called **Flow Journey**. diff --git a/content/docs/dashboard/dashboard-creating-flows/flow-elements.mdx b/content/docs/dashboard/dashboard-creating-flows/flow-elements.mdx index 1792d84..d1b7b99 100644 --- a/content/docs/dashboard/dashboard-creating-flows/flow-elements.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/flow-elements.mdx @@ -3,10 +3,6 @@ title: "Flow Elements" description: "Add interactive elements to your flows: multiple choice, text entry, progress indicators, and date pickers." --- - -Flows is currently in beta. - - Flows can be enhanced with interactive components designed for multi-page experiences. They capture user input, show progress, or request permissions. Use them to personalize the flow or gather information for branching. ## Multiple Choice diff --git a/content/docs/dashboard/dashboard-creating-flows/getting-started.mdx b/content/docs/dashboard/dashboard-creating-flows/getting-started.mdx index e948cf2..682d4f9 100644 --- a/content/docs/dashboard/dashboard-creating-flows/getting-started.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/getting-started.mdx @@ -4,10 +4,6 @@ sidebarTitle: "Getting Started" description: "Create multi-page experiences like onboarding flows, cancellation surveys, and more. All within the same Superwall editor you're familiar with." --- - -Flows is currently in beta. - - Flows let you string together multiple pages into a single, seamless experience. They're ideal for onboarding, cancellation surveys, upsells, or any multi-step journey. They're built right into the same editor you use for paywalls. diff --git a/content/docs/dashboard/dashboard-creating-flows/how-flows-are-structured.mdx b/content/docs/dashboard/dashboard-creating-flows/how-flows-are-structured.mdx index cd366a0..4533abb 100644 --- a/content/docs/dashboard/dashboard-creating-flows/how-flows-are-structured.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/how-flows-are-structured.mdx @@ -4,10 +4,6 @@ sidebarTitle: "How Flows Work" description: "Understand the key concepts of a Flow: the navigation element, pages, routes, and branching." --- - -Flows is currently in beta. - - A Flow is a collection of pages connected by routes. Unlike single paywalls, the order of pages in the sidebar doesn't determine the flow. The connections (i.e. _routes_) you create do. The Navigation element is what makes a paywall opt into becoming a Flow. To understand flows, you only need to be aware of these core concepts to get started: diff --git a/content/docs/dashboard/dashboard-creating-flows/linking-pages.mdx b/content/docs/dashboard/dashboard-creating-flows/linking-pages.mdx index 3430352..2b2fcc1 100644 --- a/content/docs/dashboard/dashboard-creating-flows/linking-pages.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/linking-pages.mdx @@ -3,10 +3,6 @@ title: "Linking Pages" description: "Connect pages with routes, configure animations, and set up conditional branching." --- - -Flows is currently in beta. - - Linking pages is how you define the path through your flow. You'll connect pages using nodes in the Canvas view, and each connection (route) can have its own animation and conditions. ![](/images/flows_link_first.gif) diff --git a/content/docs/dashboard/dashboard-creating-flows/navigation.mdx b/content/docs/dashboard/dashboard-creating-flows/navigation.mdx index 0f8ca7b..215fbee 100644 --- a/content/docs/dashboard/dashboard-creating-flows/navigation.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/navigation.mdx @@ -3,10 +3,6 @@ title: "Navigation" description: "Control how users move through your flow with forward and backward navigation." --- - -Flows is currently in beta. - - 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 diff --git a/content/docs/dashboard/dashboard-creating-flows/ordering-screens.mdx b/content/docs/dashboard/dashboard-creating-flows/ordering-screens.mdx index ae001f4..f93c77d 100644 --- a/content/docs/dashboard/dashboard-creating-flows/ordering-screens.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/ordering-screens.mdx @@ -3,10 +3,6 @@ title: "Ordering Screens" description: "Understand how page order works in Flows and how to organize your Canvas." --- - -Flows is currently in beta. - - In Flows, the order of pages in the sidebar doesn't determine the user's path. Routes define the order, not the list position. The sidebar and Canvas positions are purely for your organization. ### How order works diff --git a/content/docs/dashboard/dashboard-creating-flows/permission-prompts.mdx b/content/docs/dashboard/dashboard-creating-flows/permission-prompts.mdx index ea85b41..2589c6a 100644 --- a/content/docs/dashboard/dashboard-creating-flows/permission-prompts.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/permission-prompts.mdx @@ -3,10 +3,6 @@ title: "Permission Prompts" description: "Request system permissions like notifications, location, and camera at the right moment in your flows." --- - -Flows is currently in beta. - - Requesting permissions is a natural part of many flows, especially onboarding. Rather than prompting for notifications or location access at a random moment, you can ask at the right point in a flow after the user understands the value. Permission prompts are not a standalone element. They are a [tap behavior](/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements#tap-behaviors) called **Request Permission** that you attach to a button or other tappable component. When the user taps it, the system permission dialog appears. diff --git a/content/docs/dashboard/dashboard-creating-flows/the-canvas.mdx b/content/docs/dashboard/dashboard-creating-flows/the-canvas.mdx index 88a6e4c..7e37fb9 100644 --- a/content/docs/dashboard/dashboard-creating-flows/the-canvas.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/the-canvas.mdx @@ -3,10 +3,6 @@ title: "The Canvas" description: "See your entire flow at a glance, zoom in and out, and use the mini-map to navigate complex flows." --- - -Flows is currently in beta. - - The Canvas is a display mode in the paywall editor tailored to help you see your entire flow laid out. It works similar to many design tool canvas' in that you can pan around, zoom to see the big picture, or click any page to focus it. ### Device view vs. Canvas view diff --git a/content/docs/dashboard/dashboard-creating-flows/tips.mdx b/content/docs/dashboard/dashboard-creating-flows/tips.mdx index abf0a88..4d6bc14 100644 --- a/content/docs/dashboard/dashboard-creating-flows/tips.mdx +++ b/content/docs/dashboard/dashboard-creating-flows/tips.mdx @@ -3,10 +3,6 @@ title: "Tips" description: "Practical advice for building effective flows." --- - -Flows is currently in beta. - - Want to watch some of these tips in action? Check out this video: [Watch on YouTube](https://youtu.be/lkIxyC6tQwo) diff --git a/content/docs/dashboard/guides/using-superwall-for-onboarding-flows.mdx b/content/docs/dashboard/guides/using-superwall-for-onboarding-flows.mdx index d669e20..32ab2ec 100644 --- a/content/docs/dashboard/guides/using-superwall-for-onboarding-flows.mdx +++ b/content/docs/dashboard/guides/using-superwall-for-onboarding-flows.mdx @@ -1,120 +1,185 @@ --- -title: "Using Superwall for Onboarding Flows" -description: "Due to the flexible nature of our paywalls and SDK, you can easily use Superwall for onboarding flows." +title: "Using Flows for Onboarding" +description: "Build first-run app onboarding with Flows, branching, user attributes, permission prompts, paywalls, and Flow Journey analytics." --- -Superwall's flexible paywall system can be used for building engaging onboarding experiences. With multi-page paywalls, dynamic content, and powerful targeting rules, you can create interactive onboarding flows without shipping app updates. Here's a quick guide on how to get up and running. +Flows are the primary way to build onboarding in Superwall. Use them when you want to introduce the app, collect user preferences, branch users into different paths, request permissions at the right moment, present a paywall, and keep iterating without shipping app updates. -## Creating an onboarding campaign +This guide focuses on in-app onboarding after the user has installed or opened your app. If the journey starts on the web before app install, use [Web Flows](/dashboard/guides/web-flows) instead. -Start by creating a [campaign](/dashboard/dashboard-campaigns/campaigns) specifically for onboarding: + +If you are new to Flows, start with [Getting Started with Flows](/dashboard/dashboard-creating-flows/getting-started), then come back here for onboarding-specific structure and launch guidance. + -1. Navigate to **Campaigns** in the dashboard sidebar -2. Click **+ New Campaign** -3. Name it something like "User Onboarding" -4. Add a [placement](/dashboard/dashboard-campaigns/campaigns-placements) to trigger your onboarding flow +## How onboarding Flows work -## Triggering onboarding automatically +An onboarding Flow is a paywall with a [Navigation element](/dashboard/dashboard-creating-paywalls/paywall-editor-navigation-component) and route-based pages. Campaigns and placements decide when the onboarding Flow appears. The Flow editor controls what happens after that: screens, buttons, routes, branches, permission prompts, products, and post-purchase steps. -There are two main approaches to triggering onboarding: +![Onboarding Flow canvas with welcome, goals, permission, paywall, and start screens](/images/onboarding-flow-canvas-placeholder.jpg) -### Using the `app_install` placement +Some common patterns found in onboarding Flows might include: -The [`app_install`](/dashboard/dashboard-campaigns/campaigns-standard-placements) standard placement fires automatically when a user first installs your app. This is ideal for showing onboarding since it only fires once: +1. A welcome or value proposition page. +2. One or more preference questions using [Flow Elements](/dashboard/dashboard-creating-flows/flow-elements). +3. A personalized education or recommendation page. +4. A permission prompt, if the permission is part of the product experience. +5. A paywall or offer page. +6. A final confirmation, setup, or "start using the app" page. -1. Add `app_install` as a [placement](/dashboard/dashboard-campaigns/campaigns-placements) to your onboarding campaign -2. Optionally, in your [audience filters](/dashboard/dashboard-campaigns/campaigns-audience#using-user-properties-or-placement-parameters), add a condition like `user.totalPaywallViews` equals `0` to ensure it only shows to brand new users +You do not need every step in every app. Keep the Flow focused on the user decision or setup step that matters most. -Since `app_install` only fires once per install, you don't need additional logic to prevent it from showing multiple times. However, if users complete onboarding and you want to track that for other purposes, you can still [set a user attribute](/sdk/quickstart/setting-user-properties): +## Choose an entry point -```swift iOS -// Swift -Superwall.shared.setUserAttributes(["hasCompletedOnboarding": true]) +Most onboarding Flows start from either the `app_install` placement or a custom placement. -// Android -Superwall.instance.setUserAttributes(mapOf("hasCompletedOnboarding" to true)) +### Use `app_install` for first launch -// Flutter -Superwall.instance.setUserAttributes({ - "hasCompletedOnboarding": true -}); +The [`app_install`](/dashboard/dashboard-campaigns/campaigns-standard-placements) standard placement fires when the SDK is configured for the first time. Use it when the onboarding Flow should appear as part of the first-launch experience. -// React Native / Expo -await Superwall.shared.setUserAttributes({ hasCompletedOnboarding: true }); -``` +To set it up: + +1. Create a [campaign](/dashboard/dashboard-campaigns/campaigns) for onboarding. +2. Add `app_install` as a [placement](/dashboard/dashboard-campaigns/campaigns-placements). +3. Assign your onboarding Flow paywall to that placement. +4. If the Flow must be ready immediately, use [Priority Placements](/dashboard/dashboard-campaigns/campaigns-placements-prioritized) so Superwall preloads it before the rest of your campaigns. + +Because `app_install` fires once per install, it works well for simple first-run onboarding. If your app has account creation, migration screens, or other native setup before onboarding should begin, use a custom placement instead. + +### Use a custom placement for native control -### Using a custom placement +Use a custom placement when your app decides exactly when onboarding should begin. For example, you might present onboarding after account creation, after a welcome screen, or after restoring an existing session. -For more control over when onboarding appears, create a custom placement and register it manually: + ```swift iOS -// Swift -Superwall.shared.register(event: "start_onboarding") +Superwall.shared.register(placement: "onboarding_start") +``` -// Android -Superwall.instance.register("start_onboarding") +```kotlin Android +Superwall.instance.register(placement = "onboarding_start") +``` -// Flutter -Superwall.instance.register("start_onboarding"); +```dart Flutter +await Superwall.shared.registerPlacement("onboarding_start"); +``` -// React Native / Expo -await Superwall.shared.register({ placement: "start_onboarding" }); +```typescript React Native +await Superwall.shared.register({ placement: "onboarding_start" }); ``` -This approach lets you trigger onboarding based on specific user actions, like completing account setup or reaching a certain screen. + -## Building multi-page onboarding paywalls +Create the same placement in your onboarding campaign and assign the Flow paywall to it. -Superwall's [Navigation component](/dashboard/dashboard-creating-paywalls/paywall-editor-navigation-component) is perfect for creating multi-page onboarding experiences. Check out our [Simple Onboarding](https://superwall.com/templates?templateId=119147) template to see this in action. +## Build the Flow -To create a multi-page onboarding paywall: +Create the onboarding experience in the paywall editor: -1. In the paywall editor, click **+** to add a new element -2. Select **Navigation** under the "Base Elements" section -3. Add your onboarding content pages using [stacks](/dashboard/dashboard-creating-paywalls/paywall-editor-stacks) -4. Add buttons with tap behaviors to navigate between pages, or use transitions like Push, Fade, or Slide +1. Add a [Navigation element](/dashboard/dashboard-creating-paywalls/paywall-editor-navigation-component). +2. Add pages for each onboarding step. +3. Switch to Canvas view. +4. Connect the entry point to the first page. +5. Connect the rest of the pages with [routes](/dashboard/dashboard-creating-flows/linking-pages). +6. Add buttons with the **Navigate Page** tap behavior so users can move forward or backward. -You can also use the [Slides component](/dashboard/dashboard-creating-paywalls/paywall-editor-slides-component) if you want gesture-driven navigation or the [Carousel component](/dashboard/dashboard-creating-paywalls/paywall-editor-carousel-component) if you want slides that auto-advance. +Start with a linear Flow first. Once the basic path works, add branching, permission prompts, purchase steps, and post-purchase pages. -## Personalizing content with dynamic values +## Personalize the path -Use [variables](/dashboard/dashboard-creating-paywalls/paywall-editor-variables) and [dynamic values](/dashboard/dashboard-creating-paywalls/paywall-editor-dynamic-values) to show different content based on user attributes, device properties, or actions: +Onboarding is usually more effective when the user sees a path that reflects what they told you. Use [Multiple Choice](/dashboard/dashboard-creating-flows/flow-elements#multiple-choice), [Input](/dashboard/dashboard-creating-flows/flow-elements#input), and [Date Picker](/dashboard/dashboard-creating-flows/flow-elements#date-picker) elements to collect onboarding data. -**Show different messages based on device type:** -``` -if device.interfaceType is "ipad" - then "Welcome to the best iPad experience" -else - then "Welcome to your new favorite app" -``` +Common examples: -**Display personalized content using user attributes:** -``` -if user.accountType is "premium" - then "Unlock your premium features" -else - then "Discover what you can do" -``` +- Ask about the user's goal, then branch to different education screens. +- Ask about experience level, then change the amount of setup guidance. +- Collect a name, then use it in later copy. +- Ask for a target date, reminder time, or preference, then save it as an attribute. -This means you can go to certain pages based off a button they tapped showing a survey, change wording, which products to show, and more. Rely on dynamic values and variables to completely customize flows. +![Onboarding multiple-choice question branching to personalized routes](/images/onboarding-flow-branching-placeholder.jpg) -**Adjust layout based on onboarding progress:** +Branching is configured on routes in the Canvas, not inside each CTA. For example, a single **Continue** button can move forward while route conditions decide whether the next page is a beginner path, advanced path, permission explainer, or paywall. -Track which slide users are on using the [slides element variable](/dashboard/dashboard-creating-paywalls/paywall-editor-slides-component#tracking-or-updating-the-displayed-element-in-slides) and conditionally show/hide elements or change copy accordingly. +For setup details, see [Linking Pages](/dashboard/dashboard-creating-flows/linking-pages) and [Flow Elements](/dashboard/dashboard-creating-flows/flow-elements). -## Tracking onboarding analytics +## Set user attributes -To track onboarding metrics, you can use these [Superwall events](/sdk/guides/3rd-party-analytics/tracking-analytics) and can they can also be sent to your own analytics service. Additionally, you can also use [custom paywall actions](/sdk/guides/advanced/custom-paywall-actions) to trigger specific tracking events when users interact with buttons or elements in your onboarding flow, giving you detailed insights into user behavior and drop-off points. +Use onboarding answers to set user attributes. Those attributes can personalize the rest of the Flow, target future campaigns, or feed your analytics and lifecycle tools. -## Best practices +Good onboarding attributes are stable and useful later: + +- `onboarding_goal` +- `experience_level` +- `preferred_reminder_time` +- `has_completed_onboarding` +- `permission_intro_seen` + +Inside the editor, add a **Set Attribute** tap behavior to a button or other tappable element. You can store a static value, such as `has_completed_onboarding = true`, or store a value collected from a Flow Element, such as the selected multiple-choice value. + +![Set Attribute tap behavior in the paywall editor](/images/flows_ca.jpg) + +If your app needs to react when attributes change, use the SDK delegate or event callbacks for your platform. For SDK setup, see [Setting User Properties](/sdk/quickstart/setting-user-properties). -- **Length:** 3-10 pages is usually optimal for onboarding -- **Use user attributes:** Track onboarding completion and progress to avoid showing it repeatedly -- **Test variations:** Create multiple audiences to A/B test different onboarding flows -- **Make it dismissible:** Consider adding a skip option for returning users -- **Track analytics:** Monitor your onboarding completion rates in the campaign metrics +## Request permissions in context -Remember, since everything is managed through the dashboard, you can iterate on your onboarding experience without shipping app updates. +Flows can request system permissions from a tap behavior. This is useful during onboarding because you can explain the value before showing the native prompt. + +Examples: + +- Ask for notification permission after explaining what reminders the user will receive. +- Ask for location permission after showing the location-based feature. +- Ask for camera or photo access after the user chooses a feature that needs it. +- Ask for App Tracking Transparency after explaining how attribution helps personalize offers. + +Use [Permission Prompts](/dashboard/dashboard-creating-flows/permission-prompts) to configure the request, then add **If Granted** and **If Denied** follow-up actions. The denied path can route to a short explanation page or continue onboarding without that capability. + +## Add the paywall at the right moment + +You can place a paywall anywhere in the onboarding Flow. Common patterns include: + +| Pattern | When to use it | +| --- | --- | +| Early paywall | The product value is already clear and conversion is the primary goal. | +| Mid-flow paywall | The user has answered enough questions to personalize the offer. | +| End-of-onboarding paywall | The user has seen the core value and is ready to start. | +| Post-purchase continuation | The user buys, then continues through setup or a welcome page. | + +By default, a purchase closes the paywall or Flow. If onboarding should continue after purchase, set the purchase action's **After Purchase** behavior to **Navigate Page**. See [After purchase behavior](/dashboard/dashboard-creating-flows/tips#after-purchase-behavior) for setup. + +## Measure onboarding performance + +Use [Flow Journey analytics](/dashboard/dashboard-creating-flows/analytics) to understand how users move through onboarding after the Flow is live. + +![Flow Journey drop-off chart](/images/flows_ab_dropoff.jpg) + +![Flow Journey Sankey chart showing branch distribution](/images/flows_ab_sanky.jpg) + +Use Flow Journey to answer: + +- Which onboarding step has the largest drop-off? +- Which branch produces the highest trial or purchase conversion? +- Are users reaching the paywall? +- Are users spending too long on a question or permission page? +- Do different variants produce different journey shapes? + +For campaign-level testing, create variants of the Flow paywall or test different campaign audiences. Compare both conversion and step-by-step drop-off; the highest-converting onboarding path is not always the shortest one. + +## Best practices -## Going forward -Superwall is currently building out more tools for onboarding, such as text boxes and text entry, and will be available soon. +- Keep onboarding focused on one job: activation, preference collection, education, permission setup, or monetization. +- Build the first version linearly, then add branching once the core path works. +- Use indicators when the Flow has more than 3-4 steps. +- Ask only for information you will use in the Flow, app, or future targeting. +- Request permissions after explaining why they matter. +- Keep branch conditions simple enough that the Canvas and analytics remain easy to read. +- Name pages clearly so Flow Journey labels are useful later. +- Use a final page or attribute to mark onboarding completion. + +## 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) +- [Flow Elements](/dashboard/dashboard-creating-flows/flow-elements) +- [Permission Prompts](/dashboard/dashboard-creating-flows/permission-prompts) +- [Flow Journey analytics](/dashboard/dashboard-creating-flows/analytics) +- [Web Flows](/dashboard/guides/web-flows) diff --git a/content/docs/images/onboarding-flow-branching-placeholder.jpg b/content/docs/images/onboarding-flow-branching-placeholder.jpg new file mode 100644 index 0000000..ed05eab Binary files /dev/null and b/content/docs/images/onboarding-flow-branching-placeholder.jpg differ diff --git a/content/docs/images/onboarding-flow-canvas-placeholder.jpg b/content/docs/images/onboarding-flow-canvas-placeholder.jpg new file mode 100644 index 0000000..a774371 Binary files /dev/null and b/content/docs/images/onboarding-flow-canvas-placeholder.jpg differ diff --git a/content/docs/images/retention_preview_view.jpg b/content/docs/images/retention_preview_view.jpg new file mode 100644 index 0000000..0d118f8 Binary files /dev/null and b/content/docs/images/retention_preview_view.jpg differ diff --git a/content/docs/integrations/apple-retention-messaging.mdx b/content/docs/integrations/apple-retention-messaging.mdx index c898b99..84e03ef 100644 --- a/content/docs/integrations/apple-retention-messaging.mdx +++ b/content/docs/integrations/apple-retention-messaging.mdx @@ -77,6 +77,15 @@ Create the message for the correct environment and locale before adding a defaul real-time configuration that references it — the message picker only shows matches for the selected environment and locale. +### Preview a message + +After a message exists, open the three-dot menu in the messages table and choose the preview action +to see a live preview. The preview shows the message payload beside an example cancellation screen, +so you can check the header, body, locale, image, and alt text before using the message in a default +mapping or real-time configuration. + +![Retention message live preview in Superwall](/images/retention_preview_view.jpg) + ## Default Messages Use **Default Messages** to define fallback message mappings by product and locale.