Exposing anchor links in Help Center article and community comments Follow

team professional enterprise plans

Overview

If a Help Center has comments enabled on articles and/or a Community, it can be a great place for conversation. Sometimes an agent, or even another end-user, will bring up a great solution within the comments of an article. This is awesome, but what should we do if we want to share this comment? Keep reading below or jump to the instructions for the article page or community page.

Thankfully there is an anchor property built into the comment objects which we can use to our advantage. This appears within the default Help Center code which allows users to see comments immediately after they are posted. We are going to leverage this functionality to provide hyperlinks to these comments.

We do offer a permalink feature with each comment under the options menu, but if you would like to make the anchored comment more readily accessible, you can use this article as a guide to add a link to your timestamps.

hc_comment_anchor_link_JBtip.png

If you would like to read more about the properties and objects available on these template pages, please visit our documentation here:

Procedure

We will be able to edit the article and community templates in a similar fashion. I have chosen to add my hyperlink to the timestamp of each comment, but you can certainly use similar principles to add this to some other element.

Article template:

  1. Access your Help Center template editor by going to General > Customize design
  2. Click Edit theme on the theme where you would like to add this customization
  3. Select the Article page from the template dropdown
  4. Find the comments portion of the template (this usually contains {{#each comments}} so you can search for that within the code)
  5. Within the metadata for the comment, the template has a couple of date values, where I have decided to apply the link to the anchor by wrapping it with <a href="#{{anchor}}"> and </a> like this:
    anchor_article.png
  6. Save and Publish your changes. You should now be able to click on the timestamps for each comment and the URL in your web browser's address bar will change to a direct anchor link for that comment.

Community template:

(These steps are virtually identical to the article template.)

  1. Access your Help Center template editor by going to General > Customize design
  2. Click Edit theme on the theme where you would like to add this customization
  3. Select the Community post page from the template dropdown
  4. Find the comments portion of the template (this usually contains {{#each comments}} so you can search for that within the code)
  5. Within the metadata for the comment, the template has a couple of date values, where I have decided to apply the link to the anchor by wrapping it with <a href="#{{anchor}}"> and </a> like this:
    community_anchor.png
  6. Save and Publish your changes. You should now be able to click on the timestamps for each comment and the URL in your web browser's address bar will change to a direct anchor link for that comment.
Have more questions? Submit a request

Please sign in to leave a comment.

Powered by Zendesk