🎥 Progress bar elements - How to create progress bars & meters

Progress bar elements make it easy to visualize visitor progression through multi-step CTAs and encourage completion.

Controlling the messaging of the progress bar

When you've added a progress bar element to your CTA, you'll notice that the panel gives you the ability to control the placement of the message.

Text can be placed inside or outside of the progress bar, or not shown at all.

You can also choose what text shows, with options such as:

  • Steps remaining - This will dynamically show many remaining steps there are left to be completed in the CTA and show a message like (Step 1/8). You can also swap "step" for any message you'd like.
  • Custom message - Prefer to write your own message without any dynamic numbers? Set "text to show" to "custom message" and you can write any context you'd like. This is helpful for cases where you'd like to just say something like "almost done!", or state a static number of steps such as "1 step left".
  • Cart offer progress - If your website is running on an ecommerce platform connected to ConvertFlow, such as Shopify, you can have the progress bar visualize how much more needs to be added to the shopping cart to get the configured cart threshold offer (example: $20/$50 need to get free shipping).

Styling your progress bar

In the "Theme" tab, text size, font family, and colors can be edited for all progress bar elements in the CTA.

With your progress bar selected in the builder, scroll past the initial settings and you'll find lots of no-code styling options to create very custom progress bars that will not affect other bars in the CTA.