Top Comments ᴺᴱᵂ

The Top Comments API allows you to retrieve the top comments from a specific spot ID, Conversation, or user. Using Top Comments helps you improve the conversation experience on your site:

Increased user engagement. Highlighting top comments encourages users to participate more actively in discussions.
Implementation flexibility. Designing a custom implementation enables you to seamlessly integrate top comments into your site's aesthetics and user experience.
Engagement insights. Analyzing the top comments helps you discover what drives engagement on your sites and make data-driven decisions to optimize your content strategy.

Retrieve and display top comments

Follow these steps to retrieve and use the top comments:

Make a Top Comments API call for the top comments from within an entire spot, for an individual user, or from within a specific Conversation.

The API call returns a JSON object of responses.

curl --request GET \
     --url https://api.openweb.com/engagement-api/top-comments-spot \
     --header 'accept: application/json' \
     --header 'x-api-key: <ENGAGEMENT_TOKEN>' \
     --header 'x-count: 10' \
     --header 'x-spot-id: <SPOT_ID>'

curl --request GET \
     --url https://api.openweb.com/engagement-api/top-comments-user \
     --header 'accept: application/json' \
     --header 'x-api-key: <ENGAGEMENT_TOKEN>' \
     --header 'x-count: 10' \
     --header 'x-spot-id: <SPOT_ID>' \
     --header 'x-user-id: <USER_ID>'

curl --request GET \
     --url https://api.openweb.com/engagement-api/top-comments-conversation \
     --header 'accept: application/json' \
     --header 'x-api-key: <ENGAGEMENT_TOKEN>' \
     --header 'x-conversation-id: <CONVERSATION_ID>' \
     --header 'x-count: 10' \
     --header 'x-spot-id: <SPOT_ID>'

💡
You can find more information about each API route and its parameters from the API reference links mentioned in the step.

Customize and display the JSON object of responses in an existing <div> on a page.

💡
As an alternative, you can export the API response into an analytics tool to evaluate the charactertistics of the comments that drive engagement on your site.

⚠️
The following code snippet demonstrates one possible approach to insert top comments into an existing <div> named topcomments.
For your specific use case, be sure to test your code thoroughly in a development environment before deploying it to a production environment.

<script>
  // Sample JSON response
  const response = <API_JSON_RESPONSE>;

  function formatTimestamp(timestamp) {
    const date = new Date(timestamp * 1000);
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
  }

  function renderComment(comment) {
    let contentHtml = '';
    comment.content.forEach(item => {
      if (item.type === 'animation') {
        contentHtml += `<img src="${item.originalUrl}" alt="${item.title}" width="${item.originalWidth}" height="${item.originalHeight}"><br>`;
      } else if (item.type === 'text') {
        contentHtml += item.text;
      }
    });

    return `
      <div class="comment">
        <img src="${comment.user_profile_picture}" alt="${comment.username}" class="profile-pic">
        <h3>${comment.username}</h3>
        <p class="timestamp">${formatTimestamp(comment.message_timestamp)}</p>
        <div class="content">${contentHtml}</div>
        <p class="stats">
          <span class="likes">👍 ${comment.like_count}</span>
          <span class="dislikes">👎 ${comment.dislike_count}</span>
          <span class="replies">💬 ${comment.replies_count}</span>
        </p>
        <p class="labels">Labels: ${comment.label.ids.join(', ')}</p>
      </div>
    `;
  }

  function injectComments() {
    const topCommentsDiv = document.getElementById('topcomments');
    if (!topCommentsDiv) {
      console.error('Element with ID "topcomments" not found.');
      return;
    }

    let commentsHtml = '';
    response.comments.forEach(comment => {
      commentsHtml += renderComment(comment);
    });

    topCommentsDiv.innerHTML = commentsHtml;
  }

  window.addEventListener('load', injectComments);
</script>