How to Set Up Field Data JSON for Webflow CMS API in Make.com: A Step-by-Step Guide

If you’re using Make.com to automate your workflows between Airtable and Webflow, you’ll need to learn how to set up the Field Data JSON correctly. This process is crucial for ensuring your data is mapped and transferred correctly from one platform to the other.

In this article, we’ll walk through:

• Why setting up the Field Data JSON is essential.
• How to retrieve the JSON structure of your Webflow CMS collection.
• How to generate your JSON by pasting your field data.
• How to map fields in your JSON body.
• How to edit your JSON if you need to make changes later on.

Let’s dive in!

Why Setting Up the Field Data JSON is Essential

Setting up the Field Data JSON manually is crucial for a couple of key reasons:

1. Handling Unsupported Field Types
   Certain field types, like options fields, are not handled properly by the native Webflow integration inside Make.com. For example, you can’t map text directly to an options field. You need to pass through an ID—but this ID isn’t something you can easily retrieve within Make.com’s native integration. By making a custom API call to the Webflow CMS, you can pass the correct field data and work around this limitation.‍
2. Efficiency in Workflow Updates
   If you’re managing multiple workflows where you create and update Webflow CMS items, you’ll face issues when your CMS structure changes. Using the standard Make.com modules, you would have to update every single “Create” or “Update” module individually. Using Field Data JSON simplifies this: you update the JSON once, and it applies across all your workflows. This saves you time and prevents errors.‍
3. Better Control and Understanding
   Using a Field Data JSON model provides better control over the data you’re working with. It allows you to see the structure of your Webflow CMS clearly and gain a deeper understanding of how the Webflow CMS operates, especially when making custom API calls.

How to Retrieve the JSON Structure of Your Webflow CMS Collection

To set up your Field Data JSON, the first step is to retrieve the structure of your Webflow CMS collection. Here’s how to do it:

1. Create a Sample CMS Item
   Start by creating a new CMS item in your Webflow collection. Populate every single field in the collection—this ensures that when you retrieve the CMS structure, it includes all possible fields. It’s important to fill in each field, as Webflow won’t return unpopulated fields in the API response.
2. Publish the CMS Item
   Ensure that the CMS item is published. Unpublished items can’t be retrieved through the Webflow API.
3. Use the Webflow API
   Go to developers.webflow.com, navigate to the CMS Collections section, and use the CMS API to retrieve the JSON structure of the CMS item you just created. This will give you a full JSON representation (see screenshot) of the CMS collection, which is what you’ll use to build your custom JSON body in Make.com.

How to Generate Your JSON by Pasting Your Field Data

Once you have the JSON structure from Webflow, the next step is to generate the actual Field Data JSON in Make.com. Here’s the process:

1. Use the 'Create JSON' Module in Make.com
   Inside Make.com, there’s a module called "Create JSON". This module allows you to generate a JSON body.
2. Copy and Paste Your Webflow Data
   Take the JSON structure you retrieved from Webflow and paste it into the Create JSON module in Make.com. This will automatically generate a template based on the CMS fields you populated earlier.
   • This process ensures that the field names match the Webflow structure exactly, eliminating the risk of typos or misconfigured field mappings.
3. Map Your Field Data
   Once you have the JSON structure in place, start mapping your field data from Airtable (or any other tool) to the corresponding fields in Webflow. This is done by replacing the placeholders in the JSON structure with the actual data.

By pasting your field data into the correct spots in the JSON structure, you ensure that each piece of information is mapped to the right field in Webflow.

How to Map Fields in Your JSON Body

Mapping fields correctly is crucial for ensuring your data is passed accurately from one system to another. Here’s how to map fields in your JSON body within Make.com:

1. Open Your Workflow in Make.com
   Go to the step where you’ve added the custom API call using Field Data JSON.
2. Click on the Fields You Want to Map
   For each field in the JSON body, click on the placeholder for that field. A dropdown will appear showing the available data from your source (like Airtable or Google Sheets).
3. Map the Corresponding Fields
   Select the field data from your source that matches the corresponding field in Webflow. For example:
   • Map the Airtable field Title to the Webflow field name.
4. Repeat for All Fields
   Make sure to map every field that’s present in the JSON body to ensure everything syncs correctly.

This ensures that your data flows smoothly from your source to Webflow without any issues.

How to Edit Your JSON Body for Future Changes

Once your workflow is set up, you may need to update the JSON body if you change your Webflow CMS structure. Here’s how to edit your JSON body in Make.com:

1. Open Your Workflow
   Go to the workflow in Make.com where you originally created the JSON body.
2. Edit the JSON Fields
   Make changes to the JSON structure as needed—this could mean adding new fields to match your updated CMS structure or removing fields that are no longer necessary.
3. Test Your Workflow
   After making changes, it’s a good idea to run a test to ensure that everything still works correctly and that the data is mapped properly.

By editing the JSON body rather than adjusting each module individually, you save time and reduce the risk of errors when updating your workflow.

Final Thoughts

Setting up the Field Data JSON for Make.com workflows allows you to streamline the automation process between Airtable and Webflow, ensuring data is mapped correctly and workflows are easier to manage. By learning how to retrieve your CMS structure, generate JSON, and map fields, you’ll have more control over your Webflow CMS, and be better equipped to handle future updates.

For more tips on automating Webflow CMS updates, check out my article on Automating Webflow CMS Updates with Airtable and Make.com.

‍