I asked ChatGPT to create a Webflow CMS powered like button, and this was the result:

Design help Custom code
1

I wanted to have a like button which will update the Likes field in the CMS. I’m not a code guy, so I’m not sure about this. Will this work?

[Yes, here is an example of how you could create a “like” button that increases the number of likes in a collection item using JavaScript and stores it using the Webflow CMS API:

// Attach click event to the like button
document.querySelector('.like-button').addEventListener('click', function() {
  // Get the current number of likes
  var currentLikes = parseInt(document.querySelector('.like-count').innerHTML);
  // Increase the number of likes by 1
  var newLikes = currentLikes + 1;
  // Update the "Likes" field in the collection using the Webflow API
  updateLikes(<ITEM_ID>, newLikes);
  // Update the like count on the page
  document.querySelector('.like-count').innerHTML = newLikes;
});

// Update the "Likes" field in the collection item
function updateLikes(itemId, likes) {
  var xhr = new XMLHttpRequest();
  xhr.open("PATCH", `https://api.webflow.com/collections/<COLLECTION_ID>/items/${itemId}`, true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.setRequestHeader("Authorization", "Bearer <API_KEY>");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(`Likes for item ${itemId} updated to ${likes}`);
    } else {
      console.error(xhr.responseText);
    }
  };
  var data = JSON.stringify({fields: {likes: likes}});
  xhr.send(data);
}

You should replace <COLLECTION_ID> and <ITEM_ID> with the appropriate values for your collection and item, and <API_KEY> with the key you generated in Webflow settings.

Also, you’ll need to make sure that you have the right credentials to access the Webflow CMS API, and you should implement proper user authentication and authorization to prevent unauthorized access to the data.]

What do you guys think?

2

Would be nice, eh? But, no.

ChatGPT turns out some interesting code but it often missed crucial contextual details, and sometimes it totally makes stuff up. Like… API methods that just don’t exist.

Here the main problem is that you cannot call Webflow’s API from client-side code.

You need an external server that connects your client-side to Webflow’s API. Which means a hosted solution.

Jetboost has the best known solution for this;

2 Likes
3

@memetican Yeah, I was wondering how could be this simple. I checked out Jetboost, it has many things I need! Thank you for your prompt reply. I really appreciate the time you took to assist me.

4

Hi @vijayrdx7 :wave: welcome to the forum

It’s interesting that this is the result.

The biggest issue here is that Webflow doesn’t allow you to use their API from client side Javascript.

You’d have to publicly expose your secret API token, so they don’t allow it. If you try you’ll get a CORS error and it just never works.

Were you looking specifically for a solution to create a like button or was that just the fun test you did with ChatGPT?