Enlighten IC

Book A Call

Want To Sell Better With HubSpot? Check Out eZo eCommerce...

Progress Bar - Documentation

Progress Bar

This module make it easy for you to display progress on a website page or blog post as a visitor scrolls down the page. The documentation will walk you through how to set up and install the Progress Bar. Should you have any questions, please click on the support link to get in touch.

Setting Up The Progress Bar

  1. After purchasing the module from the HubSpot Marketplace the first step is to set up the module, to do this navigate to Marketing > Files and Templates > Design Manager and select Progress Bar from the left hand side menu (It will be listed in a folder named Marketplace).

  2. Select Edit global module from the right hand side to open HubSpot's Global Content Editor.


Styling Your Progress Bar

The options on the left hand side are:


Styles - In the Styles section there are multiple options to adjust the visual styling of the Progress Bar. These options are:

Height  - This allows you to edit the CSS property height which will change how tall the Progress Bar is on your website.

z-index - This option is used if you discover the Progress Bar overlaps other elements on your web page. The element with the highest z-index will always display on top of other elements on your website. The default value is "100000000" but you may need to increase this if other elements on your website use a similar high numbered z-index.

Offset  - This value allows you to adjust the CSS property top or bottom which moves the Progress Bar further away from the docking position of a user's screen. This can be useful if you have a ‘fixed’ menu bar or other docked element on your website.

Background Colour  - This changes the colour of your Progress Bar.

Panel Background Colour  - This element is optional and is the background colour of the element which the Progress Bar sits on.

How To Install The Progress Bar

  1. When you have finished editing the Progress Bar, click the Publish button on the top right to save your changes and then navigate to Marketing > Files and Templates > Design Manager and select a page template you would like to show the Progress Bar on.

  2. If you are using HubSpot's drag and drop editor then on your page template select Add+, choose Progress Bar and drag it into the Header section of your page template.


  3. If you are using HubSpot's HTML editor to build your templates you will have to copy the module's snippet and paste it at the top of your HTML document, just inside the <body> element.


  4. Before the Progress Bar will work you will need to add the class read-me-eic to the element on the page you wish to track the user's progress on. If, for example you have a blog where the article is contained within an HTML element with the class blog-post then add the class read-me-eic to this element too. It’s important to remember that the bar won’t work without this class.


  5. Click Publish Changes on your template to make your Progress Bar live on all pages using this template.

  6. Repeat steps 1-6 for each template you wish to include the Progress Bar on.

CSS Styles

This module has been designed to be as flexible as possible. All the CSS required to style the Progress Bar is included within the module. It can be edited to suit your needs although we recommend using the built-in styling options as we can’t take responsibility for any CSS edits you make that break the module (or your website).

Final Thoughts

We have tried to build as much functionality into this module as possible without making it too complicated. If, however, you have specific requirements for your business, please get in touch and we will see if this module can be customised further to meet your needs or if a bespoke module would be more appropriate.

Looking For
Custom Development?

We provide development solutions for companies and agencies who need help building their websites from scratch or adding custom functionality along the way

Get In Touch