Progress Bar

Create guideposts along the customer journey

Small tweaks to a site can lead to significant conversion improvements. Take the humble Progress bar, for instance.

When deployed effectively, this simple graphic can build customer confidence by showing them they're on the right path and that their transaction is almost complete.

Adding a widget

To add a Progress bar widget:

1. Open a step.

2. Click one time the element (e.g. container, row cell) that will hold the widget.

3. Click the Progress bar widget on the left panel. Funnelish displays the widget and left-side settings panel.

Progress bar widget default settings

Customizing the bar

You can customize the appearance of a bar (e.g. design and length of the progress bar). All the standard design tools are here, including text, colors, borders, margins, and padding.

Click the widget one time on the canvas. The settings panel displays on the left side of the screen.

To change bar length and label:

1. Go to the settings panel.

2. Locate the Value heading.

3. Change the figure as required.

4. Go to the Label heading.

5. Under Label text enter a Value figure.

6. Click Save changes.

7. Go to the Label position heading.

8. Choose the alignment of the text

Note Make sure you manually input the same figure for the Value and Label text.

Styling the Progress Bar and adding animation

Under the Styles tab you can set up the colors and add an animation effect to the progress bar

1. Scroll down to Styles heading.

2. Assign the colors as desired.

3. To add a style, choose from the options in the dropdown.

4. To add the animation, switch on the toggle. (optional)

5. Click Save changes.

6. Click Preview.