[Create] Reading Progress Bar on Scroll

design

#1

community tips scripts banner

Concerned that your visitors won’t scroll your page to read every benefit and content you have to deliver? Are heatmaps keeping you awake at night? Want more than just bouncing arrows? There must be another way…

Of course there is! Just add this tiny script to have a sleek reading progress bar on top of your page that gives your visitors nice visual feedback on the percentage scrolled of a page!

com-gif-maker

You can see this in action (built in Unbounce) here:
https://success.unbounce.com/progress-bar


:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Step 1.

Paste the following script into your javascript box:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.rawgit.com/mburakerman/prognroll/master/src/prognroll.js"></script>
<script>
    $(function() {
      $("body").prognroll({
        height: 8, //Progress bar height in pixels
        color: "#F95A5A", //Progress bar background color
      });
    });
</script>

Step 2.

Replace the value of the height and color to something that matches your LP’s branding

Step 3.

That’s it! Enjoy your nice reading progress bar on scroll :star_struck:

Testing

Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

If you end up using this on your next landing page, be sure to come back and share with the Community! :slight_smile:



This is my first time actually writing a Tip & Script in the community but I’ve used so many little tricks like this on landing pages while working for almost 4 years now at Unbounce… Let me know if you find these little things useful and I’ll make sure to keep’em coming :wink:



Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


#2

Hopefully this is the first of many times that you share your brilliance in here, @Luis_Francisco!!! :muscle:


#3

This is awesome @Luis_Francisco. I’ll definitely be using this.


#5

Wow, super easy to implement, too! This is awesome, thanks!


#6

Hey Erik! The instructions are in a dropdown that lives here in the community. It gets truncated in email notifications, so if you’re looking to implement this just head over to this link and take a look! :smile:


#7

Love how easy this is to use. Thanks!


#8

Hey Louis,

This is an awesome post.

I’m interested in the instructions, seems like the link was excluded.

Inline image 2

Thanks!


#9

Hey Kevin! I’ve tweaked this post to share all of the content, enjoy!!


The Ultimate List of Unbounce Tips, Scripts & Hacks
The Ultimate List of Unbounce Tips, Scripts & Hacks
#10

Just wow!!! I will be implanting this asap. Thank you!!!


#11

Hey @Luis_Francisco, do you have a recommendation for how to deal with multiple jQuery references? (cos Unbounce has the old 1.4 version available).