CMS API and Zapier

Is there a Webflow Zap connector yet? Related to a form submission?

2 Likes

Hey Shawn - we’ve had a Zap connector for our form submissions for a while now, but no, the CMS API Zaps are not finished yet. We’re hoping to release them later this week though!

6 Likes

You can make your own in the meantime! Select the Webflow form submission as the trigger and the Zapier “Webhooks by Zapier” as the action. From there, you can choose your REST verb (GET or POST or PUT or DELETE), use the appropriate Webflow API endpoint for whatever action you’re doing, them map the form fields to the collection item fields.

So for example, if you were creating a new collection item using POST, the endpoint would be:

https://api.webflow.com/collections/:collection_id/items

From there, you can map the fields using Zapier’s auto-populating dropdowns or, if you’re feeling adventurous, use Zapier’s “Custom Request” and you can enter the JSON payload directly! Just copy/paste from the “–data-binary” segment using your own data and it should work.

Works like a charm. Happy zapping!

6 Likes

Hi @sprockethouse,

Would you be willing to record a quick video tutorial showing the steps and field mapping? That way others can also benefit from your knowledge.

2 Likes

This is what I’ve got so far. I don’t know if my fields are setup correctly. And is there another header that I am supposed to enter? Monosnap

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

This was very helpful. I now have a better understanding of how the Webflow API works and how to access info. BUT, I am still getting validation error “invalid image ID” All the other fields are checking out fine.

Here is my payload:

{
“fields”: {
“name”: “Name”,
“slug”: “Slug”,
“blog-post-image”: “url”,
“_archived”: false,
“_draft”: false,
“full-blog-post”: “”,
“blog-post-author”: “”,
“special-date”: “”,
“is-featured-warrior”: false,
“is-on-press-page”: false,
“show-on-cat-biography”: false,
“is-on-cat-stuff-page”: false,
“popularity-rating”: “”,
“cat-name-tag”: “”,
“created-on”: “”,
“updated-on”: “”,
“published-on”: “”,
“created-by”: “”,
“updated-by”: “”,
“published-by”: “”
}
}

Are you trying to upload an image? According to the developer docs, image transactions are not yet enabled in the API. Try leaving out that field out (assuming it’s not required). Hope they enable it soon! That’s sort of a key feature :wink:

Oh crap. I just saw that you can’t upload images in the API. Well, that explains why I was getting the error. I hope image transactions is enabled this week.

Any news on when the image upload API endpoint will be available? I urgently need it to finish a project :confused:

Hi @NvdB31, good question! There will be some updates coming to the API, and more documentation about how to use that.

The Webflow team will be on holiday through Jan 3, 2017 and then there will be business as usual :slight_smile:

More updates on Zapier and Webflow CMS API to follow :slight_smile:

Cheers,
Dave

4 Likes

any news? how long will you need to finish the zapier integration? will it be a week or two or more? the thing is. if the update comes in the next few weeks i can avoid a whole load of work.

if more i will have to dive deeply into this topic and try to do this by myself following the tutorial above. but i have never done something like this before. is there maybe someone who can give a step by step explanation? i appreciate any help.

thank you so much!

1 Like

Really getting anxious for some movement forward on this. Any updates expected this week or next?

2 Likes

Giuys and girls… lets all mail zapier for this question, and i am sure monday it will be a point in the “Scrum-session” :wink: I MAILED ALREADY!!!

Any news about the Zapier actions?

Any news about when the zaps will be ready?

@brjohnson Are there any new Zapier actions for the CMS API? It’s been 21 days since you said they would be done. And when do we get the images endpoint?

4 Likes

Yes please tell us for when zapier ations for CMS will be ready. Thanks in advance.

Can´t wait for the update on this topic :slight_smile: !!!

Hi all - thanks for your patience. The Zaps were de-prioritized at the beginning of the month for some more urgent back end work, but we are now refocusing our energy on launching them as soon as possible. As expected, we can’t promise a definite timeline, but wanted to let you know that we are actively working on this. The images endpoint—which is a bit more involved of a challenge—will come after.

Thanks in advance for your understanding on timing. I’ll keep this thread posted on any relevant updates, and once the Zaps are live, we’ll be working on a set of tutorials as well. Much like you, I am eager to see these launch for a few of my projects :slight_smile:.

2 Likes