Skip to main content


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




🚨

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 🤩


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! 🙂






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 😉






Want to take your Unbounce landing pages + Convertables™️ to the next level?

:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


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


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


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


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! 😀


Love how easy this is to use. Thanks!


Hey Louis,


This is an awesome post.


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


Inline image 2


Thanks!


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


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


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).


Conflict with Smooth Scroll [https://documentation.unbounce.com/hc/en-us/articles/360022719471-Adding-Smooth-Scrolling-Links-and-Buttons-for-Anchor-Links].


Any solution?


Can you share what is the conflict you are getting?


Great, great, great!! Many thanks!


I am interested in landing pages for mobile. Do you believe it would be interesting to have the progress bar on vertical? Or it would be confusing (scroll)? Horizontally looked nice!


By the way, Portuguese or Brazilian?


Congrats again!


This works very well and it is easy to use and implement.


Excellent post as always - thanks for sharing and again, something I implemented on my site.


I also made a video that explains and tells how to do this step-by-step for anyone interested:





  • Ivan


@Laserfocus I love these updates!!! 🙌


If you ever want to make them their own standalone posts that might be easier for folks to find, let me know if I can help get things set up 😃


-Jess


Can you share what is the conflict you are getting?

@Luis_Francisco It doesn’t work at all if you use the smooth scroll as suggested in the other forum which @omniawebpaolo pointed to. Any solutions?


@bakersfieldMan, did you find a solution yet, or should I look for a solution?


Reply