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.]
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.
@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.
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.
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):
welcome to the forum