Navigation Buttons: Jump to Other Pages and Flows
Adding a Navigation Button to your Flow makes it possible for a customer to jump from the Page that they are on to any other Page of your choosing. It can be a Page in the same Flow or a different Flow.
When you add a Navigation Button, the X-Designer automatically handles all details for instantly jumping between Pages, making navigation transparent to the customer. A jump can also transfer data that the customer may have already entered directly to the target page, for example, their account or contact information.
Tip
When a Navigation Button is clicked, its target page will always be displayed 'fresh' (i.e., a page without any selections). This is unlike the behavior of a Next or Back button.
Using a Navigation Button differs from using a Sub-Flow, because the Navigation Button is visible to the customer as a UI element, while a Sub-Flow is not a visible part of the UI. In addition, the Navigation Button enables a customer to jump to any Page in a Flow, not only the starting Page.
You can add multiple Navigation Buttons to a Page.
Example Use Cases
In the following runtime example, we add a Navigation Button to enable the customer to view a running statistics page which is maintained outside the current Flow:
 |
Navigation Buttons are useful when you want to enable the customer to jump quickly to a similar activity, to a Home screen or to a Feedback page. You can also build a menu of optional jump pages using multiple Navigation Buttons.
The X-Designer fully supports all Navigation Button activities when building reports (for example, when a customer navigates to a new page), and also provides full multi language support for Navigation Button functionality.
Adding a Navigation Button to your Flow
You add a Navigation Button like any other element when designing a Page:
 |
Go to the Page on which you want the Button to appear. From the left side of the Page Editor, select the Navigation Button element and drag it to the Page map. On the right side of the Page Editor, the Element tab opens, with the Navigation Button editor displayed.
Enter a Label name that will be displayed on the Button. Use the name to inform the customer which page or activity they'll be jumping to.
Use the Select Interaction drop-down to point to a target Flow for the Button. The X-Designer automatically lists all available Flows. It can be the current Flow or a different Flow. Then use the Select Element drop-down to specify the target Page for the navigation. Again, the X-Designer automatically finds and lists all Elements available as navigation targets.
Optionally, when the Process and validate all Page elements checkbox is selected, X-Designer will validate elements on the current Page before navigating to the target Page. When this option is not selected, movement between Pages does not require validated user input. By default, this checkbox is not selected and Page validation is not performed.
The Show/Hide Rule field enables you to show or hide the Navigation Button during runtime if a specified Rule condition is met. (A Navigation Button is always displayed by default.) To add a Show/Hide rule, click on the Plus
icon and enter the condition to meet using the Rule Editor that appears:
After adding the condition, select Show or Hide from the dropdown menu at the lower right to set the Navigation Button's display status. To delete a Rule, click on Delete rule at the top right corner of the Rule Editor.
For more details and an example, click here.
The HTML Reference ID field stores the response in order to make it available for use outside of Interact, for example in CSS or application extensions. A unique name is automatically assigned to this field by default, but you can assign a more descriptive name to make it easier to identify.
Click on Update Page to save your changes to the Element.
Note
The Navigation Button is not supported on Contact Us or Menu Pages.
When you use the Navigation Button to jump to a Page in a different Flow, the X-Designer knows how to transparently manage the navigation and ensure that all the variables you need are available for the target Page.