ConvertedU Marketing Library Webinar Blog
Need help? You've come to the right place
What's New Getting Started Building Integrating Publishing

The progress bar widget

Adding a progress bar to your page or pop-up can show your visitors how far they are in a particular process—say, opting in to your offer or completing a video series.


Using the progress bar widget

Sometimes, you want to show a user how far through a process they are. This is especially important when you have a multi-step opt-in sequence. This widget can also be helpful when displaying how many videos a user has watched in your series. 

Customization and styling details

Editing completion percentage

You can click on the widget and select the paint brush icon from the fly-out. You can then adjust the completion percentage using the plus (+) and minus () buttons next to “Completed,” as show below.

NOTE: You can adjust the percentage in 5% increments. 

Adjusting animation settings

Animation is enabled by default and is displayed in blue, but can be disabled. Disable animation by clicking the paint brush icon and then clicking the toggle next to "Animation Bar." When disabled, the toggle will turn grey, as show below.

Hide value text

You may not always want folks to display the percentage and “complete” text (like if your page is in a different language). In this case, you can hide the text that appears above the progress bar. To do so, click the paint brush icon, then toggle "Show Value Text" as show below.

Change progress bar color

You can change the color of the completed portion, the progress bar itself, and the label text associated with it. Just click the color picker, then select the element whose color you want to change. Then choose from your brand colors, the page template colors, or click ADD next to "Page Colors" to enter hex codes or select a different color for your date widget as seen here:

​Tips and frequently asked questions

Can my progress bar be made taller?

Currently, the height of the progress bar can’t be manipulated. When placed to the left or right of another widget, its width will automatically adjust to fit into the space, so you can change its width by adjusting its containing column. 

Can I change the completed text that appears next to the percentage? 

At this time, there is no way to edit the "Complete" text. Instead, you can toggle the "Show Value Text" option to off and add a text widget above or below the progress bar (so you can directly edit the text).

(Updated January 23, 2019)

Please let us know if you have additional questions.

You can always file a support ticket if you have additional questions by clicking the ? support button at the top-right corner of your account dashboard or by clicking here to file a support ticket

Was this article helpful?
Powered by Zendesk