#161 - Estimate Article Reading Time

Automatically estimates and displays how long it’ll take to read your blog post.

Video Tutorial

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

21 lines
Paste this into Webflow
<!-- 💙 MEMBERSCRIPT #161: DYNAMIC READING TIME -->

<script>
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll('[data-ms-code="reading-article"]').forEach(article => {
    const rtEl = article.querySelector('[data-ms-code="reading-time"]');
    const rich = article.querySelector('[data-ms-code="reading-text"]');
    if (!rtEl || !rich) return;

    const text = rich.innerText.trim();
    const words = text ? text.split(/\s+/).length : 0;
    const imgs = rich.querySelectorAll('img').length;
    const WPM = 260, SEC_PER_IMG = 10;

    const totalSec = (words / WPM) * 60 + imgs * SEC_PER_IMG;
    const minutes = Math.max(1, Math.ceil(totalSec / 60));

    rtEl.innerText = `${minutes} min read`;
  });
});
</script>

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in UX