Written By
Jayant Rao
Published on
February 21, 2025

How we grew our website traffic by 5x using SEO on Webflow

How we grew our website traffic 5x using SEO on Webflow. From keyword research to technical fixes, see our data-driven strategy for success!

How do you create a Time to Read calculator in Webflow?

Use Neue World 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.

Step #1

Copy the Time to Read <script>

Copy the script and paste it into the </body> tag of the particular page. You can do so by clicking on

  1. Pages on the left navigation or, by tapping (P) on your keyboard
  2. Select the settings icon beside the page you want to add the script in
  3. Scroll down, you will see a section called Before </body> tag
  4. Paste it here

Adding script within Page Settings on WebFlow
Adding script within Page Settings on WebFlow

Step #2

Set Custom Attributes

Custom attributes settings within WebFlow Settings

You will need to add attributes to 2 elements on the page. One is for the text that is being read and the other is added to the element that shows how much time it would take to read the content.

  1. read-text: Add this attribute to the ‘name’ field of the element that the user would be reading
  2. time-to-read: Add this attribute to the ‘name’ field of the element that would display how much time is needed to read the content

WebFlow attributes and changing their names

Step #3

Publish your site

It's highly recommended to publish your site on staging environment to make sure the script is working. Once you have confirmed it, you can publish it to your main domain.

On this page

How do you create a Time to Read calculator in Webflow?

Use Neue World 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.

Step #1

Copy the Time to Read <script>

Copy the script and paste it into the </body> tag of the particular page. You can do so by clicking on

  1. Pages on the left navigation or, by tapping (P) on your keyboard
  2. Select the settings icon beside the page you want to add the script in
  3. Scroll down, you will see a section called Before </body> tag
  4. Paste it here

Adding script within Page Settings on WebFlow
Adding script within Page Settings on WebFlow

Step #2

Set Custom Attributes

Custom attributes settings within WebFlow Settings

You will need to add attributes to 2 elements on the page. One is for the text that is being read and the other is added to the element that shows how much time it would take to read the content.

  1. read-text: Add this attribute to the ‘name’ field of the element that the user would be reading
  2. time-to-read: Add this attribute to the ‘name’ field of the element that would display how much time is needed to read the content

WebFlow attributes and changing their names

Step #3

Publish your site

It's highly recommended to publish your site on staging environment to make sure the script is working. Once you have confirmed it, you can publish it to your main domain.