Progress Bars

Overview

The Progress Bar is a web control that can be added to Web Pages. Progress Bars inform users of the completion of a task and the length of a process.

Adding Progress Bars to Web Pages

In Web Flows Builder, go to the first Web Page of your Web Flow, click on the '+' sign next to it and select the Progress Bar control.

image3.png

The Progress Bar will be displayed showing three steps by default.

In the General tab of the Inspector section, under Control Properties, the following are set by default:

Value: the step the current Web Page is in.

Steps: the number of steps this Progress Bar has.

ProgressLabels: the labels shown by default to identify the progress.

Setting up the Progress Bar values as a global variable

In order to use the Progress Bar across the whole Journey, a Global Variable needs to be created.

Go to Journey Builder and in the General tab of the Inspector, add a Global Variable of type List of Text.

Use transparent wording to rename it.

Then, from Journey Started in the Actions tab, pick the Set Variable option.

Enter the recently created Global Variable and, as values, paste here the ones set as ProgressLabels in Web Flows Builder. Additional steps can also be added.

Also, if you want to provide a more customised experience, you can change the labels of the steps as well:

Tying the Global Variable to the Progress Bar

From Web Flows Builder, replace the content on the ProgressLabels control with the Global Variable you created in Journey Builder.

Now, every time you add a Progress Bar control in the application, you can retrieve the same setting using this Global Variable.