How to add estimated reading time in Zendesk Guide

In the customer service universe, you have various types of situations and scenarios. It sometimes seems that every day is different. If you’re like me, that’s the best part about the job. New challenges are what keeps some of us going.

Scenario

Companies that have extensive use of Zendesk’s Knowledge Base feature, and create a lot of content to share with their user base need a way to tell users how long their read is going to last. One small brick in the customer experience improvement, but hey it’s something! Nothing but admiration for those of you who want to take the customer to the next level.

In today’s article, we look at a simple tip to quickly add an estimated time to read to your articles in Zendesk Guide, displayed inline with article meta-data as such:

vEqlcufQz0RE3U8Xjih_IA.png


Solution

Some quick takeaways before I share the steps:

  • I'm not a developer, I am a certified admin without 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. This is just one way of doing it.

Steps:

1. Add the below code to your script.js file. Placement of the script may vary based on your theme template, in our example we 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 go ahead and test your work!

Book a call with me from below

I mean, if you want to chat..if not, well..don’t 😅 

ZendeskDominic Brasoveanuzendesk, zendeskguide, knowledgebase, guideComment