diff --git a/content/docs/dashboard/dashboard-creating-flows/flow-elements.mdx b/content/docs/dashboard/dashboard-creating-flows/flow-elements.mdx new file mode 100644 index 0000000..6ab0a81 --- /dev/null +++ b/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. + + +Multiple choice controls are commonly used for [branching](/dashboard/dashboard-creating-flows/linking-pages). + + +## 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: + +![](/images/flows_elements_element_vars.jpg) + + +## 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. + + +Permission prompts require iOS SDK 4.12.5+. + +### 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). diff --git a/content/docs/dashboard/dashboard-creating-flows/getting-started.mdx b/content/docs/dashboard/dashboard-creating-flows/getting-started.mdx new file mode 100644 index 0000000..b53f757 --- /dev/null +++ b/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. + + +Visual learner? Watch our Flows walkthrough on YouTube (coming soon). + + +### 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): + +![](/images/flows_getting_started_nav.png) \ No newline at end of file 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 new file mode 100644 index 0000000..48a4e64 --- /dev/null +++ b/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. + +Not all flows need to use branches. If your flow is a linear journey, then they aren't required. + +### 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. + +![](/images/flows_create_nav.jpg) + +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: + +![](/images/flows_creating_pages.png) + +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. + +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: + +![](/images/flows_create_flow_on.jpg) + +### 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: + +![](/images/flows_creating_first_route.gif) + +- 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: + +![](/images/flows_create_animation.jpg) + +### 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. + +![](/images/flows_create_tb.jpg) + +For more details, see [The Canvas](/dashboard-creating-flows/the-canvas). diff --git a/content/docs/dashboard/dashboard-creating-flows/linking-pages.mdx b/content/docs/dashboard/dashboard-creating-flows/linking-pages.mdx new file mode 100644 index 0000000..530fff6 --- /dev/null +++ b/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. + +![](/images/flows_link_first.gif) + +### 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: + +![](/images/flows_link_entry.jpg) + +### 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: + +![](/images/flows_link_anim.jpg) + +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: + +![](/images/flows_link_unlink.jpg) + +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: + +![](/images/flows_link_branch.gif) + +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: + +![](/images/flows_link_edit.jpg) + +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: + +![](/images/flows_link_mc.jpg) + +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: + +![](/images/flows_link_mc_edit.jpg) + +The multiple choice responses will automatically populate in the rule editor too: + +![](/images/flows_link_mc_resp.jpg) + +When you are done, **click** on the **save** button and your branch will be saved. The canvas will update to reflect the branch: + +![](/images/flows_link_branch_complete.jpg) + +To **edit** a branch, simply click on it from within the canvas to bring the rule editor back up. + + +Start simple. Get your basic flow working first, then add branching once you're comfortable with the structure. + diff --git a/content/docs/dashboard/dashboard-creating-flows/meta.json b/content/docs/dashboard/dashboard-creating-flows/meta.json new file mode 100644 index 0000000..7c8269b --- /dev/null +++ b/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" + ] +} diff --git a/content/docs/dashboard/dashboard-creating-flows/navigation.mdx b/content/docs/dashboard/dashboard-creating-flows/navigation.mdx new file mode 100644 index 0000000..6f3d0f1 --- /dev/null +++ b/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: + +![](/images/flows_nav_add.jpg) + +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: + +![](/images/flows_nav_test.gif) + +Additionally, you can manually set which page should be navigated to within the floating toolbar using its variable editor: + +![](/images/flows_nav_vars.gif) + +### 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. + + +Think of CTA buttons as "next" and "back". The routes decide where "next" actually goes. + \ No newline at end of file diff --git a/content/docs/dashboard/dashboard-creating-flows/ordering-screens.mdx b/content/docs/dashboard/dashboard-creating-flows/ordering-screens.mdx new file mode 100644 index 0000000..f93c77d --- /dev/null +++ b/content/docs/dashboard/dashboard-creating-flows/ordering-screens.mdx @@ -0,0 +1,41 @@ +--- +title: "Ordering Screens" +description: "Understand how page order works in Flows and how to organize your Canvas." +--- + +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 + +The sidebar order does not dictate which page shows next in the flow. The flow starts at the **entry point** and follows the routes you've created, so a page listed first in the sidebar can still appear last in the user's journey. Reordering pages in the sidebar or Canvas won't change what users see. + + +Routes define the flow, not page order. Rearranging pages won't change the user experience. + + +### Reordering on the Canvas + +Drag pages on the Canvas to arrange them visually. This is especially helpful for: + +- Making complex flows easier to understand at a glance. +- Aligning pages that share similar content or purpose. +- Creating visual groupings for different branches. + +To reset the layout: + +1. Look for the **snap to order** icon in the floating toolbar. +2. Click it to return all pages to their default positions. + +![](/images/flows_order_snap.gif) + +You can also rename any page for organizational purposes. Just **click** on the text label above any page to edit its label name: + +![](/images/flows_order_rename.jpg) + +### Best practices + +- **Match your mental model:** Arrange pages in a way that reflects how you think about the flow. +- **Keep related pages close:** Pages that are connected should generally be near each other on the Canvas. +- **Use space intentionally:** Spread out complex branching so it's easier to follow the routes. + +And, don't be afraid to keep things scattered if that helps you work out a flow either. The ordering for the user is always decided by the routes, and you can the snap button anytime to get things tidy again. diff --git a/content/docs/dashboard/dashboard-creating-flows/the-canvas.mdx b/content/docs/dashboard/dashboard-creating-flows/the-canvas.mdx new file mode 100644 index 0000000..7e37fb9 --- /dev/null +++ b/content/docs/dashboard/dashboard-creating-flows/the-canvas.mdx @@ -0,0 +1,47 @@ +--- +title: "The Canvas" +description: "See your entire flow at a glance, zoom in and out, and use the mini-map to navigate complex flows." +--- + +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 + +There are two ways to view your flow: + +- **Device view:** The familiar single-page editor for building individual pages. This is where you add elements, style them, and configure actions. +- **Canvas view:** The zoomed-out view showing all pages and their connections. This is where you link pages together and see the overall structure. + +Switch between them using the floating toolbar, or by clicking on a page in Canvas view to zoom into Device view. + +![](/images/flows_canvas_toggle.gif) + +### Zooming + +Use these controls to navigate the Canvas: + +- **Keyboard:** `Cmd + scroll` (Mac) or `Ctrl + scroll` (Windows) to zoom in and out. +- **Toolbar:** Use the zoom controls in the floating toolbar. +- **Click:** Click any page in Canvas view to zoom into that page. + +### The mini-map + +For larger flows, the mini-map helps you navigate. It shows a thumbnail of your entire flow with your current viewport highlighted. + +![](/images/flows_canvas_minimap.jpg) + +You can toggle the mini-map on or off from the floating toolbar. Also, you can click and drag anywhere within the minmap to focus the canvas to that specific area. + +### Reordering pages on the Canvas + +You can drag pages on the Canvas to arrange them visually. This helps make complex flows easier to understand at a glance. Simply **click** and **drag** any page to reposition it. + +![](/images/flows_canvas_reorder.gif) + +You can use the toolbar icon to snap pages back to their default order: + +![](/images/flows_canvas_snap.jpg) + + +Remember that how pages are arranged on the Canvas is purely for your organization. The routes and branches you create determine the actual user journey. + diff --git a/content/docs/dashboard/dashboard-creating-flows/tips.mdx b/content/docs/dashboard/dashboard-creating-flows/tips.mdx new file mode 100644 index 0000000..a2f7d31 --- /dev/null +++ b/content/docs/dashboard/dashboard-creating-flows/tips.mdx @@ -0,0 +1,47 @@ +--- +title: "Tips" +description: "Practical advice for building effective flows." +--- + +### After purchase behavior + +By default, when a user makes a purchase, the paywall or flow will close. But in Flows, you might want to continue. For example, you could show a thank-you message or collect feedback. + +To set something like this up: + +1. Select the purchase action on your button. +2. Look for the **After Purchase** setting. +3. Choose **None** to proceed to the next page, or **Close** to dismiss the flow. + +![](/images/flows_tips_post_purchase.jpg) + +Use cases for continuing after purchase: + +- Showing a personalized welcome or thank-you message. +- Collecting feedback about why they subscribed. +- Presenting an upsell for an add-on product. +- Guiding users through initial setup. +- Using a paywall in the middle of a flow if it's a natural slot to present it. + +### Start simple, add complexity later + +When building a new flow, build linear first so all your pages are created and connected in a straight line, then test the basics to make sure navigation works and content looks right, and finally add branching once the foundation is solid. It's much easier to debug a simple flow than a complex one, so get the basics working before adding sophistication. + +### Keep flows focused + +Flows work best when they have a clear, single purpose: + +- **Onboarding:** Gathering preferences and introducing the app. +- **Cancellation:** Understanding why users are leaving and offering alternatives. +- **Upsell:** Guiding users to a higher tier or add-on. + +If a flow is getting too long or trying to do too many things, consider splitting it into multiple flows. A focused 5-page flow is better than a sprawling 15-page one. + +### Use indicators for longer flows + +If your flow has more than 3-4 pages, add an Indicator element. Users are more likely to complete a flow when they can see: + +- How far they've come. +- How much is left. + +Progress visibility reduces abandonment, especially in onboarding flows where users might otherwise wonder "how much longer is this?" \ No newline at end of file diff --git a/content/docs/dashboard/meta.json b/content/docs/dashboard/meta.json index 1cec440..e0f76a5 100644 --- a/content/docs/dashboard/meta.json +++ b/content/docs/dashboard/meta.json @@ -10,6 +10,7 @@ "paywalls", "templates", "dashboard-creating-paywalls", + "dashboard-creating-flows", "charts", "dashboard-campaigns", "products", diff --git a/content/docs/images/flows_canvas_minimap.jpg b/content/docs/images/flows_canvas_minimap.jpg new file mode 100644 index 0000000..3ecfec9 Binary files /dev/null and b/content/docs/images/flows_canvas_minimap.jpg differ diff --git a/content/docs/images/flows_canvas_reorder.gif b/content/docs/images/flows_canvas_reorder.gif new file mode 100644 index 0000000..b8629a6 Binary files /dev/null and b/content/docs/images/flows_canvas_reorder.gif differ diff --git a/content/docs/images/flows_canvas_snap.jpg b/content/docs/images/flows_canvas_snap.jpg new file mode 100644 index 0000000..9820e7f Binary files /dev/null and b/content/docs/images/flows_canvas_snap.jpg differ diff --git a/content/docs/images/flows_canvas_toggle.gif b/content/docs/images/flows_canvas_toggle.gif new file mode 100644 index 0000000..0518938 Binary files /dev/null and b/content/docs/images/flows_canvas_toggle.gif differ diff --git a/content/docs/images/flows_create_animation.jpg b/content/docs/images/flows_create_animation.jpg new file mode 100644 index 0000000..fd108d1 Binary files /dev/null and b/content/docs/images/flows_create_animation.jpg differ diff --git a/content/docs/images/flows_create_flow_on.jpg b/content/docs/images/flows_create_flow_on.jpg new file mode 100644 index 0000000..5b7e693 Binary files /dev/null and b/content/docs/images/flows_create_flow_on.jpg differ diff --git a/content/docs/images/flows_create_nav.jpg b/content/docs/images/flows_create_nav.jpg new file mode 100644 index 0000000..d57df8d Binary files /dev/null and b/content/docs/images/flows_create_nav.jpg differ diff --git a/content/docs/images/flows_create_tb.jpg b/content/docs/images/flows_create_tb.jpg new file mode 100644 index 0000000..3d037e7 Binary files /dev/null and b/content/docs/images/flows_create_tb.jpg differ diff --git a/content/docs/images/flows_creating_first_route.gif b/content/docs/images/flows_creating_first_route.gif new file mode 100644 index 0000000..3bc8f47 Binary files /dev/null and b/content/docs/images/flows_creating_first_route.gif differ diff --git a/content/docs/images/flows_creating_pages.png b/content/docs/images/flows_creating_pages.png new file mode 100644 index 0000000..308089d Binary files /dev/null and b/content/docs/images/flows_creating_pages.png differ diff --git a/content/docs/images/flows_elements_element_vars.jpg b/content/docs/images/flows_elements_element_vars.jpg new file mode 100644 index 0000000..cb299f3 Binary files /dev/null and b/content/docs/images/flows_elements_element_vars.jpg differ diff --git a/content/docs/images/flows_getting_started_nav.png b/content/docs/images/flows_getting_started_nav.png new file mode 100644 index 0000000..92d2a70 Binary files /dev/null and b/content/docs/images/flows_getting_started_nav.png differ diff --git a/content/docs/images/flows_link_anim.jpg b/content/docs/images/flows_link_anim.jpg new file mode 100644 index 0000000..2a16f14 Binary files /dev/null and b/content/docs/images/flows_link_anim.jpg differ diff --git a/content/docs/images/flows_link_branch.gif b/content/docs/images/flows_link_branch.gif new file mode 100644 index 0000000..b34567f Binary files /dev/null and b/content/docs/images/flows_link_branch.gif differ diff --git a/content/docs/images/flows_link_branch_complete.jpg b/content/docs/images/flows_link_branch_complete.jpg new file mode 100644 index 0000000..8f26d6a Binary files /dev/null and b/content/docs/images/flows_link_branch_complete.jpg differ diff --git a/content/docs/images/flows_link_edit.jpg b/content/docs/images/flows_link_edit.jpg new file mode 100644 index 0000000..ffc2d4a Binary files /dev/null and b/content/docs/images/flows_link_edit.jpg differ diff --git a/content/docs/images/flows_link_entry.jpg b/content/docs/images/flows_link_entry.jpg new file mode 100644 index 0000000..d337f87 Binary files /dev/null and b/content/docs/images/flows_link_entry.jpg differ diff --git a/content/docs/images/flows_link_first.gif b/content/docs/images/flows_link_first.gif new file mode 100644 index 0000000..841916c Binary files /dev/null and b/content/docs/images/flows_link_first.gif differ diff --git a/content/docs/images/flows_link_mc.jpg b/content/docs/images/flows_link_mc.jpg new file mode 100644 index 0000000..ea6b77d Binary files /dev/null and b/content/docs/images/flows_link_mc.jpg differ diff --git a/content/docs/images/flows_link_mc_edit.jpg b/content/docs/images/flows_link_mc_edit.jpg new file mode 100644 index 0000000..8a9ef24 Binary files /dev/null and b/content/docs/images/flows_link_mc_edit.jpg differ diff --git a/content/docs/images/flows_link_mc_resp.jpg b/content/docs/images/flows_link_mc_resp.jpg new file mode 100644 index 0000000..51b1e92 Binary files /dev/null and b/content/docs/images/flows_link_mc_resp.jpg differ diff --git a/content/docs/images/flows_link_unlink.jpg b/content/docs/images/flows_link_unlink.jpg new file mode 100644 index 0000000..34f8b71 Binary files /dev/null and b/content/docs/images/flows_link_unlink.jpg differ diff --git a/content/docs/images/flows_nav_add.jpg b/content/docs/images/flows_nav_add.jpg new file mode 100644 index 0000000..5805620 Binary files /dev/null and b/content/docs/images/flows_nav_add.jpg differ diff --git a/content/docs/images/flows_nav_test.gif b/content/docs/images/flows_nav_test.gif new file mode 100644 index 0000000..45c7825 Binary files /dev/null and b/content/docs/images/flows_nav_test.gif differ diff --git a/content/docs/images/flows_nav_vars.gif b/content/docs/images/flows_nav_vars.gif new file mode 100644 index 0000000..ebc6b0e Binary files /dev/null and b/content/docs/images/flows_nav_vars.gif differ diff --git a/content/docs/images/flows_order_rename.jpg b/content/docs/images/flows_order_rename.jpg new file mode 100644 index 0000000..efdfcab Binary files /dev/null and b/content/docs/images/flows_order_rename.jpg differ diff --git a/content/docs/images/flows_order_snap.gif b/content/docs/images/flows_order_snap.gif new file mode 100644 index 0000000..7f3ef87 Binary files /dev/null and b/content/docs/images/flows_order_snap.gif differ diff --git a/content/docs/images/flows_tips_post_purchase.jpg b/content/docs/images/flows_tips_post_purchase.jpg new file mode 100644 index 0000000..a4ba511 Binary files /dev/null and b/content/docs/images/flows_tips_post_purchase.jpg differ diff --git a/docs/plans/2026-01-28-flows-documentation-design.md b/docs/plans/2026-01-28-flows-documentation-design.md new file mode 100644 index 0000000..0c3d25b --- /dev/null +++ b/docs/plans/2026-01-28-flows-documentation-design.md @@ -0,0 +1,449 @@ +# Flows Documentation Design + +## Overview + +Documentation for the new "Flows" feature—a multi-page paywall builder with conditional branching, primarily for onboarding experiences. + +**Goal:** Launch-ready docs for open beta, architected for future expansion. + +**Audience:** Mix of existing Superwall users and newcomers. + +**Location:** Dashboard → Creating Flows (sibling to "Creating Paywalls") + +--- + +## Structure + +8 separate pages under `content/docs/dashboard/creating-flows/`: + +``` +content/docs/dashboard/creating-flows/ +├── meta.json +├── getting-started.mdx +├── how-flows-are-structured.mdx +├── the-canvas.mdx +├── navigation.mdx +├── linking-pages.mdx +├── ordering-screens.mdx +├── flow-elements.mdx +└── tips.mdx +``` + +--- + +## Tone + +Match web checkout docs: +- Conversational but professional +- Direct and action-oriented (imperative voice) +- Second person ("you/your") +- Structured with numbered steps for sequential tasks +- Heavy use of images with `` components +- `` and `` for helpful asides +- Brief—doesn't over-explain +- Links forward to next steps + +--- + +## Page Designs + +### Page 1: Getting Started with Flows + +**Purpose:** Introduce Flows, explain the value, orient both new and existing users. + +**Frontmatter:** +```yaml +title: "Getting Started with Flows" +description: "Create multi-page experiences like onboarding flows, cancellation surveys, and more—all within Superwall's editor." +``` + +**Sections:** + +1. **What are Flows?** (2-3 sentences) + - Flows let you string together multiple pages into a single, seamless experience + - Ideal for onboarding, cancellation surveys, upsells, or any multi-step journey + - Built right into the same editor you use for paywalls + +2. **Tip callout:** "Visual learner? Watch our Flows walkthrough on YouTube [link]." + +3. **Familiar with paywalls?** (callout for existing users) + - "If you've built paywalls in Superwall, Flows use the same editor. The key difference: you'll use the Navigation element to connect pages, and the Canvas view to see your entire flow at once." + +4. **Use cases** (bullet list) + - Onboarding flows that branch based on user goals + - Cancellation surveys with conditional paths + - Multi-step upsell funnels + - Personalized welcome experiences + +5. **What you'll need** + - A Superwall account + - An existing project + +6. **Next steps** (links to subsequent pages) + +--- + +### Page 2: How Flows are Structured + +**Purpose:** Explain core concepts and building blocks. + +**Frontmatter:** +```yaml +title: "How Flows are Structured" +description: "Understand the key concepts: pages, the Navigation element, routes, and branching." +``` + +**Sections:** + +1. **Overview** (2-3 sentences) + - 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 you create do + - The Navigation element is what makes a paywall a Flow + +2. **Pages** + - Each page is built the same way you build a paywall + - A Flow can have as many pages as you need + - Pages that aren't connected to the flow are labeled "unlinked" + +3. **The Navigation Element** + - This is what turns a paywall into a Flow + - Add it to any page to enable forward/backward navigation + - Once added, you'll see your paywall in the Canvas view + +4. **Routes** + - Routes are the connections between pages + - You create them by linking one page to another in the Canvas + - Each route can have its own animation style (push, fade, etc.) + +5. **Branching** + - Routes can be conditional—show different pages based on user input or attributes + - Example: "If user selected 'Grow subscriptions,' go to Page A; otherwise, go to Page B" + - Branching is configured in the route settings + +6. **The Floating Toolbar** + - Brief mention of toolbar updates for Flows (zoom, view toggles) + - Link forward to "The Canvas" for details + +--- + +### Page 3: The Canvas + +**Purpose:** Explain the Canvas view for visualizing and managing flows. + +**Frontmatter:** +```yaml +title: "The Canvas" +description: "See your entire flow at a glance, zoom in and out, and use the mini-map to navigate complex flows." +``` + +**Sections:** + +1. **Overview** (2-3 sentences) + - The Canvas is where you see your entire flow laid out + - Similar to tools like Figma—pan around and zoom to see the big picture + - Click any page to zoom in and edit it + +2. **Device View vs. Canvas View** + - Device View: The familiar single-page editor for building individual pages + - Canvas View: The zoomed-out view showing all pages and their connections + - Switch between them using the floating toolbar + +3. **Zooming** + - Use `Cmd + scroll` (or `Ctrl + scroll` on Windows) to zoom in and out + - Zoom controls also available in the floating toolbar + - Clicking a page in Canvas View zooms into that page + +4. **The Mini-Map** + - For larger flows, the mini-map helps you navigate + - Toggle on/off from the toolbar + - Click anywhere on the mini-map to jump to that area + +5. **Reordering Pages on the Canvas** + - Drag pages to rearrange their visual position + - Use toolbar icon to snap pages back to default order + - Note: Visual position doesn't affect the flow—routes do + +6. **Image:** Screenshot showing Canvas view with connected pages, mini-map, and toolbar + +--- + +### Page 4: Navigation + +**Purpose:** Explain how users move between pages—forward, backward, and CTA simplicity. + +**Frontmatter:** +```yaml +title: "Navigation" +description: "Control how users move through your flow with forward and backward navigation." +``` + +**Sections:** + +1. **Overview** (2-3 sentences) + - Navigation in Flows is handled by the Navigation element and CTA buttons + - Users move forward along defined routes, or backward to previous pages + - Intentionally simple—complex routing logic lives in routes, not buttons + +2. **The Navigation Element** + - Add it to any page to enable flow navigation + - Provides forward/back controls users see + - Without it, you have a paywall, not a Flow + +3. **Going Forward** + - "Forward" follows the route connected from the current page + - If branching exists, route conditions determine which page comes next + - Users just tap forward—they don't need to know about branching + +4. **Going Backward** + - "Back" returns the user to the previous page they came from + - Works automatically based on user's navigation history within the flow + +5. **CTA Buttons are Simple by Design** + - CTA buttons only do two things: go forward or go backward + - No setting specific page numbers—that's the old way + - All conditional logic defined in routes, not buttons + - Keeps flows easier to maintain and reason about + +6. **Tip callout:** "Think of CTA buttons as 'next' and 'back'—the routes decide where 'next' actually goes." + +--- + +### Page 5: Linking Pages + +**Purpose:** How to connect pages—connectors, animations, and branching conditions. + +**Frontmatter:** +```yaml +title: "Linking Pages" +description: "Connect pages with routes, configure animations, and set up conditional branching." +``` + +**Sections:** + +1. **Overview** (2-3 sentences) + - Linking pages defines the path through your flow + - Connect pages using nodes in Canvas view + - Each connection (route) can have its own animation and conditions + +2. **Creating Connections** + - In Canvas view, click the node on the edge of a page + - Drag to another page to create a route + - First page connects to the "flow entry point" + - Image: Screenshot showing node being dragged to connect pages + +3. **Animation Styles** + - Each route has an animation style for the transition + - Default is "push" (slides in from right) + - Click route to change animation (push, fade, etc.) + - Image: Screenshot of animation style selector + +4. **Unlinked Pages** + - Pages not connected show as "unlinked" + - Won't appear in user's flow until connected + - Useful for drafts or pages still being built + +5. **Branching** (subsection) + - Routes can be conditional—different users see different pages + - Add a rule to a route to enable branching + - Example: "If user selected 'Grow subscriptions' in multiple choice, go to Page A" + +6. **Routing Conditions** + - Based on user attributes (properties set on user) + - Based on user input (selections from Flow Elements like multiple choice) + - Combine multiple conditions with AND/OR logic + - Image: Screenshot of routing condition editor + +7. **Tip callout:** "Start simple—add branching once your basic flow is working." + +--- + +### Page 6: Ordering Screens + +**Purpose:** Clarify how page order works (different from legacy paywalls). + +**Frontmatter:** +```yaml +title: "Ordering Screens" +description: "Understand how page order works in Flows and how to organize your Canvas." +``` + +**Sections:** + +1. **Overview** (2-3 sentences) + - In Flows, sidebar page order doesn't determine user's path + - Routes define the order—not list position + - Sidebar and Canvas positions are for your organization + +2. **How Order Works** + - Flow starts at entry point and follows routes + - A page listed first in sidebar can appear last in user's journey + - Different from legacy multi-page paywalls where sidebar order mattered + +3. **Reordering in the Sidebar** + - Drag pages in sidebar to organize however makes sense + - Some teams order by user journey; others group by theme + - Purely organizational—won't affect the flow + +4. **Reordering on the Canvas** + - Drag pages on Canvas to arrange visually + - Helpful for making complex flows easier to understand + - Use toolbar icon to snap pages back to default positions + - Image: Screenshot showing "snap to order" icon + +5. **Note callout:** "Remember: routes define the flow, not page order. Rearranging pages won't change what users see." + +--- + +### Page 7: Flow Elements + +**Purpose:** Document the new interactive elements for Flows. + +**Frontmatter:** +```yaml +title: "Flow Elements" +description: "Add interactive elements to your flows: multiple choice, text entry, progress indicators, and permission prompts." +``` + +**Sections:** + +1. **Overview** (2-3 sentences) + - Flow Elements are interactive components for multi-page experiences + - Capture user input, show progress, or request permissions + - Use them to personalize the flow or gather information for branching + +2. **Multiple Choice** (largest section) + - What it does: Presents options for users to select + - Configuration: + - Single-select or multi-select mode + - Randomize option order (useful for surveys) + - Each choice has a label (what users see) and a value (what gets stored) + - Storing selections: + - Choices set a user attribute or trigger an event + - Example: Label "Grow subscriptions" → Value `goal_grow` + - Using selections for branching: + - Stored value can be used in route conditions + - Example: "If `goal` equals `goal_grow`, go to Page A" + - Image: Screenshot of multiple choice configuration panel + - Image: Screenshot of multiple choice element in a flow + +3. **Text Entry** + - What it does: Lets users type a response (name, email, feedback, etc.) + - Configuration: Placeholder text, keyboard type, character limits + - Entered value can be stored as a user attribute + - Image: Screenshot of text entry element + +4. **Indicator** + - What it does: Shows progress through the flow (e.g., step 2 of 5) + - Configuration: Style options, which step to highlight + - Helps users understand where they are in longer flows + - Image: Screenshot of indicator element + +5. **Permissions Prompts** + - What it does: Requests system permissions (notifications, tracking, etc.) + - Configuration: Which permission to request, messaging + - Best used in onboarding flows before or after purchase + - Image: Screenshot of permissions prompt element + +6. **Tip callout:** "Multiple choice is the key to branching. If you want different users to see different paths, start here." + +--- + +### Page 8: Tips + +**Purpose:** Practical advice, edge cases, and best practices. + +**Frontmatter:** +```yaml +title: "Tips" +description: "Practical advice for building effective flows." +``` + +**Sections:** + +1. **After Purchase Behavior** + - By default, purchase closes the paywall—but in Flows, you might want to continue + - Configure "after purchase" behavior in purchase action settings + - Options: Close the flow, or continue to the next page + - Use case: Collecting feedback or showing welcome message after purchase + - Image: Screenshot of after purchase behavior settings + +2. **Start Simple, Add Complexity Later** + - Build a linear flow first—get pages and navigation working + - Add branching once basic path is solid + - Easier to debug a simple flow than a complex one + +3. **Test Each Branch** + - When using branching, test every possible path + - Use preview mode with different user attributes to simulate each branch + - Make sure unlinked pages aren't accidentally left in flow + +4. **Keep Flows Focused** + - Flows work best with a clear purpose (onboarding, cancellation, etc.) + - If a flow is getting too long, consider splitting into multiple flows + +5. **Use Indicators for Longer Flows** + - If flow has more than 3-4 pages, add an Indicator element + - Users more likely to complete when they see progress + +6. **Naming Pages Clearly** + - Give pages descriptive names (e.g., "Goal Selection," "Plan Comparison") + - Makes Canvas view easier to understand at a glance + +--- + +## Navigation Configuration + +`meta.json` for the Creating Flows section: + +```json +{ + "title": "Creating Flows", + "pages": [ + "getting-started", + "how-flows-are-structured", + "the-canvas", + "navigation", + "linking-pages", + "ordering-screens", + "flow-elements", + "tips" + ] +} +``` + +--- + +## Cross-Linking Strategy + +- Each page links forward to the next logical page ("Next: Linking Pages") +- "Getting Started" includes a mini table of contents linking to all pages +- Heavy concepts (like "Navigation Element") defined once in "How Flows are Structured" and linked back from other pages +- Existing users get a callout in "Getting Started" to skip basics + +--- + +## Deferred Work + +- Updates to existing docs (Navigation element page, floating toolbar page) +- Video walkthrough (referenced as placeholder until created) +- Tutorials/guides (blog content, separate from docs) + +--- + +## Dependencies + +Before implementation: +- Screenshots from polished example flow (Nick's team) +- Confirmation on terminology (e.g., "Canvas" vs "Flow View") +- Final UI for routing conditions editor + +--- + +## Implementation Notes + +After this design is approved: +1. Create the directory structure +2. Write pages in order (getting-started first) +3. Add placeholder image references +4. Update dashboard `meta.json` to include the new section +5. Build and verify navigation works diff --git a/src/lib/changelog-entries.json b/src/lib/changelog-entries.json index 2ee7ea9..0897746 100644 --- a/src/lib/changelog-entries.json +++ b/src/lib/changelog-entries.json @@ -1,6 +1,177 @@ { - "lastUpdated": "2026-01-29T18:48:02.653Z", + "lastUpdated": "2026-01-30T15:35:19.762Z", "entries": [ + { + "key": "content/docs/dashboard/dashboard-creating-flows/flow-elements.mdx:7647f7d0e9ddc1693c5150fbeb33002fe7a5340c", + "path": "dashboard/dashboard-creating-flows/flow-elements.mdx", + "title": "Flow Elements", + "description": "Clarifies flow element descriptions with minor punctuation and grammar improvements.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/flow-elements", + "date": "2026-01-29T22:01:08.000Z", + "changeType": "modified" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/getting-started.mdx:7647f7d0e9ddc1693c5150fbeb33002fe7a5340c", + "path": "dashboard/dashboard-creating-flows/getting-started.mdx", + "title": "Getting Started with Flows", + "description": "Clarifies route definition with a minor punctuation change for improved readability.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/getting-started", + "date": "2026-01-29T22:01:08.000Z", + "changeType": "modified" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/linking-pages.mdx:7647f7d0e9ddc1693c5150fbeb33002fe7a5340c", + "path": "dashboard/dashboard-creating-flows/linking-pages.mdx", + "title": "Linking Pages", + "description": "Clarifies flow entry point explanation and simplifies tip about branching complexity.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/linking-pages", + "date": "2026-01-29T22:01:08.000Z", + "changeType": "modified" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/navigation.mdx:7647f7d0e9ddc1693c5150fbeb33002fe7a5340c", + "path": "dashboard/dashboard-creating-flows/navigation.mdx", + "title": "Navigation", + "description": "Clarifies navigation concepts by simplifying explanation of flow routing and CTA buttons.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/navigation", + "date": "2026-01-29T22:01:08.000Z", + "changeType": "modified" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/ordering-screens.mdx:7647f7d0e9ddc1693c5150fbeb33002fe7a5340c", + "path": "dashboard/dashboard-creating-flows/ordering-screens.mdx", + "title": "Ordering Screens", + "description": "Clarifies how page ordering works in Flows and emphasizes organizational flexibility.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/ordering-screens", + "date": "2026-01-29T22:01:08.000Z", + "changeType": "modified" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/the-canvas.mdx:7647f7d0e9ddc1693c5150fbeb33002fe7a5340c", + "path": "dashboard/dashboard-creating-flows/the-canvas.mdx", + "title": "The Canvas", + "description": "Clarifies page positioning details in the Canvas, emphasizing visual layout doesn't affect routes.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/the-canvas", + "date": "2026-01-29T22:01:08.000Z", + "changeType": "modified" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/tips.mdx:7647f7d0e9ddc1693c5150fbeb33002fe7a5340c", + "path": "dashboard/dashboard-creating-flows/tips.mdx", + "title": "Tips", + "description": "Clarifies how to customize flow behavior after a user completes a purchase.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/tips", + "date": "2026-01-29T22:01:08.000Z", + "changeType": "modified" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/how-flows-are-structured.mdx:df4a9f7277962b5f4c671a51cc757042f2d1a4de", + "path": "dashboard/dashboard-creating-flows/how-flows-are-structured.mdx", + "title": "How Flows are Structured", + "description": "Explains core flow concepts: navigation, pages, routes, and branching with detailed visuals.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/how-flows-are-structured", + "date": "2026-01-29T21:56:59.000Z", + "changeType": "modified" + }, + { + "key": "content/docs/android/sdk-reference/PaywallOptions.mdx:8bcb4e781628a112f65a14501b4b1fc6decca315", + "path": "android/sdk-reference/PaywallOptions.mdx", + "title": "PaywallOptions", + "description": "Removes `timeoutAfter` property from PaywallOptions, simplifying timeout handling for paywalls.", + "category": "Android SDK", + "subcategory": "SDK Reference", + "url": "/docs/android/sdk-reference/PaywallOptions", + "date": "2026-01-29T19:25:18.000Z", + "changeType": "modified" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/flow-elements.mdx:c91b5bb5d1e626bfbc168c9465bd9856a01a64fe", + "path": "dashboard/dashboard-creating-flows/flow-elements.mdx", + "title": "Flow Elements", + "description": "Introduces flow elements for creating interactive, personalized multi-page experiences with input and routing.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/flow-elements", + "date": "2026-01-28T22:24:40.000Z", + "changeType": "added" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/getting-started.mdx:c91b5bb5d1e626bfbc168c9465bd9856a01a64fe", + "path": "dashboard/dashboard-creating-flows/getting-started.mdx", + "title": "Getting Started with Flows", + "description": "Introduces Flows feature for creating multi-page, interactive user experiences in Superwall.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/getting-started", + "date": "2026-01-28T22:24:40.000Z", + "changeType": "added" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/how-flows-are-structured.mdx:c91b5bb5d1e626bfbc168c9465bd9856a01a64fe", + "path": "dashboard/dashboard-creating-flows/how-flows-are-structured.mdx", + "title": "How Flows are Structured", + "description": "Explains how Flows are structured, including pages, navigation, routes, and branching mechanics.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/how-flows-are-structured", + "date": "2026-01-28T22:24:40.000Z", + "changeType": "added" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/linking-pages.mdx:c91b5bb5d1e626bfbc168c9465bd9856a01a64fe", + "path": "dashboard/dashboard-creating-flows/linking-pages.mdx", + "title": "Linking Pages", + "description": "Added comprehensive guide for linking and routing pages in flow creation.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/linking-pages", + "date": "2026-01-28T22:24:40.000Z", + "changeType": "added" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/navigation.mdx:c91b5bb5d1e626bfbc168c9465bd9856a01a64fe", + "path": "dashboard/dashboard-creating-flows/navigation.mdx", + "title": "Navigation", + "description": "Explains how navigation works in Flows, including forward, backward, and route configuration.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/navigation", + "date": "2026-01-28T22:24:40.000Z", + "changeType": "added" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/ordering-screens.mdx:c91b5bb5d1e626bfbc168c9465bd9856a01a64fe", + "path": "dashboard/dashboard-creating-flows/ordering-screens.mdx", + "title": "Ordering Screens", + "description": "Explains how page order works in Flows and best practices for organizing screens.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/ordering-screens", + "date": "2026-01-28T22:24:40.000Z", + "changeType": "added" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/the-canvas.mdx:c91b5bb5d1e626bfbc168c9465bd9856a01a64fe", + "path": "dashboard/dashboard-creating-flows/the-canvas.mdx", + "title": "The Canvas", + "description": "Learn how to use the Canvas view to navigate, zoom, and organize flow pages visually.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/the-canvas", + "date": "2026-01-28T22:24:40.000Z", + "changeType": "added" + }, + { + "key": "content/docs/dashboard/dashboard-creating-flows/tips.mdx:c91b5bb5d1e626bfbc168c9465bd9856a01a64fe", + "path": "dashboard/dashboard-creating-flows/tips.mdx", + "title": "Tips", + "description": "Added practical tips for creating effective and user-friendly product flows.", + "category": "Dashboard", + "url": "/docs/dashboard/dashboard-creating-flows/tips", + "date": "2026-01-28T22:24:40.000Z", + "changeType": "added" + }, { "key": "content/docs/ios/guides/intro-offer-eligibility-override.mdx:e0afc022a8d31aab921abfe1643ee331eeb175a1", "path": "ios/guides/intro-offer-eligibility-override.mdx",