Using JSON Data to Populate Webflow CMS Fields

Begin by creating a JSON file that contains the data you want to import into your Webflow CMS. You can use a text editor or an online tool to format your data. Here's an example of how the structure might look:

{
"items": [
{
"name": "Post Title 1",
"slug": "post-title-1",
"content": "This is the content of the first post."
},
{
"name": "Post Title 2",
"slug": "post-title-2",
"content": "This is the content of the second post."
}
]
}

Ensure that the fields in your JSON match the Webflow CMS collection fields you've set up.

Next, you’ll need to set up your Webflow CMS collection to house this data. Open your Webflow project and click on the CMS Collections icon in the left sidebar. Create a new collection and name it according to the content you are importing, such as "Blog Posts." Add fields like "Name," "Slug," and "Content," ensuring they match those in your JSON file.

To import your JSON data, use Webflow’s API. Begin by generating your Webflow API key. Visit your Webflow account settings, navigate to the Integrations tab, and generate a new API key under the API access section. Make sure to keep this key safe.

Write a script to automate the data import process using a server-side language like Node.js. First, set up your Node.js environment by creating a new directory and initializing a project.

Run the following commands in your terminal:

mkdir webflow-json-import
cd webflow-json-import
npm init -y
npm install axios

Create a new file called import.js and add the following Node.js code using Axios to handle HTTP requests:

const axios = require('axios');
const fs = require('fs');

const API_KEY = 'YOUR_API_KEY';
const COLLECTION_ID = 'YOUR_COLLECTION_ID';

const jsonData = JSON.parse(fs.readFileSync('data.json', 'utf8'));

async function createItem(item) {
try {
const response = await axios.post(`https://api.webflow.com/collections/${COLLECTION_ID}/items`, {
fields: {
name: item.name,
slug: item.slug,
content: item.content,
_archived: false,
_draft: false
}
}, {
headers: {
Authorization: `Bearer ${API_KEY}`,
'Content-Type': 'application/json',
'accept-version': '1.0.0'
}
});
console.log(`Created item: ${item.name}`);
} catch (error) {
console.error(`Error creating item: ${error}`);
}
}

jsonData.items.forEach(item => {
createItem(item);
});

Replace 'YOUR_API_KEY' with your Webflow API key and 'YOUR_COLLECTION_ID' with the collection ID. You can find the collection ID in your Webflow project through network requests or the Webflow API documentation.

Save your JSON data in a file named data.json in the same directory as your script.

Finally, to run your script, open the terminal and navigate to your project directory. Execute the command:

node import.js

This will add your JSON data to the specified Webflow CMS collection, populating the fields automatically.