Some people use Webflow's CMS to manage blog postsI want to automatically display “This article can be read in ◯ minutes” I think there are many people who think that.

This time How to automatically calculate article reading time using JavaScript and display it dynamically on Webflow pages I will explain it to you.

I'll explain it in detail, including the process of actually implementing it through trial and error, so be sure to check it out!

1. Step 1: Review the article structure

First, check how the main text of the article is arranged in Webflow's CMS.

Necessary elements:

• Includes the main text of the article .article-content Let's check out the rich text blocks in the class. This is the part that shows the main content of the article.

1-1. Setup procedure in Webflow

1. Open Webflow's Designer (design editor)
2. Go to the CMS collection page(blog post template pages, etc.)
3. Select a rich text block to display the article text
4. “Class” .article-content Set to(check only if you already have one)

1-2. How to check the elements in the article text

1. Publish the page or open preview
2. Open the browser's development tools (F12 key)
3. On the Elements tab .article-content Search
4. Check if the text of the article is correct

Also, display the reading time .reading-time-container It's called Div Place the element within the page. This element is for dynamically inserting reading times calculated using JavaScript.

First, in Webflow design mode .reading-time-container Add it and place it in an appropriate position. For example, something just below the article title is appropriate.

Development tools (F12) is used to create the main text of the article .article-content Let's check that it's applied to.

console.log("記事本文:", document.querySelector(".article-content"));

run this code in the console,null Instead, it's OK if the rich text block HTML is displayed.

2. Step 2: Calculate reading time with JavaScript

To dynamically display read time on Webflow pages, use JavaScript.

To calculate reading time,Generally read about 500 characters per minute We will adopt this assumption.

2-1. initial implementation(basic reading time calculation)

This script is Webflow's “Before </body> Tags” area If you add to, when the page loads Calculate the number of characters in the main text of the article and read it time .reading-time-container Insert into You can do it.

document.addEventListener("DOMContentLoaded", function () {
    let articleContent = document.querySelector(".article-content");
    let readTimeContainer = document.querySelector(".reading-time-container");

    if (articleContent && readTimeContainer) {
        let text = articleContent.innerText.trim();
        let charCount = text.length;
        let readingSpeed = 500;
        let readingTime = Math.ceil(charCount / readingSpeed);
        readTimeContainer.textContent = `この記事は約 ${readingTime} 分で読めます。`;
    }
});
    }
});

3. Step 3: Address Webflow CMS load delays

In Webflow Since CMS data is loaded asynchronously, the article text hasn't been loaded yet when the script is executed There is something.

To resolve this issue,A process that waits for up to 5 seconds (100ms x 50 times) for an article to load I will add it.

3-1. Revised JavaScript (optimized version for Webflow)‍


document.addEventListener("DOMContentLoaded", function () {
    let articleContent = document.querySelector(".article-content");
    let readTimeContainer = document.querySelector(".reading-time-container");

    if (articleContent && readTimeContainer) {
        let text = articleContent.innerText.trim();
        let charCount = text.length;
        let readingSpeed = 500;
        let readingTime = Math.ceil(charCount / readingSpeed);
        readTimeContainer.textContent = `この記事は約 ${readingTime} 分で読めます。`;
    }
});
        readTimeContainer.style.display = "block";
        readTimeContainer.style.visibility = "visible";
        console.log("✅ 読了時間が設定されました:", readTimeContainer.textContent);
    }

    function observeContentChanges(articleContent, readTimeContainer) {
        let observer = new MutationObserver(() => {
            let text = articleContent.innerText.trim();
            let charCount = text.length;
            if (charCount > 0) {
                updateReadingTime(charCount, readTimeContainer);
            }
        });

        observer.observe(articleContent, { childList: true, subtree: true, characterData: true });
        observer.observe(readTimeContainer, { childList: true, subtree: true, characterData: true });
    }
});

4. Step 4: Debug when the read time is not displayed

4-1. .reading-time-container I can't find it

Check if the element is present by running the following command in the console.

console.log(document.querySelector(".reading-time-container"));

If null, the element doesn't exist on the page So, on Webflow .reading-time-container Please add it correctly.

4-2. Make sure it's not hidden in CSS

Run the following code and test whether the elements are displayed correctly.

document.querySelector(".reading-time-container").style.display = "block";document.querySelector(".reading-time-container").style.visibility = "visible";

4-3. Confirm retrieval of article text

console.log(document.querySelector(".article-content")?.innerText);

If the article text can be obtained here, there is a high possibility that the script is working properly.

5. Summary

✅ To automatically display the reading time in Webflow CMS, calculate the number of characters in the article using JavaScript
✅ Wait up to 5 seconds to support Webflow's delayed loading setInterval Make use of
✅ .reading-time-container Make sure the settings are correct and check the effects of CSS
✅ Use MutationObserver to respond even when the content of an article changes