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

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 {
  var data = JSON.stringify({fields: {likes: likes}});

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?

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;


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

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?

Wow, thanks for confirming! I didn’t find this until hours of trial and errors.

Crazy as I can access Webflow api via Node (API key in the URL!), I can even access cms data straight from Chrome with the right URL (again key included!).

It does make sense they don’t want people exposing API keys, but Google does with maps, which I find surprising. Walls in CMS data though, and makes it less useful.

I’d love to see an example of this if you don’t mind posting.

Google provides the ability to restrict the use of the API key based on the referrer which limits its use to a domain or subdomain if you want. Webflow does not.

Sorry for the late resonse @ChrisDrit - I didn’t have notifications turned on.
So yes I can give you a live example (sensitive info obfuscated of course)…
I realize you would NOT want to put your token on even an excrypted connection but…

URL Such as (“<…>” replaces possible sensitive data):


Pasted into Chrome as a URL, produces JSON output like so:

{“items”:[{“end-date”:“2023-07-01T05:00:00.000Z”,“_archived”:false,“_draft”:false,“statrt-date”:“2023-04-05T05:05:00.000Z”,“raisedonors-embed-url”:“https:///iteams/haiticrisis”,“active”:false,“overlay-text”:“Help Save Lives in Haiti”,“name”:“Haiti Crisis Campaign”,“marquee-text”:“Water Crisis in Haiti - Please Donate to Save Lives!”,“slug”:“haiti-crisis-campaign”,“hero-image”:{“fileId”:“<file_id>”,“url”:“https://uploads-ssl.webflow.com/<_id>/<id>Haiti%20Crisis%20Campaign%20Homepage%20Banner.jpg",“alt”:null},“updated-on”:“2023-04-05T05:15:47.521Z”,“updated-by”:"Person",“created-on”:“2023-04-03T19:07:08.925Z”,“created-by”:"Collaborator<id>",“published-on”:“2023-04-05T05:15:59.647Z”,“published-by”:"Person<_id>”,“test-view”:false,“_cid”:“<_id>”,“_id”:“<_id>”}],“count”:1,“limit”:1,“offset”:0,“total”:8}