Reading Time Blog/Article Page
Display the reading time associated with a blog or article on your Webflow site with this Javascript code. With this code you'll be able to easily add a reading time to all of your blogs or articles on your Webflow site.
Display the reading time associated with a blog or article on your Webflow site with this Javascript code. With this code you'll be able to easily add a reading time to all of your blogs or articles on your Webflow site.
How to add it
- Add the script src to your pages header section in custom code page settings
- Add the script to the /body section of your custom code page settings
- Add a class to the body content of read-content and add a class of read-time to an empty div where you want to render the count of minutes to rea
The code
Javascript
// Add to head
<script src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.js" integrity="sha256-aHKmycKpF87rkv79Pvc87nQCpWaJ4dvd90OwqqnmVMg=" crossorigin="anonymous"></script>
//Add to closing body
<script>
$(function () {
var content = $(".read-content")[0]
if (!content) {return;}
var txt = content.textContent;
wordCount = txt.replace( /[^\w ]/g, "" ).split( /\s+/ ).length;
var readingTimeInMinutes = Math.floor(wordCount / 228) + 1;
var readingTimeAsString = readingTimeInMinutes + " min";
$('.read-time').html(readingTimeAsString);
});
</script>
