Progress Bar
The progress bar indicates to your audience how far along they are within one of your experiences. A progress bar can easily be added to any experience!
Video Tutorial
While within Builder, open the Style Guide.
Click on the faded-out progress bar which should appear atop the Style Guide menu.
After selecting the progress bar, check the "Add Progress Bar" box.
As we do with all our features, we offer the ability to customize our progress to meet your brand's needs - what you can control:
Position: Top or bottom
Design: Colors, shadow
Text: Font, size, color
Type: Continuous Bar: shows a bar that fills in as users answer questions
Label Only: displays only label with no bar, ie, "3 of 4"
Labels: Percentage: displays 'X% Complete'
Numerical: displays 'X of Y'
If your experience has branching, use percentage labels.
Frequently Asked Questions
Q: What happens to my progress bar if my experience has branching and a user skips a screen?
A: The progress bar will always calculate the maximum depth (most possible screens seen) of the experience, and use that as its denominator. Thus, if a user chooses a shorter path, their progress will 'speed forward'. For instance, if path A has 5 screens, and Path B has 4 screens, both first screens will start at 0% complete. If a user goes down Path A, the next screen will show 20% complete. If a user goes down Path B, the second screen will show 40% complete.
Q: Can I toggle on a progress bar for all my campaigns?
A: If you will be using the same progress bar across different experiences, you can add the progress bar styling to any existing/new Brand Design.
Q: Can I disable the progress bar on specific screens?
A: You can turn the progress bar off on any given screen, by going on to the screen you wish to disable it on and unchecking 'Display Progress Bar'. (The screen will still count in the progress bar depth calculations.)
Related Articles
Keywords: progress bar, style guide