Top Comments πŸ†•

Retrieve 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:

  1. 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>'
    

  1. 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>