Flows

content/docs/dashboard/dashboard-creating-flows/flow-elements.mdx

@@ -0,0 +1,106 @@
+---
+title: "Flow Elements"
+description: "Add interactive elements to your flows: multiple choice, text entry, progress indicators, and permission prompts."
+---
+
+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
+
+The multiple choice element presents options for users to select. This is the key element for enabling branching. User selections can determine which page they see next.
+
+// TODO: IMAGE
+
+### Configuration
+
+- **Single-select or multi-select:** Choose whether users can pick one option or multiple.
+- **Randomize order:** Shuffle the options each time (useful for surveys to reduce bias).
+- **Choice items:** Each choice has a label and a value.
+
+### Labels and values
+
+Each choice has two parts:
+
+- **Label:** What users see (e.g., "Grow subscriptions").
+- **Value:** What gets stored (e.g., `goal_grow`).
+
+The value is used internally for routing conditions and user attributes. Keep values short and consistent (lowercase, underscores).
+
+// TODO: IMAGE
+
+### Storing selections
+
+When a user makes a selection, you can store it as a user attribute or trigger an event. This lets you use the selection in routing conditions to branch the flow, access the data later for analytics or personalization, or pass the value to your backend via webhooks.
+
+<Tip>
+Multiple choice controls are commonly used for [branching](/dashboard/dashboard-creating-flows/linking-pages).
+</Tip>
+
+## Input
+
+The input element lets users type a response, like their name, email, or feedback.
+
+// TODO: IMAGE
+
+### Configuration
+
+- **Placeholder text:** The hint shown before users type.
+- **Keyboard type:** Choose the appropriate keyboard (default, email, number, etc.).
+
+### Storing responses
+
+Like multiple choice, text entry values can be stored as user attributes. This is useful for personalizing later pages with the user's name, capturing email addresses for follow-up, or collecting feedback or custom responses.
+
+## Indicator
+
+The indicator element shows progress through the flow, like "Step 2 of 5."
+
+// TODO: IMAGE
+
+### Configuration
+
+- **Style:** Choose from different visual styles (dots, bars, numbers).
+- **Current step:** Which step to highlight.
+- **Total steps:** How many steps to show.
+
+
+Add an indicator when your flow has more than 3-4 pages. Users are more likely to complete a flow when they can see their progress and know how much is left. You can also use their properties in dynamic values such as progression:
+
+<Frame>![](/images/flows_elements_element_vars.jpg)</Frame>
+
+
+## Permissions Prompts
+
+The permissions prompt element requests system permissions like notifications or app tracking.
+
+// TODO: IMAGE
+
+### Prompt types 
+You can choose from the available these permission prompts:
+
+- **Notification:** Ask for permission to send system notifications.
+- **Background Location:** Request location access when the app isn’t in use.
+- **Location:** Request location access while the app is in use.
+- **Read Images:** Access the user’s photo library/camera roll.
+- **Contacts:** Access the user’s contacts.
+- **Camera:** Access the device camera.
+- **App Tracking Transparency:** Ask to track the user across apps and websites.
+- **Microphone:** Access the device microphone.
+
+These are common iOS permission prompts to include during onboarding when you need access to device capabilities.
+
+<Note>
+Permission prompts require iOS SDK 4.12.5+.
+</Note>
+### Configuration
+
+- **Permission type:** Notifications, app tracking, location, etc.
+- **Messaging:** Customize the prompt text to explain why you need the permission.
+
+### Prompt best practices
+
+- Request permissions **after** providing value. Users are more likely to accept.
+- Explain the benefit clearly (e.g., "Get notified about exclusive deals").
+- Consider placing permission prompts after a purchase or key engagement moment.
+
+For more guidance on iOS, view Apple's Human Interface Guidelines [here](https://developer.apple.com/design/human-interface-guidelines/privacy#Requesting-permission).

content/docs/dashboard/dashboard-creating-flows/getting-started.mdx

@@ -0,0 +1,32 @@
+---
+title: "Getting Started with Flows"
+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 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.
+
+<Tip>
+Visual learner? Watch our Flows walkthrough on YouTube (coming soon).
+</Tip>
+
+### Use cases
+
+Flows are built to work well for any multi-step experience:
+
+- **Onboarding flows** that branch based on user goals or preferences.
+- **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.
+
+### Familiar with paywalls?
+
+If you've built paywalls in Superwall, you'll be right at home with Flows. They use the same editor, with some key enhancements added:
+
+- You'll use the **Navigation element** to connect pages together.
+- The **Canvas view** lets you see your entire flow at once.
+- **Routes** define how users move between pages, including conditional branching.
+
+Once you add a [navigation component](/dashboard-creating-paywalls/paywall-editor-navigation-component), a new option called "Flow" becomes available in the [floating toolbar](/dashboard-creating-paywalls/paywall-editor-floating-toolbar):
+
+<Frame>![](/images/flows_getting_started_nav.png)</Frame>

content/docs/dashboard/dashboard-creating-flows/how-flows-are-structured.mdx

@@ -0,0 +1,83 @@
+---
+title: "How Flows are Structured"
+sidebarTitle: "How Flows Work"
+description: "Understand the key concepts of a Flow: the navigation element, pages, routes, and branching."
+---
+
+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:
+
+1. **Navigation Component:** The base component which contains your flow.
+2. **Pages:** The content of your flow, each one is housed within a central navigation component.
+3. **Routes:** The user-defined ordering of how users progress through a flow.
+4. **Branches:** A way to dynamically decide which route to take.
+
+<Note>Not all flows need to use branches. If your flow is a linear journey, then they aren't required.</Note>
+
+### The Navigation element
+
+The Navigation element is what turns a paywall into a Flow. Without it, you have a standard paywall. With it, you unlock the Canvas view and the ability to connect pages together.
+
+<Frame>![](/images/flows_create_nav.jpg)</Frame>
+
+To add it:
+
+1. In the left sidebar, click **+** to add a new element.
+2. Choose **Navigation** under the "Base Elements" header.
+
+Once added, you'll see your paywall appear in the Canvas view, ready to be connected to other pages.
+
+### Pages
+
+Each page in a Flow is built the same way you build a paywall. Once you have a navigation element, adding pages to it enables the Flow editing capabilities:
+
+<Frame>![](/images/flows_creating_pages.png)</Frame>
+
+<Tip>A "page" here is any content you add, such a stack, into the navigation element. Each top level container creates a page in your flow.</Tip>
+
+You can add elements, style them, and configure actions just like you would with any paywall.
+
+- A Flow can have as many pages as you need.
+- Pages that aren't connected to the flow are labeled "unlinked".
+- Each page can have its own products, styling, and behavior.
+
+Once you add one or more pages, the "Flow" button the floating toolbar will become active:
+
+<Frame>![](/images/flows_create_flow_on.jpg)</Frame>
+
+### Routes
+
+Routes are the connections between pages. You create them by linking one page to another in the Canvas view. To begin, you'll **click** and **drag** from the starting point of the flow to the first page you want to use:
+
+<Frame>![](/images/flows_creating_first_route.gif)</Frame>
+
+- Each route defines how users move from one page to the next.
+- Routes can have different animation styles (push, fade, etc.).
+- The first page in your flow connects to the "flow entry point".
+
+You can control any routes animation style by clicking on it:
+
+<Frame>![](/images/flows_create_animation.jpg)</Frame>
+
+### Branching
+
+Routes themselves can be conditional. If you need to show different pages based on user input or attributes, you can by creating a branch. Any _route_ can become a _branch_. For example:
+
+- If a user selected "Grow subscriptions" in a multiple choice element, go to Page A.
+- Otherwise, go to Page B.
+
+Branching is configured in the route settings, not on buttons or CTAs. This keeps your flow logic centralized and easier to maintain.
+
+### The floating toolbar
+
+The floating toolbar has been updated to support Flows. You'll find new controls for:
+
+1. Switching between Device view and Canvas view.
+2. Fitting the viewport to fit the entire flow canvas.
+3. Editing branches.
+4. Toggling the mini-map.
+
+<Frame>![](/images/flows_create_tb.jpg)</Frame>
+
+For more details, see [The Canvas](/dashboard-creating-flows/the-canvas).

content/docs/dashboard/dashboard-creating-flows/linking-pages.mdx

@@ -0,0 +1,105 @@
+---
+title: "Linking Pages"
+description: "Connect pages with routes, configure animations, and set up conditional branching."
+---
+
+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.
+
+<Frame>![](/images/flows_link_first.gif)</Frame>
+
+### Creating connections
+
+In Canvas view, you'll see nodes on the edges of each page. These are your connection points.
+
+To link two pages:
+
+1. Click the node on the edge of the source page.
+2. Drag to the destination page.
+3. Release to create the route.
+
+The first page in your flow should connect to the **flow entry point**, which is the starting node that appears in the Canvas. This marks where users begin:
+
+<Frame>![](/images/flows_link_entry.jpg)</Frame>
+
+### Animation styles
+
+Each route has an animation style that controls how the transition looks when users move between pages.
+
+To change an animation:
+
+1. Click on a route (the line connecting two pages).
+2. In the middle button that appears, select an animation style:
+
+<Frame>![](/images/flows_link_anim.jpg)</Frame>
+
+Available animations:
+
+- **Push** Slides the new page in from the right.
+- **Fade**: Crossfades between pages.
+- **Slide**: Smooth horizontal transition, like scrolling through a carousel.
+- **None**: Instant transition with no animation.
+
+### Unlinked pages
+
+Pages that aren't connected to the flow show a label indicating they're unlinked. These pages won't appear in the user's journey until you connect them:
+
+<Frame>![](/images/flows_link_unlink.jpg)</Frame>
+
+Unlinked pages are useful for drafts you're still working on, pages you want to keep but aren't using yet, or testing different versions before connecting them.
+
+### Branching
+
+Routes can be conditional, meaning users can see different pages based on their input or attributes. This is the core of personalized flows. You might change the page that shows next based off a multiple choice answer, or certain component tapped, etc.
+
+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.
+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:
+
+<Frame>![](/images/flows_link_branch.gif)</Frame>
+
+For example, if you have a multiple choice element asking about user goals:
+
+- Route 1: If user selected "Grow subscriptions" → Go to Growth Tips page.
+- Route 2: If user selected "Reduce churn" → Go to Retention Tips page.
+- Default route: Go to General Tips page.
+
+### Editing branch rules
+
+The branch is dictates navigation by its _routing conditions_, and these are edited once a branch is made:
+
+<Frame>![](/images/flows_link_edit.jpg)</Frame>
+
+If you are familiar with [dynamic values](/dashboard/dashboard-creating-paywalls/paywall-editor-dynamic-values), rules are created exactly the same way.
+
+
+These routing conditions can be based on things like:
+
+- **User attributes:** Properties you've set on the user (e.g., subscription status, country).
+- **User input:** Selections from Flow Elements like multiple choice or text entry.
+- **Combinations:** Use AND/OR logic to combine multiple conditions.
+
+More commonly, you might use a multiple choice component. When choosing a condition, in the popup select **Element** and choose the multiple choice response to dictate the flow:
+
+<Frame>![](/images/flows_link_mc.jpg)</Frame>
+
+Interactive elements that can control routing conditions will be available under the **Element** category when editing the rule. In the screenshot above, it's shown since a multiple choice component is used in the pages involved in the branch:
+
+<Frame>![](/images/flows_link_mc_edit.jpg)</Frame>
+
+The multiple choice responses will automatically populate in the rule editor too:
+
+<Frame>![](/images/flows_link_mc_resp.jpg)</Frame>
+
+When you are done, **click** on the **save** button and your branch will be saved. The canvas will update to reflect the branch:
+
+<Frame>![](/images/flows_link_branch_complete.jpg)</Frame>
+
+To **edit** a branch, simply click on it from within the canvas to bring the rule editor back up.
+
+<Tip>
+Start simple. Get your basic flow working first, then add branching once you're comfortable with the structure.
+</Tip>

content/docs/dashboard/dashboard-creating-flows/meta.json

@@ -0,0 +1,13 @@
+{
+    "title": "Creating Flows",
+    "pages": [
+        "getting-started",
+        "how-flows-are-structured",
+        "the-canvas",
+        "navigation",
+        "linking-pages",
+        "ordering-screens",
+        "flow-elements",
+        "tips"
+    ]
+}

content/docs/dashboard/dashboard-creating-flows/navigation.mdx

@@ -0,0 +1,52 @@
+---
+title: "Navigation"
+description: "Control how users move through your flow with forward and backward navigation."
+---
+
+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.
+
+### The Navigation element
+
+The [Navigation element](/dashboard/dashboard-creating-paywalls/paywall-editor-navigation-component) is what enables flow navigation. Add it to any page to unlock forward and backward controls.
+
+To add it:
+
+1. In the left sidebar, click **+** to add a new element.
+2. Choose **Navigation** under the "Base Elements" header.
+
+Without a Navigation element, you have a paywall. With it, you can create a Flow.
+
+### Adding navigation to components 
+
+Any element can have a [tap behavior](/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements#tap-behaviors). Using the "Navigate Page" behavior, you can tell a component to progress the flow forward or backwards:
+
+<Frame>![](/images/flows_nav_add.jpg)</Frame>
+
+To configure a component to navigate:
+
+1. Select the button element.
+2. In the right sidebar, find **Tap Behavior**.
+3. Choose **Navigate Page** from the action options.
+4. Select **Forward** or **Backward**.
+
+To see them in action, change the canvas view to **Device**, and then click on the component to fire off its tap behavior:
+
+<Frame>![](/images/flows_nav_test.gif)</Frame>
+
+Additionally, you can manually set which page should be navigated to within the floating toolbar using its variable editor:
+
+<Frame>![](/images/flows_nav_vars.gif)</Frame>
+
+### 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. 
+
+### CTA buttons are simple by design
+
+Since routes and branches determine where a user ends up, remember that CTA buttons in Flows commonly do one of two things: progress it forward or go backward.
+
+You won't set a specific page number on a button in Flows. Instead, you simply move forward or backwards. All conditional logic (which page to show next based on user input or attributes) is defined in the routes, not the buttons. This keeps your flow easier to maintain and reason about.
+
+<Tip>
+Think of CTA buttons as "next" and "back". The routes decide where "next" actually goes.
+</Tip>