Tip: How to Add Estimated Reading Time to Articles in Guide

Zendesk level: Beginner
Knowledge: HTML, JS
Time Required: 5 minutes

This is a simple tip to quickly add an estimated time to read to your articles in Guide, displayed inline with article meta-data as such:

Few quick call-outs before sharing the steps:

• I'm not a developer, just an admin sans developer resources in my instance
• Original script can be found at this source with more details/comments here
• You can achieve similar results many different ways and can modify placement/look/feel/wording to fit your preferences

Steps:

1. Add the below code to your script.js file. Placement of the script may vary based on your theme template, I tested it at the bottom of a default Copenhagen v2.9.0 theme both in and outside the DOMContentLoaded:

function readingTime() {
  const text = document.getElementById("article-body").innerText
  const wpm = 225
  const words = text.trim().split(/\s+/).length
  const time = Math.ceil(words / wpm)
  document.getElementById("time").innerText = time
}
  readingTime()

• Tip: Change the WPM variable from 225 to another number if desired and depending on your target audiences average reading speed. 

2. Open the article_page.hbs template file to add the following bolded items:

<ul class="meta-group">
{{#is article.created_at article.edited_at}}
<li class="meta-data">{{date article.created_at timeago=true}}</li>
{{else}}
<li class="meta-data">{{date article.edited_at timeago=true}}</li>
<li class="meta-data">{{t 'updated'}}</li>
{{/is}}
<li class="meta-data">~<span id="time"></span> minute read</li>
</ul>
</div>
</div>

{{#if settings.show_follow_article}}
<div class="article-subscribe">{{subscribe}}</div>
{{/if}}
</header>

<section class="article-info">
<div class="article-content">
<div class="article-body" id="article-body">{{article.body}}</div>

• Tip: You have flexibility to locate the <span id="time"></span> anywhere on your article_page template, I just wanted a minimal approach inline with article meta data. Sky is the limit on where you place this and how you design it via HTML/CSS. 

That's it. Save and test your work.