Streaming live at 10am (PST)

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


#1

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

  1. Your database of entries (say, a Wordpress SQL dump) as a CSV file
  2. An Airtable account (Google Spreadsheet will work too, I just prefer Airtable)
  3. A Zapier account
  4. Your Webflow Site's API Key
  5. The collection ID of the Webflow CMS in question

General Outline

  • You import the CSV into a spreadsheet (Airtable preferably, though you could probably get it to work with Google Spreadsheets as well).
  • You create a separate "view" in Airtable that contains only the set of records in the main view that meet a specific criterion: in our case, that have been checked for "import".
  • Then, create a zap that is triggered by any new records that show up in a specific Airtable view (the one you just created)
  • Use Zapier's custom webhook to POST the data to your collection's API endpoint
  • Go back to Airtable and "check" all the boxes for import

Et voilà, after 15 minutes, you will have batch imported every record!

Actual Steps

OK, this is sort of ridiculous, so bear with me here:

Airtable

  1. Import the CSV to Airtable (again, Google Spreadsheet will wok, but Airtable is free and better, so why not try it?). Format the data however you want, clean up any artifacts from the original dump
  2. Create a new checkbox column in your spreadsheet called "Import!" (or whatever you want)
  3. Create a new grid view in your table called "Imported to Webflow" (or whatever you want)
  4. For the new view created in step 3, set a filter that only includes entries that are "checked" with the field from step 2 (What this does is make it so that, when you check an entry in your main view, it "shows up" in the secondary view. This is the trigger for the Zap you're about to make)

Zapier

  1. Create a new zap with Airtable's "New Record in View" as the trigger
  2. Under "Edit Options", select the (data)Base, Table, and View ("Imported to Webflow") in question
  3. For the action, select "Webhooks by Zapier". Click the link "show less common options" and select "Custom Request"
  4. On the "Edit Template" page, choose POST for the method (assuming that you're creating new entries), the endpoint URL for the collection you want to import to (looks like https://api.webflow.com/collections/{{collection-id}}/items), leave "Data Pass-through" as 'no', and for the data, you want it to look like:

{
  "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"
  }
}

I just pulled this from the developer docs as a sample; obviously you'll want it to map to whatever fields you have in your collection. Remember that a) the entire JSON data payload has to be enclosed in curly braces, and b) images are not yet supported by the API! The nice is thing is that Zapier provides all the variables for you from the previous (Airtable) step, so that you can just click and choose from a dropdown. Mine looks like this:

This is realistically the trickiest bit. It helps to work out all the kinks separately before doing this Zapier step. I use Postman for all my API calls and it's amazing. I'd recommend making sure you've got the payload all squared away first, then just copy/paste into Zapier once you know it's properly formatted and validated. See here for brief discussion of this, with screen shots:

After that, just test your zap and make sure Zapier is able to write to Webflow, turn on your zap, and you're done! The final step is to go back to Airtable and "check" the boxes in the column "Import!". You can just check one, highlight it, and then grab the little square in the bottom right and drag down to "paste" the content into every field. Mine looks like this:

That will "move" all the entries into the new "Imported to Webflow" view. In 15 minutes, Zapier will check your Airtable, see all the new entries, and run the zap. :boom: Boom! Your entry is imported.

Give it a try and let me know if you run into any problems. Again, I realize how totally ridiculous and work-aroundy this whole thing is! But I spend a lot of time with Zapier and Airtable, so the whole thing went pretty smoothly for me. Hopefully it will for you too!

UPDATE Hmm, I just ran into a problem! Zapier batched about 2 dozen entries in one import, but now it's doing one at a time? Something squirrelly going on! I'll update once I know more.

UPDATE 2 OK, figured it out. Zapier has a feature where they "pause" a zap if it's running too many tasks at once -- sort of like how a credit card company will call you if they see you made an out-of-the-ordinary purchase. I got an email, went to the dashboard, and "approved" the 100+ tasks that the zap was running, and it went fine. Good to know for the future!


Migration from Joomla!
Wordpress to Webflow
Exporting CMS based content
How to most efficiently get 122 Wordpress articles into Webflow?
#2

YES! thank you for posting this.


#3

Any good workarounds out there for bulk importing post that include images? (fingers crossed)


#4

Unfortunately, the only work arounds for images at the moment involve 3rd party hosting services. Until webflow supports images in the API, at least... which may never arrive!


#5

@sprockethouse you mentioned that you use Postman to test your calls. Any chance you can give a quick explanation on how you do this? I have it installed but not sure how to setup the authentication or the api key? Thanks!


#6

Sure thing, it's really easy. See attached screen shot. Basically, you just need to add a few data:

  1. The REST verb: GET, POST, etc.
  2. 3 headers as key / value pairs: accept-version, content-type, and authorization
  3. The authorization in the previous step takes the form of Bearer xxxxxx..., where the token after the word "Bearer" is the API key you get from your site's settings menu (it's under "Integrations > API Access")
  4. The endpoint URL.
  5. The body of the request ("raw" is fine; this is the tab next to "headers")

In the example screen shot, for the endpoint URL #4 above, I always start with "api.webflow.com/sites", which returns the site_id. Once I have the site_id, then I can do a GET call for collections like this:

https://api.webflow.com/sites/{{site-id}}/collections

That gives me the ID of the collection of interest. At that point, I could create a new collection item via POST using:

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

Assuming I formatted the JSON in the body correctly, I'll see the result on the right hand side (or below) in the "Response" pane. Otherwise, I'll get an error. You only ever need to have those same 3 header key/value pairs for every single call, so you can create one call and keep duplicating and saving them. What's nice about Postman is that you can create a folder for each site, and have a series of calls saved for each task: get site info, get collection info, list collections, create new collection item, etc.

Once you've got the endpoint, the REST verb, and the header authorization set, all you'll change is the actual body of the data payload as needed. If you're like me, you've got a dozen or so CMS sites, each with its own API authorization code...

Hope that helps! Let me know if you have any questions.


#7

Could you post a POST screenshot example? :slight_smile:


#8

Not sure what you mean? Everything is the same, you just include the data you’re sending in the fields JSON object.