Webflow

min read

Webflow Read Time

Published on

April 4, 2024

How this guide will help you:

Estimate reading times

Keep visitors informed and engaged

Enhance content strategy insights

Fill us in on your email and we’ll send it your way

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Content Contributors

Agif

Engineer

Dont’ miss out on our next blueprint launch!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Share this post

Overview

Introducing our latest Webflow blueprint designed to enhance the reading experience on your website. Empower your readers with valuable insights into their time investment with each piece of content. With our meticulously crafted template, seamlessly integrate "Read Time" functionality into your CMS collection resources.

‍

Step-by-Step Guide

Required

Step 1: Copy the <script> to your <body>

<script src="https://cdn.jsdelivr.net/gh/BuildWithDevhaus/devcode/webflow/read-time.js"></script>

Step 2: Add custom attribute to your element wrapper

read-time-container

Step 3: Add custom attribute to your text element

read-time-duration

Step 4: Add rich-text inside your wrapper and hide it

Step 5: Add custom attribute to your rich-text element

read-time-content

Optional

Adjusting Words Per Minute

Add this custom attribute to the container. (default: 200)

read-time-words-per-minute

‍

Adjusting Seconds Per Image

Add this custom attribute to the container. (default: 5)

read-time-seconds-per-image

‍

Dont’ miss out on our next blueprint launch!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Share this post

Here’s a quick guide

Make the most of our free resources

If you’re worries about projects with us being “expensive” you don’t have to be. Here’s an overview step by step process to help you align your evaluation processes.