English (US) Deutsch Español (España) Français
abtasty.com

Articles in this section

See more

Progress Bar widget

Avatar
Knowledge Base
  • Updated
Follow

The Progress Bar widget enables you to let your visitors know how close they are to completing a task. There are three types of Progress bars:

  • Progress bar & text-integrated variable
  • Progress bar, label & variable
  • Progress bar only

ProgressBar.png

Accessing the widget

ProgressBar_accessing_widget.png

  1. Open the variation editor on the desired website,
  2. Click Widgets in the toolbar on the right-hand side,
  3. Browse to the Promotional Content section or filter on the widget’s name,
  4. Click Add,
    The configuration form is displayed.

 

Configuring the widget

During this configuration step, layout, content and style changes are displayed in real-time.

To apply your changes, proceed as follows:

  1. Go through each and every tab of the configuration form and select the options that apply.
  2. Click Save to save your changes.
  3. If necessary, you can click History in the toolbar on the right-hand side, then click the widget you added to reopen the configuration form and edit your changes.

An information message is displayed if you try to create a widget when one of the same type has already been configured in the variation or scenario. Once closed, it won’t be displayed again.
ProgressBar_already_active.pngHowever, this doesn’t prevent you from creating another widget, should you need to.

 

 

List of options of the Progress Bar widget

Four tabs (Layout, Content, Style, Conditions) are available for you to configure the widget.

EN_Tabs.jpg

The Save button will only be enabled once you have gone through each  tab.


Layout tab

ProgressBar_layout.png

The Progress Bar widget is only available as a free placement. This option enables you to position the widget in a specific place in relation to an existing HTML element:

  1. Click Select element.
  2. In the page, select the element on which you want to hook the widget.
  3. Select the appropriate option to position the widget Before, At the beginning, At the end or After the element.

Before

Fix the widget before a specific element of the web page

After

Fix the after before a specific element of the web page

At the beginning

Place the widget in the HTML code, at the start of the element definition

At the end

Place the widget in the HTML code, at the end of the element definition

 

Free placement examples

In the following example, a black border is set around the block of text in the web page.

Example1.png

This border is configured in the <div> element.

Example_code.png

When configuring the widget, the selected element is the <div>.
Depending on the selected Free placement option, the display of the widget will be as shown below.

 

Before option

Code example

  Example_code_before.png

Visual display

  Example_widget_before.png

 

At the beginning option

Code example

  Example_code_at_the_beginning.png

Visual display

  Example_widget_at_the_beginning.png

 

At the end option

Code example

  Example_code_at_the_end.png

Visual display

  Example_widget_at_the_end.png

 

After option

Code example

  Example_code_after.png

Visual display

  Example_widget_after.png

 

When using the At the beginning or At the end options, the widget may inherit the CSS styles of the selected element.

 

Select a layout among these three options: Progress bar & text-integrated variable, Progress bar, label & variable, Progress bar only. 

Progress bar & text-integrated variable

Displays the Progress bar and a sentence below it. The sentence can include the variable (your progress value) that you can position where you want.

Progress bar, label & variable

Displays the Progress bar, a label and the variable below it. The label is aligned on the left and the variable on the right.

Progress bar only

Displays the Progress bar only.

 

Content tab

Depending on the layout you choose, the content tab differs.

Progress bar & text-integrated variable

Progress bar, label & variable

Progress bar only
 ProgressBar_text_content.png  ProgressBar_label_content.png ProgressBar_only_content.png

 

Common options

Option

Use

Select the element that contains the variable

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

The element containing the variable must not contain several values.

Return variable through custom JavaScript

Write your own 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.

Quantity to reach

 

 

Define the input over which the calculation is made and executed as the variable progresses.
By default, the quantity to reach is set to 100. The minimum value is 1 and the maximum is 9999. You can use a decimal value with a dot as a separator.

 

Options common to Progress bar & text-integrated variable and Progress bar, label & variable

Option

Use

Display variable as a

Display the variable as a value or as a percentage. 

Display variable in relation to quantity to reach as

Display the variable in relation to quantity to reach as remaining or accumulated.

 

Options specific to Progress bar & text-integrated variable

Option

Use

Create your own content with the dynamic tags

Rephrase the default sentence as desired. You can add extra HTML code.

The variable must be enclosed in exclamation marks. If you want to display the variable as a percentage, the variable must be followed by a “%”.

 

Options specific to Progress bar, label & variable

Option

Use

Progress bar label

Enter the legend of your Progress bar. This label cannot contain the variable.

 

Style tab

Select the style options (Text, Container, Border, Overlay) you want to apply to your widget and customize the Progress bar. 

From here, you can configure the colors and the size of your bar. We have implemented a colorblind mode using stripes for visitors who have trouble seeing colors, to help them identify the level of progress.

 

Progress bar

Options

Use

Progress bar color

Progress bar background color

Select a color for the bar and for its background. Either:

  • from the color palette
  • typing a hexadecimal value in the input field
 

Select the color opacity. Either:

  • using the up and down arrows
  • typing in the percentage value in the Opacity field

Colorblind accessibility mode

Configure the color of the stripes for the colorblind accessibility mode when enabled. Either:

  • from the color palette
  • typing a hexadecimal value in the input field
 

Select the color opacity. Either:

  • using the up and down arrows
  • typing in the percentage value in the Opacity field

Progress bar height (px)

Progress bar radius (px)

Configure the height and the radius of the widget. Either:

  • using the slider to increase or decrease the number of pixels
  • using the up and down arrows
  • typing the pixel value in the input field

 Refer to the Widget Style options article for more information on all available Style options. 

 

Conditions tab

Select the Triggering and Recurrence options you want to apply to the Progress Bar widget. Refer to the Widget Condition options article for more information on the available Condition options. 

 

Progress Bar specific Triggering options

After progress bar reaches completion, the widget will be displayed

The recurrence options apply once the progress bar is complete.

Refer to the Widget Condition options article for more information on the available Condition options. 

 

 

Related articles

Widget Condition options

Widget Style options

Related articles

Comments

0 comments

Please sign in to leave a comment.