How to build a flow 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 2 main things to keep in mind: 

  • How to change pages when building a flow
  • How to choose the right settings for every page change

How to change pages

When you're ready to add steps on a new page, click on navigate in the lower left of the builder next to the flow's name. This will allow you to navigate as though the builder is closed. Go to the next page as your user would and to continue building, click Switch back to Build mode at the bottom of the screen.

In the example above, a redirect step was automatically added, but you might need something different according to your case.

How to choose the right settings 

There are 2 types of navigation steps:

  • Redirect
  • Let them navigate

Redirect steps are used when the previous step is asking users to progress by clicking on a button.

Let them navigate steps are used when the user needs to interact with the page in order to continue the flow (and there is no button).

In the example below, we're choosing a Let them navigate step because the tooltip that comes before is asking the user to click on subscription (and there is no button).

Building across dynamic URLs

In some cases, the URLs on your site will be personalized for every user. For instance, a 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, there are two options for setting that set up:

  • Using wildcards (for Let them navigate only)
  • Using custom properties (for Redirect and Let them navigate)

Using wildcards

Let's imagine you have the following URL you want to take your users to:

https://app.democues.com/p/all-files/5e0df/file/3dfe08

With wildcards to match the dynamic parts and a Let them navigate step, we could do something like this:

https://app.democues.com/p/all-files/*/file/*

In the settings of the navigation step, we'll need to include the actual URL as the build URL in order to build the flow and the wildcards will be added to the 'Expect next page to match':

If a user navigates to  https://app.democues.com/p/all-files/5e0df/file/3dfe08 the Let them navigate step will see that it matches the wildcard criteria and will complete. 

Likewise, if a different user navigates to  https://app.democues.com/p/all-files/4d7nj/file/5yhi62 the Let them navigate step will still complete.

Using custom properties for dynamic links 

You can use user properties in both your  Redirect Automatically and Let Them Navigate page changes. Simply insert the user property name inside two curly braces, and the user property will function as a variable. Ex: {{YourProperty}} 

Note: this only works if the user property already exists on Appcues (either via your installation or an integration). If you don't know how to send user properties, check out our article about User Properties.

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

https://app.democues.com/p/all-files/5e0df/file/3dfe08

https://app.democues.com/p/all-files/{{folderID}}/file/{{fileID}}

If you have any questions about the above, feel free to reach out to us at support@appcues.com and we'd be happy to assist!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.