Comment counts

Comment counts are a great way to give your users a sense of engagement and activity on your pages. They are usually displayed on an index page, such as a blog post list, or at the top of the post itself with a link to the comments section.

Note: Some of our integrations (ex: WordPress, Blogger) automatically add comment counts to index pages. However, in some cases, you may need to add them manually.

How to add comment counts

  1. Add <hyvor-talk-comment-count> elements to the places you need comment counts. Make sure to set page-id to the page-id of the page you want to display the comment count for. Note that if you have kept page-id empty in the comments embed, the page ID will be the canonical URL of that page. 
    <hyvor-talk-comment-count page-id="page-1"></hyvor-talk-comment-count>
<hyvor-talk-comment-count page-id="page-2"></hyvor-talk-comment-count>
  2. Add the following script to the end of your page: 
    <script src="https://talk.hyvor.com/embed/comment-counts.js" type="module"></script>
<script>
    hyvorTalkCommentCounts.load({
        "website-id": 0000
    })
</script>

    Make sure to replace 0000 with your website ID. Note that all <hyvor-talk-comment-count> elements must be added before this script.

Attributes

<hyvor-talk-comment-count> component has the following attributes:

Attribute
Description
Default
page-id
The page-id of the page you want to display the comment count for. Learn more.
window.location.href
website-id
Set a custom website ID for this comment count. This is useful if you have multiple websites and want to display comment counts for each website.
website-id in the load function
mode
Set the mode of the comment count. Possible values are number and text. See text or number.
website-id in the load function
language
Set a language for the text mode.
website-id in the load function

Text or number

By default, the comment count is displayed as text (Ex: "10 comments"). You can change this to display the comment count as a number by setting the mode attribute to number.

<hyvor-talk-comment-count page-id="page-1" mode="number"></hyvor-talk-comment-count>

<!-- This will display the comment count as a number -->
<!-- Ex: 10 -->

Custom text

You can change the comment count text at Console → Settings → Comments → Comment Counts.

Custom text for comment counts

Language

In mode="text", the texts are shown in the website's language by default. However, you can set a custom language for the comment count text by setting the language attribute. You can find the list of supported languages in the language page.

<hyvor-talk-comment-count page-id="page-1" language="fr"></hyvor-talk-comment-count>

<!-- 10 commentaires -->

You can also set mode and language in the load function to add it to all the comment counts in the page.

hyvorTalkCommentCounts.load({
	'website-id': 0000,
	mode: 'number',
	language: 'fr'
});

Custom formatting

Sometimes, you may want to dynamically calculate the displayed comment count text. To do that you can use the second parameter of the load function. It takes a function that takes the comment count as a parameter and returns the text to be displayed.

hyvorTalkCommentCounts.load(
	{
		'website-id': 'xxxx',
		mode: 'text',
		language: 'en'
	},
	function (count, el) {
		return count + ' comments in total';
	}
);

In the function,

  • count is the comment count. This is a string if the mode is text - a number if the mode is number.
  • el is the <hyvor-talk-comment-count> element.
Hyvor Talk Logo