CMS API and Zapier

Hey @pixelcactus,

A video tutorial is a fine idea! I’m also using this same approach to do a batch CSV import into Webflow, so I can include that as well. It’ll take a little time, so for now let me try to help via text.

In looking at your screen shot, you may have to hand-write the JSON payload – that’s how I did it, and it works, so I’m actually not sure about the other technique. And by “hand-write”, I mean choose “Custom Request” from the bottom of the Zapier menu. You do also need a few headers. But before you do that, try downloading this free app:

https://www.getpostman.com

There’s a Mac desktop version or a Chrome extension you can use if you’re on Windows. This app is a handy little utility for practicing / playing around with API calls to make sure you’re getting & sending good data. See screen shot for a test. You can create and save as many requests as you want, so you don’t have to keep typing in the same data over and over again! (You can group the “collections” by Webflow “site”, since each has a unique API key you need in the URL.) Note in my screen shot how in the headers I’m sending “Authorization” (which includes site-specific API key), content-type and accept-version. These are all required per the Webflow developer docs.

In this example, it’s a simple GET request with the data that are returned. You’ll note it looks just like the Webflow developer docs! You choose which REST verb from the dropdown, put in your URL, and click “Send” – you’ll get a response from the server at the bottom of the window, which includes error messages! This is really handy for making sure you’ve properly formatted the API request. Next to the blue “Send” button is “Save”; that’s how you can save a bunch of different requests – including whether it’s GET or POST, the URL, whatever headers, parameters, and data in the body you’re sending – so you don’t have to keep typing the same thing.

From there, try doing a POST request with the appropriate URL endpoint and just copy/paste the example “fields” JSON object from the Webflow docs (make sure you group the whole “fields” object itself in curly braces!):

  {
  "fields": {
        "name": "Exciting blog post title",
        "slug": "exciting-post",
        "_archived": false,
        "_draft": false,
        "color": "#a98080",
        "author": "580e640c8c9a982ac9b8b778",
        "post-body": "<p>Blog post contents...</p>",
        "post-summary": "Summary of exciting blog post",
        "main-image": "580e63fe8c9a982ac9b8b749"
  } 
}

Obviously this will return an error (see the screen shot), since it doesn’t map to the right fields. But use Postman to play around with the JSON data and refresh your Webflow collections until you can see that the request is right. Then, in Zapier, you can just copy/paste the exact same JSON above and it will work! Makes troubleshooting Zapier a whole lot easier.

Hope that makes sense… let me know if you still have trouble!



4 Likes