Custom Blog Rating using HubDB

[AKoprivec3]

Hi,

I'm trying to create a custom rating (like, dislike) system for each blog post inside the HubSpot CMS and store the data within HubDB. I'm having issues pushing the feedback people leave into the HubDB row. I know this is bad practice to do it all client side however the client doesn't want to buy external hosting and doesn't have Operations Hub Pro.

Here is what my code looks like, the API call just isn't firing correctly. This is all done client side.

{% set rowss = hubdb_table_rows('blogs') %}
{% set rows = rowss|selectattr('blog_id','equalto', content.id) %}

{% if rows %}
  {% set row = rows[0] %} {# Assuming there's only one row per post ID #}

  {% set likesCount = row['5']|default(0) %}
  {% set dislikesCount = row['6']|default(0) %}

  <!-- Like button -->
  <button onclick="handleLikeClick('{{ content.id }}')">
    Like
  </button>

  <!-- Dislike button -->
  <button onclick="handleDislikeClick('{{ content.id }}')">
    Dislike
  </button>

  <!-- Likes count -->
  <span id="likesCount_{{ content.id }}">{{ likesCount }}</span> Likes

  <!-- Dislikes count -->
  <span id="dislikesCount_{{ content.id }}">{{ dislikesCount }}</span> Dislikes
{% require_js %}
  <script>
    const hubspot = require('@hubspot/api-client');

    const hubspotClient = new hubspot.Client({ accessToken: 'ACCESS_KEY' });

    function updateLikesCount(postId, newCount) {
      const values = {
        5: { type: 'number', value: newCount },
      };

      const tableIdOrName = 'Blogs'; // HubDB Table name
      const rowId = 122323133993; // Hardcoded Row ID for now, otherwise this will be passed by the function 

      const HubDbTableRowV3Request = {
        path: '', 
        name: '', 
        values,
      };

      hubspotClient.cms.hubdb.rowsApi
        .updateDraftTableRow(tableIdOrName, rowId, HubDbTableRowV3Request)
        .then((apiResponse) => {
          console.log(JSON.stringify(apiResponse, null, 2));

          const likesCountElement = document.getElementById(`likesCount_${postId}`);
          likesCountElement.textContent = newCount;
        })
        .catch((e) => {
          e.message === 'HTTP request failed'
            ? console.error(JSON.stringify(e.response, null, 2))
            : console.error(e);
        });
    }

    function handleLikeClick(postId) {
      const likesCountElement = document.getElementById(`likesCount_${postId}`);
      const currentCount = parseInt(likesCountElement.textContent);
      const newCount = currentCount + 1;
      updateLikesCount(postId, newCount);
    }

    function handleDislikeClick(postId) {
      const dislikesCountElement = document.getElementById(`dislikesCount_${postId}`);
      const currentCount = parseInt(dislikesCountElement.textContent);
      const newCount = currentCount + 1;
      updateLikesCount(postId, newCount);
    }
  </script>
{% end_require_js %}
{% endif %}

 And also right now i've hard coded the row ID, later I was planning on having it find the row id by comparing the content.id of the blog and the blog_id custom column in the DB 

[Jnix284]

@AKoprivec3 as an alternative to a coded solution using HubDB that creates some concerns, why not just use the drag-and-drop capability in the blog post editor to add an embed for something like Typeform that can conduct a simple yes/no survey?

You could include the DnD section in the blog post template so it's automatically added to all blog posts.

Typeform has a free plan which would let you get started pretty easily, but there are many different survey options out there. Paid plans start based on the volume of responses.

[AKoprivec3]

Hey Jennifer,

yeah this also looks like a decent solution to be fair. I'll have a look at it but the reason for this post was primarly to see if its possible to have an inhouse solution to this problem before starting to integrate other platforms into it.

[Jnix284]

Hi @AKoprivec3 no worries, just trying to think outside of the box to see if there's an easy/viable alternative 🙂

[danmoyle]

Nice cross-platform solution @Jnix284 😊  

[Anton]

Hi @AKoprivec3, 

do you plan to build some sort of "forum"/"board" with the blog? The like/dislike function is something I know from those kind of page types. 
If so - you should take a look at cohortium ( @danmoyle ). It's a pretty amazing ready-to-go addon for HubSpot. Could be a bit on the pricy side, but also safe you some time (and therefore money). 

As @Jaycee_Lewis, I also don't recommend you to provide such high-security informations to the client.

Outsourcing the code to a third-party hosting solution if you don't have serverless functions (CMS Enterprise required) is something you should really think of. I mean a really cheap solution could be your own AWS Lightsail server; or - if you got a raspberry pi flying around, install some sort of xampp/apache server on it, configure some DNS settings and you're ready to test (don't recommend a raspberry for production) 😁

Also - just an idea: How about custom objects instead of HubDB? You could store the information there and it would be serverside

best, 

Anton

[AKoprivec3]

Hey Anton,

the client is only looking for a quick solution here right now, nothing as complex as forums. Only some sort of way to track feedback about the blog post without it being to intrusive or take too long to use.

I've seen cohortium before however the client is only interested in paying for work hours and nothing else. They currently have CMS Hub Professional so the custom objects also can't be used here. I was planning on giving the private app only the scope of HubDB so even if that key got out there is no information in there that could be abused.

Is there a way you could look at the API call above and help me with that part, I was looking at the development docs for 2 hours yesterday and couldn't figure out how to update rows inside HubDB in this case.

Thanks!

[danmoyle]

Thanks for thinking of us @Anton! 

@AKoprivec3 please let me know if I can answer any questions! 

[Jaycee_Lewis]

Hi, @AKoprivec3 👋 Thanks for your question. Your honesty regarding the limitations you're dealing with is greatly appreciated. While limitations often foster creativity, they can sometimes land us in situations where there isn't an ideal solution without making some sort of compromise.

I'd like to invite some community members to the converstaion — @Anton @Stephanie-OG @alyssamwilie do you have any wisdom you can share with @AKoprivec3?

One thing that's not entirely clear from your post is whether you've tried logging out the errors you're receiving. You mentioned that it's not working as expected, but I didn't see any specific error messages or other issues noted. That could be helpful in troubleshooting.

My thoughts:

• Implementing your idea for finding the row ID dynamically seems to be a good move. Avoiding hardcoded values generally leads to more flexible and maintainable code.
• Hardcoding your access key, however, is a significant security risk. While I understand why you've taken this approach given the current setup, I must stress the potential risks associated with it

Other considerations (speaking as Jaycee the Security Minded Human):

If serverless functions or external hosting are not feasible, they might need to re-evaluate the project requirements and consider other, safer ways to implement this functionality.

It's understandable that cost is a concern, and it's critical to not compromise on security. The potential costs of a security issues (both financial and reputational) can far outweigh the initial savings of avoiding secure practices. (I'm sure you know this, and I'd be remiss if I didn't mention it)

Thanks! — Jaycee