Progress Bar Widget

The Progress Bar widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.

Introduction

 The Progress Bar widget enables you to let your visitors know how close they are to completing a task or to reaching a goal. It can be used in many ways:

  • On cart pages, a progress bar showing the amount needed to earn a gift, coupon, free shipping, etc.

    1.png2.png    3.png4.png
  • Word or character counter for a min. or max. expected number of characters (testimonials, feedback, etc.)

5.png6.png

  • Polls and surveys

7.png

  • Scroll progression on long scroll pages
  • Progression in the completion of a form
  • Funnel progression
  • Display stats more visually
  • Session duration (in "reverse mode", for example 30 mins. to finalize a booking or a ticket purchase)

All you need is:

  • A target quantity: the goal (it can be an integer (123) or a decimal (123.45) but cannot be 0 or a negative value) that requires typing/setting manually.
  • A variable: the current status of your goal (which is going to make the progress bar advance).

There are two ways to fetch the variable:

  • Select an element on the page which contains the value (preferably in its own <span>, <p>, <div>, etc., and the widget will parse and retrieve its value).
  • Write your JavaScript code (the sky is the limit! Collect a dataLayer variable, use browser listeners, set a timer, etc.).

Configuration

Layout tab

The progress bar is only available for the "free placement" layout. It is not available for the modal, banner, or panel layouts.

We offer three different sub-layouts:

  • progress bar & text-integrated variable
  • progress bar, label & variable
  • progress bar

Content tab

Depending on the sub-layout you choose in the layout tab, the content tab differs:

  • If you select: "progress bar & text-integrated variable"

  • If you select: "progress bar, label & variable"

  • If you select: "progress bar only"

One value per element

In order to properly parse the variable, the widget needs to use a single variable. This means that if you select a paragraph that contains two values, for instance, it will not work properly.

This is why you need to be careful when you select the element containing your variable: make sure it only contains one.

All value formats are welcome

You don't have to worry about the format of the value, or about having a colon or a comma as a decimal marker: if you use a very large number (i.e. 142,536,712.34), the widget will understand which is a separator and which is the decimal marker. If your element includes a currency or a special symbol or character, AB Tasty will recognize it.

AB Tasty covers almost all the international ways of writing prices, percentages, and numbers in general.

Variable

This is the most important part of setting up your Progress Bar widget.

By default, we have decided to set the variable value to 66. 

There are two ways of fetching the variable:

  • Select the element that contains the variable

Select the element on the page you want the variable to be applied to.

The element containing the variable must not contain several values (see above).

  • Return variable through custom JavaScript

To use the custom JS option properly, you must call a function called “update” and pass the new value as a parameter to update the widget.

By default, we provide an example of JavaScript code:

var counter = 0;
setInterval(function () {
if (counter > 90) {
counter = 0;
} else {
counter += 10;
}
update(counter);
}, 1000);

This JavaScript code fakes a progress bar that progresses by 10 every 1,000 ms. As the default target quantity is 100, it gives you a quick idea of how the progress bar will react to progress variations.

You can replace it with your own.

Here is another JavaScript code example for retrieving the scroll progression of the visitor on the page:

window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
update(scrolled);
}

Run the update() function whenever you need to update the progress bar.

Target quantity

By default, the target quantity is set to 100.

The minimum value is 1 and the maximum is 999,999,999,999.

You can use an integer or a decimal value with a period as a separator, but you cannot use 0 or a negative value.

Display variable as

You can choose whether you want to display the variable as a value or as a percentage.

If you pick a value, it will be the exact value of the variable as your web app or the visitor defined it.

If you pick a percentage, it will be calculated based on the target quantity.
For example, if the target quantity is 1,765 and the variable is 419, it will display "23.74%". The widget rounds to the closest 100th.

Display variable in relation to target quantity

You can choose whether you want to display the variable as the accumulated value (the variable value) or as the remaining value (subtraction of the target quantity value minus the variable value).

For example, select "remaining" if you are using the Progress Bar widget on a cart page and "accumulated" if you are using it for a character counter or a session duration.

For example:

  • with "remaining", if the target quantity is 1,765 and the variable is 419, it will display "76.26%".
  • with "accumulated", if the target quantity is 1,765 and the variable is 419, it will display "23.74%".

The widget rounds to the closest 100th.

Create your own content with dynamic tags

Only for "Progress bar & text-integrated variable" sub-layout

Rephrase the default sentence as desired.

You can add extra HTML markup and add some CSS in order to add bold or color to a specific section of text.

As an example, this is the CSS code needed to style the two pieces inside the customized sentence.

.varSubTot {
  color: #66BB66 !important;
  fill: #66BB66 !important;
  -webkit-text-fill-color: #66BB66 !important;
  font-weight: bold;
}

.freeShipping {
  font-weight: bold;
}

The variable must be enclosed in exclamation marks like so: !variable!

If you want to display the variable as a percentage, the variable must be followed by a “%”. If you use it as a value, you should not forget to specify the unit, and currency (before or after the variable, depending on your locale).

Progress Bar label

Only for "Progress bar, label & variable" sub-layout

You can enter the legend of your progress bar. By default, the label is in bold.

The variable cannot be edited inside the widget form. You can add a symbol next to it in the editor.

For example, inside the:

<dd class="abtasty_progress_value"></dd>
element of the variable, you can add a little <span> element containing the unit:
<span>US$</span>

Ended message

If you activate this option, you’ll be able to customize the message once the goal is reached: quantity, order amount, etc.

While the toggle is activated, you can fill in a static message such as “Congrats, shipping is now free!” or use dynamic tags to make it more dynamic (e.g.: “Congrats, your order comes to $234, the $9.99 shipping fee is on us!”).

Style tab

In the style tab, you will be able to define the size, color, borders, background, etc. of each element of the widget. Uncollapse each group and adapt the widget to your website color palette and style.

By default, the widget inherits its style from the font face to your website. However, you can override it with the 1,000 Google Fonts available.

There are progress bar widget styling specifics:

Background can be set up with an image using the image-fitting policy
4 options are provided:

  • "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container. 
  • "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the  background container (no overflow)
  • "Fill": the image is resized to fill the background container without keeping the aspect ratio 
  • "None": the image is left unchanged.

Progress bar color

You can pick a color from your existing palette. Most of the time, we recommend using a variation of your main call-to-action color.

Progress bar background color

You can pick a color for the background of your progress bar (progress tracking). We recommend using a different color than the background color of the element it is contained in (to create a strong enough contrast). If you pick white on a white background, for instance, it won’t be visible.

Colorblind accessibility mode (Stripes)

The option is toggled by default. This enables you to make the progress bar slightly more accessible. Especially if your progress bar color and progress bar background color is close (not contrasted enough).

Stripes color

You can make the stripes any color you want. To guarantee accessibility and elegance, we recommend using white and lowering the opacity (however no lower than 60%) to make the progress bar color appear.

Progress bar height

You can give more or less height to the progress bar.
The default height is 8px and the maximum height is 50 px.

Progress bar radius

You can give more or less rounded corners to your progress bar. The default radius is 4px and the maximum radius is 30 px.

Conditions tab

Select the Triggering and Recurrence options you want to apply to this widget.

Was this article helpful?

/