Skip to main content
Progress Block

By using the progress block, you can let people know how far they have advanced in your heyflow.

Heyflow avatar
Written by Heyflow
Updated over a month ago

By using the Progress block, you can let people know how far they have advanced in your heyflow. It's important to show the progress, to be transparent about how many steps are yet to come in your flow.


Adding the Progress Block

  1. Drop and drag the progress block into your heyflow

  2. Adjust the displayed elements (filled and total elements)

  3. Choose your style of choice: rectangles, dots or a bar

  4. Add more progress blocks to the remaining screens

  5. Just publish your heyflow and you’re good to go!

💡 Tip: Consistency is important - make sure to use the same style for all progress blocks in your flow!


Designing the Progress Block

There are multiple ways to adjust the block even more than described above. Just head to the Design tab and start working on the Presets. In some plans, you can dive even deeper into all spheres of design & look. When working on the presets, you can head to the Styles section on top and start editing every little detail of each section.


Edit Options

General

  • Filled elements: Determines the amount of progress completed.

  • Total elements: Determines the amount of progress in total.

  • Style: Choose from either dots, rectangles, or a bar visual style.

Spacing

  • Width: Here you can adjust the maximum spread of the block and choose between S, M, L and maximum width.

  • Top, Bottom, Left, Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.

Appearance

  • Visibility: Here you can choose whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.

  • Background color: You can select a colour to be used as the background for the block.

Did this answer your question?