How to Display an Article’s Reading Time in Webflow with Finsweet

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

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-readtime@1/readtime.js" defer>script>

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