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 Interaction or a different Interaction.

When you add a Navigation Button, the Web Designer automatically handles all details for instantly jumping between Pages, making navigation transparent to the customer. A jump can also transfer any details that the customer may have already provided directly to the target page, for example, their account or contact information.

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 an Interaction, not only the starting Page.

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 Interaction:

You can add multiple Navigation Buttons to a Page.

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 Web 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 Interaction

You add a Navigation Button like any other element when designing a Visual Page:

  1. 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.
  2. 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.
  3. Use the Select Interaction drop-down to point to a target Interaction for the Button. The Interaction Designer automatically lists those Interactions available. It can be the current Interaction or a different Interaction. Then use the Select Element drop-down to specify the target Page for the navigation. Again, the Designer automatically finds and lists all Elements available as navigation targets.
  4. Optionally, when the Process and validate all Page elements checkbox is selected, Interact 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.
  5. 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.
  6. 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.
  7. Click on Update Page to save your changes to the Element.

Note: The Navigation Button is not supported on Contact Us or Menu Pages.


Working with Variables

When you use the Navigation Button to jump to a Page in an different Interaction, the Web Designer knows how to transparently manage the navigation and ensure that all the variables you need are available for the target Page.

By default, System variable values are automatically duplicated and mapped with their identical names for the target Page. You can always change a variable's value by using the Input Variables map to edit it, as shown in the following diagram:

  1. In the Element tab for the Navigation Button, click on <>View and edit System Variables List>. All System Variables that are active in both the current and target Interactions will be displayed.
  2. In the left column are the variables for the target Interaction. In the right column are the variables for the current Interaction. The Interaction Designer automatically maps all identical variables and displays them. Optionally, you can enter '@' in the right column to see a list of all available System Variables and select a different one, add a new variable, or enter a hard coded value.

    Each System Variable has a checkbox which enables you to include or exclude it from mapping. If you do not want a specific System Variable to be passed to the target Interaction, simply uncheck it.
  3. Click on Update Page to save your changes to the map and the Element.

Unlike System Variables, User Variables are not automatically passed along to a navigation target Page. You optionally can select from or create new User Variables that will be mapped to the target Interaction during a jump, as shown in the following diagram:

  1. In the Element tab for the Navigation Button, click on <>Add User Variables>.
  2. Click on the yellow plus  icon that appears to the right. A new empty User Variable will be created.
  3. Click on the empty target field on the left side. The Interaction Designer collects all User Variables from your target Interaction and displays them in a drop-down menu. Select a User Variable to map to the current Interaction.
  4. On the right side, enter '@' to see a list of all available variables and select a different one, add a new variable, or enter a hard coded value that you want the current Interaction to pass to the target Interaction. You can select and map multiple User Variables as needed.
  5. Click on Update Page to save your changes to the map and the Element.