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.
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>
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).
<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 |
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
You can change the comment count text at Console → Settings → Embed → Configuration → Comment Counts.
Note that if you set the language
attribute, custom text will be ignored.
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"
})
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"
}
)
count
is the comment count. This is a string if the mode
is text
and a number if the mode
is number
.el
is the <hyvor-talk-comment-count>
element.