Comment Counter

Help users identify Conversations with high engagement.

To show your users the engagement level of a specific Conversation, you can display the number of user comments that have been posted to the conversation. By referencing the POST_ID, you can add the user comment count for a Conversation on a page.



Real-time same-page comment counter

Use the following steps to embed a real-time comment counter to the same page as the Conversation:


  1. In the <body> of your page, paste the following code in the location where the user comment count should appear.
<div class="spot-im-replies-count" data-post-id="POST_ID" real-time="true"></div>

  1. Replace POST_ID with the POST_ID for the specific conversation.


Comment count API

Use the following steps to get the number of comments made in a specific Conversation via an API call:

  1. Make a GET /v1/messages-count call.
  2. Replace SPOT_ID with your Spot ID.
  3. Replace POST_ID either with the Post ID for a single Conversation or with comma-delimited Post IDs for multiple (maximum 30) Conversations.
GET https://open-api.spot.im/v1/messages-count?spot_id=SPOT_ID&posts_ids=POST_ID
GET https://open-api.spot.im/v1/messages-count?spot_id=SPOT_ID&posts_ids=POST_ID1,POST_ID2

The API returns a comment count for each requested POST_ID.

{
    "spot_id": "SPOT_ID",
    "messages_count": {
        "POST_ID1": 3,
        "POST_ID2": 18
    }
}


JavaScript function comment counter

Use the following steps to get the number of comments made in a specific Conversations via a JavaScript function:

  1. Call window.SPOTIM.getMessagesCount(). This asynchronous function requires you to pass an object as an argument.
  2. Replace SPOT_ID with your Spot ID.
  3. Replace POST_ID with the relevant Post ID.
window.SPOTIM.getMessagesCount({ 
  spotId: 'SPOT_ID', 
  postId: 'POST_ID'
}).then(data => console.log(data));


React comment counter

Use this implementation method to add a comment counter to a React single-page application. The OpenWeb React SDK npm repository explains how to use the npm package: