Building Flows Across Pages

If you're working on a Flow that goes across different pages of your app (or if the URL will change as users navigate through the Flow), there are a few key topics to know: how you change pages while building a flow, and the two types of page changes you can utilize. We'll cover these topics in this article:

Changing Pages - the Navigate and Build Modes

The Flow Builder has two modes:
  1. Build - The default mode, for adding steps and editing content. While in this mode, certain interactions may be blocked on your app so that you can work on your flow without interruption.
  2. Navigate - This mode allows you to navigate to another page, as well as interact with your app. It is also helpful in surfacing dynamic elements on your page, such as a dropdown menu.

When you're ready to add steps on a new page, select Navigate from the toggle at the top of the page. Go to the next page as your user would, or paste in a new URL.

Using Page Change Actions

After navigating to a new page and creating a step, a Page Change Action will be added automatically. Page Change Actions define how your user will get to the next page in the flow.

There are two types of Page Change Actions:

1. Redirect Automatically - the user will be taken directly to a URL. Redirects are best when the user will click a link or button in a flow step to navigate them, for example a "Next" button in a modal or tooltip.

2. Let Them Navigate - the user will navigate themselves to the page. This option is best when the user will need to interact with your app to move to the next step of the flow, or when the next step is on a dynamic/unique URL.

Page Change Settings

To update the settings for a Page Change Action, select the arrow icon from the bottom bar. In the settings modal, you can set the URL where the next step will be shown. By default, it will be set to the URL you built the content on.

Supporting Dynamic or Personalized URLs

In some cases, that URL should be personalized for the user. For instance, if that URL is created dynamically with the ID for their account, or for the ID of the item they are looking at, etc. In that case, two options for getting that set up:

Wildcards (Let Them Navigate only)

Use an asterisk * as a wildcard token in place of personalized information. This option is not available for the Redirect Automatically setting.

For example, instead of:
<a href=""></a>
you can use: 
<a href="*/new">*/new</a>

Appcues User Properties 

You can use your Appcues user properties in both your Redirect Automatically and Let Them Navigate actions. Simply insert the user property name inside two curly braces, and the user property will function as a variable.

User properties can be included using double curly brackets, for example:

<a href=""></a>

Could be achieved using the firstName user property: 

<a href="{{firstName}}">{{firstName}}</a>