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"></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 your 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.