How to add an attribute:

close icon
Hey! Give us some feedback here.
Visual
NEW
Pro only solution
Pro early access

Read Time

Calculate and display the estimated read time of Rich Text content based on word count.

2,416,411

loads per month

Read Time
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
Contents
I want this
div block icon

Div Block, Rich Text Element

to contain all text contents to be included in the read time calculation
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-readtime-element
copy icon
Value
contents
copy icon
This elements wraps all text contents for the read time. Nest any type of text element inside this wrapper.

All words inside this wrapper will be used in the read time calculation.
navigator arrow
Time
I want this

Text Element, Span, Paragraph, Heading

to display the read time calculation
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-readtime-element
copy icon
Value
time
copy icon
This is the element that displays the calculated read time in minutes.

Based on the amount of words on the page and the WPM value, we calculate read time. This text element will show the calculated value.

The output is a number value. For example, "4".
navigator arrow

Option

Words per minute
The amount of "words per minute" used in the read time calculation
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-readtime-wpm
copy icon
Value
265
copy icon
By default, we set the WPM value to 265.

This is the default value set by Medium.com https://help.medium.com/hc/en-us/articles/214991667-Read-time
Where?
Add to the element with fs-readtime-element = "time"
navigator arrow

Option

Decimals
The amount of decimal point values included with the read time value output
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-readtime-decimals
copy icon
Value
0
copy icon
By default, we set the decimals value to "0". A value of "0" outputs a whole number. For example, "4"

If we set the value to "1", we will use 1 decimal point value. For example, "4.2"

If we set the value to "2", we will use 3 decimal point values. For example, "4.25"
Where?
Add to the element with fs-readtime-element = "time"

Working examples

See this solution working live in this Webflow project.

Example 1
Read time of a Rich Text element
Estimated read time:
#
minutes

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Copy and paste this example directly on Webflow
copy icon
Copy this example

Combinations using Read Time:

You can combine this Attribute with others to create more complex solutions.

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.