Streaming live at 10am (PST)

Blog Reading Timer

Hi everyone,

I’m looking for a way to insert a reading time estimator for my blog.

Can you help me find a solution?

Thank you. Thank you.


Here is my public share link: LINK
(how to access public share link)

I have the same question! If I find the answer I’ll let you know.

Ok, so @CGW-Marketing this is the current fix I’ve devised.
There isn’t an automatic way to do it that I see, so i’m doing it a bit manually.

In your blog post CMS collection, make a number field labeled ‘Read Time’ and make it required. When you design your blog post layout, include 2 pieces of text aligned horizontally to each other in a flexbox. For the first piece of text, link it to the Blog Post CMS field ‘Read Time’. For the second piece of text, just write ‘Min.’ and leave it.

that way when you update the read time field, it will update for each blog post.

I would reccomend making the hint the calculation for read time - I think it’s 1 minute for every 60 words? But I could be completely off.

Hope that helps!

“A bit” manually? That about as manually as it can be :slight_smile:

This could easily be done with javascript. Fetch amount of characters/words in the rich text field, do a simple calculation based on characters/words per minute, post the text.

Do you have an example of the Javascript for something like this? I can’t code, so manual is my only suggestion.

Thanks for your reply.The manual way is an alternative, but I do it for my clients. So I won’t ask them to do another task when writing an article.

I’m looking for a piece of code to integrate but I haven’t found it yet.

Reading time is subjective and based on the target audience.

I can probably cook something up but you have to provide the published link of an example article.

If you want to discuss this privately, you can also contact me via email.

I made a working example here: https://jsfiddle.net/98xctarq/
It’ll count the words in a div (preferrably the text field you want to count), then do maths on the number and calculate the minutes needed to read it (60 words per minute). The result is posted to another div.

Just put the javascript at the bot there into your site’s custom code part (remember the script tags), then rename the “richtextfield” part to the actual name of the text field.

Finally, set an empty div somewhere where you’d like the number to pop up. Set the div id to “result”.

Change the x variable in the javascript to however many words you think you can read per minute (it’s set to 60).

Edit: Fixed a link.

Hi, Fonsume.

Thanks for your help.

I did as you said, but I don’t know where to put the script. I put it at the bottom of my page in the HTLM Embed component. It’s not working.

Can you tell me where to put it?

Put it in the custom code segment on the page / collection page. It goes into the bottom one.
2020-01-21 13_27_05-Webflow - PF 2.0

Remember to include the <script> </script> tags!

Thank you for the help - I’ll probably be using this on my site as well!

1 Like

Okay, it’s working. Thank you for your help.

Great community.

1 Like