Comment Counts

Comment counts are a great way to show how many comments are there on a page without having to visit the page. Usually, displaying comment counts in index pages (ex: blog index page) increases the engagement of the users.

Note: Some of our integrations (ex: WordPress, Blogger) automatically add comment counts to index pages. However, some themes may require you to manually set up comment counts.

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 embed, the page ID will be automatically set to 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 code before the closing </body> tag of your page. Make sure all the <hyvor-talk-comment-count> elements are added before calling the hyvorTalkCommentCounts.load() function.

    <script src="https://talk.hyvor.com/embed/comment-counts.js"></script>
<script>
    hyvorTalkCommentCounts.load({
      "website-id": xxxx
    })
</script>

    Note: Replace xxxx with your website ID (number).

Attributes of <hyvor-talk-comment-count>

Attribute Description Default
page-id The page ID of the page you want to display the comment count for. This is the same page-id in the embed configuration. window.location.href
website-id (Optional) 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 (Optional) Set the mode of the comment count. Possible values number and text. See text or number text
language (Optional) Set the language of the comment count. See language Website's language

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>

// 10

Custom Text

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

Comment Counts Text

Note that if you set the language attribute, custom text will be ignored.

Language

By default, the comment count is displayed in the language of your website. You can change this to display the comment count in a specific language by setting the language attribute when mode="text" is used.

Language codes are available on 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.

hyvorTalkCommentCounts.load({
    "website-id": xxxx,
    "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. This parameter is 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"
    }
)