CSS Enabled: ❌
A Progress block in Frontly is a visual tool to help guide your users through multi-stage tasks and processes, breaking them down into manageable sections. By providing clear indicators of each stage, it may help set expectations for them regarding what tasks are ahead and how far along they are in their process.
Setup
To set up the progress bar in Frontly, each step is configured with three key fields: Label, Description, and Conditions. Understanding how to use these fields effectively will help you create a smooth and user-friendly experience for your customers.
Label: Serves as the title for each step in your progress bar. It should be clear and concise, providing users with a quick understanding of where they are in the process.
Description: A text area that is displayed in a smaller font. This is where you can provide additional details about the step. Keep in mind that while you can include more text here, the more steps you add, the less space you’ll have to display both the label and description on the screen. It’s important to strike a balance between informative and concise. For example, if the label is "Step 1: Info," the description could be something like "Enter your personal information to proceed."
Conditions: Determines when each step in the progress bar is highlighted. This functionality mirrors the conditions system used throughout Frontly, allowing you to control the progression based on specific criteria. Conditions can be set using a combination of static or dynamic variables, along with a condition operator such as "equals" or "greater than."
For this part of your configuration, we recommend using a User variable. Mapping each step with a different value towards a custom user field is the simplest way to meet conditions for the Progress block, as each completed step through a form submission or click can trigger an 'Update Active User' action.
Other Notable Settings
Orientation: Select from Horizontal, Vertical or Responsive to determine how the Progress block will appear on your page. Choosing 'Responsive' will allow the block to pick either depending on the width of your user's devices.
Styling: To customize the color of the Progress block as each step and their paths are highlighted, go to your the 'Branding' tab and select your Primary Color.
