Persistent read/write access to the site’s CMS triggered by a button click.
Goal:
Used clicks the Get Item button
Site display’s a popup with the name value in it
From the terminal and using the code that follows the screenshot below, I’m able to successfully access the correct Site, Collect and Item and log the correct name in the console.
However, I am certain I’m not connecting the various pieces I need to accomplish this in the right way.
const axios = require('axios');
// Your Webflow API credentials
// API Access Token
const API_TOKEN = 'abc123...';
const SITE_ID = 'XXXX';
const COLLECTION_ID = 'YYYY';
const ITEM_ID = 'ZZZZ';
// Endpoint for fetching a specific item from a collection
const endpoint = `https://api.webflow.com/v2/sites/${SITE_ID}/collections/${COLLECTION_ID}/items/${ITEM_ID}/live`;
// Axios configuration for authorization
const config = {
headers: {
Authorization: `Bearer ${API_TOKEN}`,
},
};
// Make a GET request to fetch the collection item
axios.get(endpoint, config)
.then(response => {
// Extract name and id from the response
//const { name, _id } = response.data;
// Log the name and id in the console
//console.log("Response Data:", response.data);
console.log("Name:", response.data.fieldData.name);
//console.log("ID:", _id);
})
.catch(error => {
console.error('Error retrieving collection item:', error);
});
I’ve been in the getting started docs and Data API v2 docs for two days; but I’m new to webflow app development and using the API correctly.
Hey @Zephyr, thanks for trying out Webflow APIs! A few follow up questions to see if I can direct you to the right place:
Is your goal to build a Webflow App that can be launched within the Webflow Designer? Or in your “Goal”, are you mainly wanting to tap Webflow’s Data Client APIs to handle data from your own site/web app?
For the former, you may want to explore a Hybrid App solution, which is an app that can be launched within the Webflow Designer, and can still tap into Data Client APIs like you’re doing in your code snippet. For the latter, you would just build a Data Client App (aka, OAuth app).
The approach you’re taking with your API token will only work for your one site the token is generated for. If you want to build an experience where any user can read/write CMS data to their own site, you’ll want to build an app that grants an OAuth token (rather than a Site API token). In this OAuth flow, users will be able to authorize your app to read/write certain data on their behalf. You can find more about that here: https://developers.webflow.com/data/reference/authorization
I want tap Webflow’s Data Client APIs to handle data from your own site using the Global and page custom code areas (aside - now much more capable with the 50,000 character limit)
The approach with the API token is intentional, as I only wish this to work on site the token was generated for.
EDIT: As for the Data Client App, I set one up using the Getting Started section actually got it to work.
However, I’m hoping there’s a more direct approach to accessing the API without using the Data Client since the functionality I’m building is unique to this project.
I’m thinking of something along these lines, which I’ve not yet been able to get to work:
<script type="text/javascript">
const axios = require('axios');
// Wait for the page to load first
window.onload = function() {
const button = document.getElementById('get_item');
button.addEventListener('click', function(event) {
// Get the ID of the clicked element
const clickedElementId = event.target.id;
// Display the ID in a popup dialog
//alert("Clicked element ID: " + clickedElementId);
// Perform request to the webflow API
// API Access Token
const API_TOKEN = 'abc123...';
const SITE_ID = 'XXXX';
const COLLECTION_ID = 'YYYY';
const ITEM_ID = 'ZZZZ';
// Endpoint for fetching a specific item from a collection
const endpoint = `https://api.webflow.com/v2/sites/${SITE_ID}/collections/${COLLECTION_ID}/items/${ITEM_ID}/live`;
// Axios configuration for authorization
const config = {
headers: {
Authorization: `Bearer ${API_TOKEN}`,
},
};
// Make a GET request to fetch the collection item
axios.get(endpoint, config)
.then(response => {
// Log the name and id in the console
console.log("Name:", response.data.fieldData.name);
alert("fieldData.name" + response.data.fieldData.name)
})
.catch(error => {
console.error('Error retrieving collection item:', error);
});
});
}
</script>
But in this scenario, the API_TOKEN is exposed to the public, which is obviously not ideal…
