How to Display an Article’s Reading Time in Webflow with Finsweet
Learn how to automatically display the reading time of a Webflow article with Finsweet Attributes Read Time.
In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to automatically display an article’s reading time in Webflow with Finsweet Attributes Read Time.
1. Add the script to the head
2. Mark your source content
On your Rich Text element (or any element containing the text to analyze), add fs-readtime-element="content". Finsweet counts the number of words in this element to calculate the reading time.
3. Add the display element
Create a Text Block where you want to show the reading time (for example, in your article header, next to the date). Add fs-readtime-element="result". Finsweet automatically injects the calculated number.
4. Customize the calculation and format
The default reading speed is 200 words per minute. To adjust it: fs-readtime-wordsperminute="250" on the source element. To add an automatic suffix ("min read"): fs-readtime-suffix=" min read". The result will be "5 min read" right away.
Conclusion
Reading time boosts engagement on long-form articles. Use cases:
- Blog articles with an "X min read" label
- Documentation pages with a time estimate
- Newsletters or PDF guides with an estimated reading duration
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
