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.pngimage3.png

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

image9.pngimage9.png

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. 

image4.pngimage4.png

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.

image1.pngimage1.png

Use transparent wording to rename it.

organizing infoorganizing info

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

organizing infoorganizing info

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.

image2.pngimage2.png

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

image6.pngimage6.png

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.

9.png9.png

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


Did this page help you?