⏳ Read Time Calculator
This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.
This code will calculate the number of minutes it will take the average reader to read all of the text in the blog post. The estimated read time will be displayed on a gray box with a border; it uses your paragraph text font and can have customized colors.
How to use this code
This code is designed to work on any Squarespace blog post and it will not work on a standard page, lesson, or any other page type. Copy this code using the copy button on the right. It’s recommended that you add it to a code block inside your blog post wherever you want it to be displayed.
<!-- Estimated Read Time Code from CustomCodey.com -->
<div id="read-time-estimate" style="
background-color: #f8f9fa; /* Light gray background */
border: 1px solid #ccc; /* Solid border */
padding: 10px;
margin: 10px 0;
font-family: var(--body-font-line-height);
font-size: 1rem;
color: #333; /* Dark gray text */
text-align: center;
border-radius: 4px; /* Slightly rounded corners */
"></div>
<script>
// Function to calculate read time
function calculateReadTime(selector) {
const wordsPerMinute = 200; // Average reading speed
const contentElement = document.querySelector(selector);
const outputElement = document.getElementById("read-time-estimate");
if (contentElement) {
const textContent = contentElement.innerText || "";
const wordCount = textContent.split(/\s+/).filter(word => word.length > 0).length; // Word count
const readTime = Math.ceil(wordCount / wordsPerMinute); // Calculate read time
// Display result
outputElement.innerText = `Estimated Read Time: ${readTime} minute${readTime === 1 ? "" : "s"}`;
} else {
outputElement.innerText = "No content found to calculate read time.";
}
}
// Run the function on page load
document.addEventListener("DOMContentLoaded", function () {
calculateReadTime(".blog-item-content");
});
</script>