There are two main things to keep in mind when building a flow that goes across different pages (or if the URL changes as users navigate through the flow):

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

Navigate to Change the Page

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.

Choose the Right Settings 

There are 2 types of navigation steps:

• Redirect - the user will be taken directly to a URL. Redirects are best when the user will click a link or button inside the step to navigate them, for example, a "Next" button in a modal or tooltip.
• 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.

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, a Let them navigate step was used because the tooltip that comes before is asking the user to click on subscription (and there is no button).

Navigate Across Dynamic URLs

In some cases, the URLs on your site will be personalized for every user; for instance, the URL is created dynamically with the ID for their account. 

In that case, there are two options:

• Wildcards (for Let them navigate only)
• Custom Properties (for Redirect and Let them navigate)

Wildcards

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 strings and a Let them navigate step, you could do something like this:

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

In the settings of the navigation step, add the wildcards to the section 'Expect next page to match'. 

In the 'Build URL' include the real URL where you're building the flow - don't add wildcards here.

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 another URL, like https://app.democues.com/p/all-files/4d7nj/file/5yhi62,the Let them navigatestep will also complete.

Note: The wildcard format works by checking a specific URL (where the user actually navigates to) against itself to see if it matches. The wildcard cannot be used to redirect a user automatically because a user's browser will not know what specific characters it should use to replace the *.

Custom Properties

You can use user properties in both your Redirect Automatically and Let Them Navigate page changes. Insert the user property name inside two curly braces, and the user property will function as a variable. Ex: {{YourProperty}}. Please note that these properties are case-sensitive. You can find the proper format of your property in your settings here.

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.

Important: Custom property values will not show up in Preview mode. In order to test, use the test mode or publish your flow (Testing Flows).

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!