Time to Read

Calculate a read time for any text block or rich text element on your page.
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How do you create a Time to Read calculator in Webflow?[.c-title_step]

Use Refokus Time to Read tool to calculate the total read time of a text element or rich text element and display the calculated time dynamically on another text element.

[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

[.c-text_step] Paste the following script in the “Before tag” field under the “Custom Code” section in the page settings. [.c-text_step]

<script src="https://tools.refokus.com/time-to-read.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

Everything is made using custom attributes, so when we say “add” that means “Add a custom attribute”.

To start, add a text or rich text element in the project. Ensure that the text you want to calculate is in one single element. This is the text that will be calculated into a read time. Give this text or rich text element a class, anything you want, for this example. We use the class '.c-rich-content'.

Next step, we need to create an element that displays the calculation of the text or rich text element. This would be a text element that will dynamically change based on the calculation. To this element we want to add the following attribute: (Remember the class you gave the text element you need to be calculated, this is the value of the attribute.) [.c-tool_tag]time-to-read=.c-rich-content[.c-tool_tag]

Now, you're done! Hit the publish button, and see the Time to Read tool in action.

Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

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