Linking Pages

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.

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:

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:

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:

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:

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:

If you are familiar with 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:

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:

The multiple choice responses will automatically populate in the rule editor too:

When you are done, click on the save button and your branch will be saved. The canvas will update to reflect the branch:

To edit a branch, simply click on it from within the canvas to bring the rule editor back up.