Read Time
Read Time
This tool automatically calculates and displays the estimated reading time for your articles and blog posts. It analyzes both text content and images to provide accurate time estimates, helping readers understand how long it will take to consume your content. Customize reading speed, image processing time, and display format. Perfect for improving user experience and setting proper expectations for content consumption.
Implement it easier
1
Add the script
Add this script in page settings > Custom code > Before the closing </body> tag
<!-- BeBranded Contents -->
<script async src="https://cdn.jsdelivr.net/npm/@bebranded/bb-contents@1/bb-contents.js"></script>
2
Main attribute
Enable the module
bb-reading-time attribute
bb-reading-time
=
" "
Add the bb-reading-time attribute to the element where you want to display the reading time.
Add this attribute:
Name
bb-reading-time
Value
NOTE
The bb-reading-time attribute can be empty. By default, it will analyze the content of the element itself.
3
Target specific content
Target content
bb-reading-time-target attribute
bb-reading-time-target
=
".article-content"
Use bb-reading-time-target to specify a CSS selector for the content to analyze.
Add this attribute:
Name
bb-reading-time-target
Value
.article-content
NOTE
Example: ".article-content" will analyze the content of the element with the article-content class.
Optional
Custom reading speed
Reading speed
bb-reading-time-speed attribute
bb-reading-time-speed
=
"200"
Set the number of words per minute for the calculation. The default value is 230 words/minute.
Add this attribute:
Name
bb-reading-time-speed
Value
200
NOTE
Typical values: 150-200 (slow reading), 200-250 (normal reading), 250-300 (fast reading).
Optional
Time per image
Time per image
bb-reading-time-image-speed attribute
bb-reading-time-image-speed
=
"15"
Set the number of additional seconds for each image. The default value is 12 seconds.
Add this attribute:
Name
bb-reading-time-image-speed
Value
15
NOTE
Consider the complexity of your images: 5-10s for simple images, 10-20s for complex images.
Optional
Display format
Custom format
bb-reading-time-format attribute
bb-reading-time-format
=
"Reading time: {minutes} min"
Use bb-reading-time-format to customize the display with the {minutes} placeholder.
Add this attribute:
Name
bb-reading-time-format
Value
Reading time: {minutes} min
NOTE
The {minutes} placeholder will be replaced by the number of minutes. Example: "Reading time: 5 min"
1
2
Still need help?
