CMS API and Zapier

[brjohnson (Barrett Johnson)]

And we’re live! Under our Zapier listing you’ll see the new action we’ve added: Create CMS Item. Have fun, and let us know if you run into any issues!

[buntestrahlen (Jaro)]

bam! finally. will have a look at it by tomorrow.

[finidev (Daniel Canup)]

What about images…letting users upload images to this…should I use an embed image input type?

[Jesse]

Excellent news! Thank you so much for adding this feature. I am excited to use this.

[MaciejIVE (Maciej)]

Hi @brjohnson, I just tried to Zap Google Sheets with Webflow and there is a problem when our item in collection has an option field. Even if value is the same as one of option, Zapier shows an error. I added option field to my Google document and I still got an error. Any solution for that? How to “choose” option?

[nathan (Nathan Johnson)]

Hey @MaciejIVE

I just deployed some changes to how the API will handle option fields. If the value provided for an option matches one of the options on a given field, it now should accept that option. Let me know if you still see errors with that.

[MaciejIVE (Maciej)]

Awesome! I’ll check it soon!

EDIT: It works fine for select field now but there is an issue if we use reference field in our collection. It’s select field too but Zapier shows #400 error. Almost done @nathan Hope you can make it works too!

[nathan (Nathan Johnson)]

So for field references, it is a bit tricky to use with Zapier and still something I’m giving thought to on how to improve.

Each CMS item has a unique ID attached to it and the id is what references actually refer to. For example, this is what the raw data looks like (where for the blog post, author is a field reference):

Author:

{
  "_archived": false,
  "_draft": false,
  "name": "nathan",
  "slug": "nathan",
  "updated-on": "2017-01-27T01:18:51.114Z",
  "updated-by": "Person_545ace6efa8cd78722371d3e",
  "created-on": "2017-01-25T21:49:55.905Z",
  "created-by": "Person_545ace6efa8cd78722371d3e",
  "published-on": "2017-01-27T01:05:32.275Z",
  "published-by": "Person_545ace6efa8cd78722371d3e",
  "_cid": "5870005fdb1e5e401acd1132",
  "_id": "58891d83de30c9c818bf5b89", // This is the id which is referenced
}

Blog Post:

{
  "_archived": false,
  "_draft": false,
  "name": "test post",
  "slug": "test",
  "author": "58891d83de30c9c818bf5b89", // This field is the reference
  "updated-on": "2017-01-27T01:19:21.395Z",
  "updated-by": "Person_545ace6efa8cd78722371d3e",
  "created-on": "2017-01-27T01:11:01.979Z",
  "created-by": "Person_545ace6efa8cd78722371d3e",
  "published-on": null,
  "published-by": null,
  "_cid": "586db2e865135fc1782ed049",
  "_id": "588a9e25768c6de764b3e5f7",
}

[michael]

Hey guys,

I love the Zapier API integration! It (hopefully) allows me to heavily simplify our business processes

Adding new collection items works like a charm, but I (as non-developer) have some issues updating fields using Zapier.

Any help is greatly appreciated?

What do I want to archive? When a user sends a form, a collection item should be created (that already works!). The items should be shown on a seperate page and I would like to make changes directly from that page (e.g. send a „form“ that updates a switch field from no to yes or a form that adds data to a text field that had been empty before).

That’s what I want to do using Zaps:

• Update plain text and number field
• Update switch field (from no to yes)
• Update date field
• Update option field

As far as I understood, that could be done by using Zapier Webhooks, right?

My questions are:

• Can I create a „POST“ Webhook or do I need to create a „Custom Request“ Webhook?
• What exactly is the Webhook URL Zapier is asking for? https://api.webflow.com/collections/:collection_id/items?
• Where can I find my Collection ID? Is the data-wf-page ID the same as the Collection ID?
• What Payload Type should I use? Form or JSON?
• Do I have to add a header?

So far, I always get the following error: „api.webflow.com returned (404) Not Found and said nothing“

I also tried to use Postman, but I didn’t manage to get the the Authorization done (so far). Authorization type should be OAuth 2.0, right?

AuthURL: https://webflow.com/oauth/authorize
Access Token URL: https://api.webflow.com/oauth/access_token
Grant type: Authorization Code

To get my Client ID and Client Secret, I have to register an Application in the Integrations panel, right? What’s exactly the „Redirect URL“?

Thanks a lot for your help !!!

Cheers
Michael

[michael]

Just managed to get it working using curl …

 curl -X PUT 'https://api.webflow.com/collections/:collection_id/items/:item_id' \
  -H "Authorization: Bearer <token>" \
  -H 'accept-version: 1.0.0' \
  -H "Content-Type: application/json" \
  --data-binary $'{
      "fields": {
        "name": "old name",
  	"slug": "old slug",
	"switch": true,
	"comment": "new comment",
        "_archived": false,
        "_draft": false
      }
    }'

What do I have to do to create the same action as zap?

• Do I need the itemID in the URL? If yes, where do I get it from?
• Is JSON right?
• What format is required in the Data fields? Do I need to add “fields_” (with one or two “_”)?
• Which fields have to be included? Draft, Archived, Name and Slug?
• Is the header correct?

Thanks a lot for your support !

[michael]

Nobody who managed to get a PUT or custom zap to work?

Any ideas?

Thanks a lot !

[Asher (Asher Rosenfeld)]

Hi Nathan,

Did you make any progress on the issue with Zapier and references? I am having this issue too! I am also having an issue uploading fields that are switches. I would love to have the switch turn on if the field is true. The reference issue is more pressing, but both would be great to learn about!

Thanks!

[sprockethouse (Nathan D Huening)]

Hi @michael,

I’m no expert but I have a little experience with custom zaps. First, see my explanation in this thread above:

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 h…

Second, get yourself a copy of Postman – it’s a free web app that lets you test and try out API calls. Really handy! It gives good error messages that Zapier doesn’t and when you get it working there, you can just copy & paste into Zapier.

Third, I went into some more detail about custom zaps over in this thread, with screenshots, which you may find helpful also!

How to Batch Import Entries to Webflow CMS Using Zapier & Airtable (& maybe Postman)

I know the @webflow team is working hard on an import tool for the CMS, but if you’re impatient like me, there are ways to import all your content now using Zapier! It’s fairly laborious the first time you do it but if you’re familiar with Zapier (and the Webflow API), it shouldn’t take you too long. I got 153 entries imported start to finish from an old site in about 15 minutes. Here’s how: What You’ll Need Your database of entries (say, a Wordpress SQL dump) as a CSV file An Airtable account…

Now, for your questions:

1. Yes, if you’re updating / PUTing an item, you need to send along the item you want to update. To get all the items (with IDs) for a collection, see this page in the API docs. You can use cURL or Postman to send the data payload and get a response.
2. Yes, JSON is right!
3. For the format in data field, I’m pretty sure you don’t need the “fields_” prefix, but I’m happy to be corrected! I’ve only used “custom data” zap, where you can just copy/paste your own JSON, and the format goes like this:
   { "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", } }
   Basically, make sure you wrap the “fields” object in another object.
4. I’m not totally sure which ones are required – you can run tests in Postman and it will tell you if you missed a required one. I know that if you don’t specify “draft” and “archived”, it’ll just assume some defaults. So maybe just “name”? I think “slug” is also defaulted for you.
5. Header is not correct for “Authorization”. It should read:
   Bearer 12341351341535351351
   where the <token> after Bearer is the API key for that specific, individual site. You can generate the API token in the settings panel explained here, then just copy / paste.

Try that and let me know if you get it to work!

[Asher (Asher Rosenfeld)]

Hi @nathan - I wanted to follow up on the references for Zapier uploads. Have we figured out a way to upload reference fields in Zapier? Thanks!

[michael]

Hi @sprockethouse,

thanks a lot for your detailed explanation. Unfortunately, I am still struggling …

@sprockethouse

Second, get yourself a copy of Postman – it’s a free web app that lets you test and try out API calls. Really handy! It gives good error messages that Zapier doesn’t and when you get it working there, you can just copy & paste into Zapier.

How do I manage to get the O-Auth2 working? When I click on “Get new access token” …

(1) What do I have to enter as “Auth URL” and “Access Token URL”?
(2) Client ID and Secret are taken from My Applications (Webflow), right? What should the Redirect URL in the Application be?

@sprockethouse

Yes, if you’re updating / PUTing an item, you need to send along the item you want to update. To get all the items (with IDs) for a collection, see this page in the API docs. You can use cURL or Postman to send the data payload and get a response.

When I am using a “Webflow to Webhooks (Custom/PUT)” zap, I have to specify the item in the URL, right? As long as I am working manually with curl that is not a problem, but how can I do it dynamically with zapier? I didn’t find a way to send the item ID via the webflow form - is that possible? Any idea?

Thanks a lot,
Michael

[Nine (Simon)]

Could a workaround be to reference the ID instead of the name of the reference-field? If yes: how get I the ID? @nathan

EDIT: It is a workaround just tested it with a multi-reference field. Got the ID via the api.webflow.com/collections/collection-id/item

[sprockethouse (Nathan D Huening)]

How do I manage to get the O-Auth2 working? When I click on “Get new access token” …

(1) What do I have to enter as “Auth URL” and “Access Token URL”?
(2) Client ID and Secret are taken from My Applications (Webflow), right? What should the Redirect URL in the Application be?

Hi @michael,

Actually, with Zapier, you don’t need any of that – you don’t need to “register” an application with Webflow. Literally all you need is:

1. API key from your site settings
2. Put that in the header of your API call as “Bearer xxxxxxx”, where “xxxxxxx” is your API key

That’s all!

As for PUT requests, you’re right: the endpoint URL has to specify the exact item ID. So it’s not that useful… what are you ultimately trying to do? There may be a way if you can explain how you’d like it to work.

[cjroe (Cameron Roe)]

Please comment and upvote here: More Zapier triggers and actions for Webflow | Webflow Wishlist

[memetican (Michael Wells)]

Hi Michael, did you get this working? I am using Postman now, and used the API Key (rather than OAuth) to get my list of Sites, Collections, and then Items, so that I could obtain the collection item ref ID for Zapier.

It wasn’t obvious, but it was possible. If you need help I can whip up a video to show you the process. Nathan’s (@sprockethouse) suggestion of Postman got me on the right track, and I was initially confused by the OAuth setup as well.