How to Publish to Webflow CMS via API and Zapier

Webflow is a great website builder (we use them at Letterdrop and love it), but its built-in CMS is a pain for blog publishing:

• It lacks permission support, collaboration features, and SEO tools — your team can't create content together or strategize without using outside tools
• It doesn't sync with Google Docs or other writing platforms — you have to copy and paste (and deal with clunky formatting changes)
• It requires extensive knowledge of Flexbox, CSS grids, and other front-end programming ideas — this takes time, and web development is not your job

Simply put, Webflow CMS is not built for content marketing teams.

It's a great product for designers and web developers to build sites quickly without code. But if you're a marketer trying to publish a lot of content, it can be frustrating.

Companies are frustrated with losing employees but its because they arent taking care of their employee's mental health

Most companies end up piping data into Webflow from a tool your writers, editors, and marketers actually want to use (e.g., Airtable, Google Docs, Notion, or a headless CMS).

How? You have two options: Use code to connect your CMS via the Webflow API or use no-code tools like Zapier.

Let's walk you through how to do each.

So‎lution 1: Publish via the Webflow API

The Webflow API allows you to create, update, or delete any of your CMS items. But you need to know how to code.

We assume you already understand the Webflow Designer and are technical enough to know how to use APIs. If that's not you, forward this to an engineer, or skip to the next section on using no-code tools like Zapier with Webflow.

If you're still here, let's get started.

First things first, here are a few terms you need to know:

Webflow Concepts to Know

Collections

A Collection is like a database in Webflow.

You can store content and reference data from Collections throughout your Webflow site.

For example, a Blog Post Collection in Webflow contains all the data for blog posts. It also comes with a default Blog template that has all the fields you need for a basic blog (e.g., Title of type Plain Text, Body of type Rich Text, Read time of type Number, etc.). The Webflow template you buy will often have a blog included.

Collection Items

Collection items are the individual posts in the Blog Post Collection.

Each one represents a blog post page. They all have the same data defined in the blog Collection schema.‎

You can create Collection items directly in the Webflow CMS UI (that you're trying so hard to avoid) or insert a Collection via API.

So, how do you connect to a Webflow site from a backend server to make API requests?

How to Get Started Connecting to a WebFlow Site

You need:

1. A Webflow site with a Blog Collection
   1. If you don't have a template, you can find one in this list of startup Webflow templates
2. A server like Node.js or Django
   1. If you want to go serverless, pick a solution like AWS Lambdas or Google Cloud Functions
3. The Webflow SDK in your language of choice or a library to make API requests (like Request or Axios for Node.js)

Connecting to a Webflow Site Using an API Token

Before you can modify your Webflow site data, you need to connect to it. You can do this via a personal API key.

To get your site's API key:

➡️ Open up your Webflow dashboard.

➡️ Click on the three dots (options menu) on the site you want to connect.

➡️ Click "Settings."

➡️ Open the Integrations tab, scroll down to API Access, and click on "Generate API token."

(Keep your token safe; don't share it with anyone or commit it to GitHub).

➡️ Include this API token in your header whenever you make an API request.

This is what a sample header looks like:

headers: {
 'Accept-Version': '1.0.0',
 Authorization: 'Bearer YOUR_API_TOKEN_HERE',
 'content-type': 'application/json'
}

➡️ You can go to your shell and run a query with curl or Postman to test whether it works.

curl --location --request GET 'https://api.webflow.com/sites' \
--header 'Authorization: Bearer YOUR_API_TOKEN_HERE'

➡️ If this runs successfully, you should get a list of all sites in your Webflow like this:

[
    {
        "_id": "6ee3aee90fa1d92e4f760a0f",
        "createdOn": "2022-09-03T19:45:49.426Z",
        "name": "Letterdrop v2",
        "shortName": "letterdrop-v2",
        "lastPublished": "2022-10-01T00:24:42.955Z",
        "previewUrl": "https://screenshots.webflow.com/sites/6ee3aee90fa1d92e4f760a0f/20221001001825_e2d60b485c0f28cd97cd0b6b0f6bf9af.png",
        "timezone": "America/Los_Angeles",
        "database": "6ee3aee90fa1d92e4f760a0f"
    }
]

➡️ You can also use this API token with the Webflow SDKs. Pass the API token when you instantiate the Webflow object if using the JavaScript SDK.

For example:

const Webflow =require("webflow-api");

const webflow = new Webflow({
  token: "Store your API token in an env variable and use it here",
});

Now you're connected to your Webflow site from your server. Amazing!

Getting Collection Fields via API

Now let's create a new Collection item in your Blog Posts Collection.

➡️ Open up the Designer view for your Webflow site.

➡️ Click "CMS Collections" in the left menu.

➡️ Click the "Settings" button in the top right for this Collection.

‎➡️ You'll see that this Collection has a Collection ID. Copy it.

We'll be referencing this in our API call. That way, we know which Collection to create an item in (e.g., your blog post). But first, we need to know what fields are in this Collection and how to reference them.

➡️ Let's make an API call in your shell to get their names.

curl --location --request GET 'https://api.webflow.com/collections/YOUR_BLOG_POSTS_COLLECTION_ID' \
--header 'Authorization: Bearer YOUR_API_TOKEN_HERE' \
--data-raw ''

➡️ This should return a result that looks like this:

{
    "_id": "580e640c8c9a982ac9b8b778",
    "lastUpdated": "2022-10-23T21:32:39.561Z",
    "createdOn": "2021-11-23T00:43:35.049Z",
    "name": "Blog Posts",
    "slug": "blog",
    "singularName": "Blog Post",
    "fields": [
        {
            "name": "Title",
            "slug": "name",
            "type": "PlainText",
            "required": true,
            "editable": true,
            "helpText": "",
            "id": "9260ce6725dc623d8f5e6768728d6660",
            "validations": {}
        },
        {
            "name": "URL",
            "slug": "slug",
            "type": "PlainText",
            "required": true,
            "editable": true,
            "helpText": "",
            "id": "6a474648c22ad777613f6429dd510415",
            "validations": {}
        },
        {
            "name": "Body",
            "slug": "post-body",
            "type": "RichText",
            "required": false,
            "editable": true,
            "helpText": "",
            "id": "24207669717864dc68511c63fb32c281",
            "validations": {}
        },
...
}

Here, you can see the following:

• The blog post title is internally called name
• The blog post slug is internally called slug
• The blog post body is internally called post-body

➡️ Write this down for your Collection since you'll have to use these field names when creating your Collection item.

Creating Collection Item Fields via API

Now, using the Create Collection Item API Endpoint and the Request package to make API requests in Node.js, we'll make an API call to create a Collection item.

➡️ In the request body, include your data in fields. (You'll have to use the field names from the previous section).

const request = require('request');

const options = {
  method: 'POST',
  url: 'https://api.webflow.com/collections/YOUR_BLOG_POSTS_COLLECTION_ID/items',
  headers: {
    'Accept-Version': '1.0.0',
    Authorization: 'Bearer YOUR_API_TOKEN_HERE',
    'content-type': 'application/json'
  },
  body: {
    fields: {
      name: 'My First Blog Post via API',
      slug: 'my-first-blog-post-via-api',
      _archived: false,
      _draft: false,
      author: '580e640c8c9a982ac9b8b778',
      'post-body': '<p>This is the HTML for your blog post's body</p>',
      'post-summary': 'Summary of my blog post'
    }
  },
  json: true
};

request(options, function (error, response, body) {
  if (error) throw new Error(error);
  console.log(body);
});

➡️ Now, if you go to Webflow, you should see your newly created blog post in your Collection! 🎉

Notice how it says, "Staged for Publish." (This means your blog post is not live yet).

‎Publishing Your Webflow Site via API

The last step is to publish your site so that the blog post entry you just created is live on your website.

You can do that with the Publish Site API Endpoint.

➡️ First, you need to note the domains you want to publish to.

➡️ Then, go to the Webflow Designer.

➡️ Click "Publish" in the top right corner to get a list of domains that you can publish to.

➡️ You'll see a webflow.io‎ domain, and if you have a custom domain setup, you'll see that, too. You'll include these in the body of your API call:

const request = require('request');

const options = {
  method: 'POST',
  url: 'https://api.webflow.com/sites/YOUR_BLOG_POSTS_COLLECTION_ID/publish',
  headers: {
    'Accept-Version': '1.0.0',
    Authorization: 'Bearer YOUR_API_TOKEN_HERE',
    'content-type': 'application/json'
  },
  body: {domains: [YOUR_DOMAIN_1, YOUR_DOMAIN_2]},
  json: true
};

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});

➡️ Give it a minute or two to publish. (The time it takes to publish your Webflow site depends on its size — how many CMS Collection items and pages you have).

➡️ Now, you should be able to go to your live blog and see the blog post you created via API live on your site.

Congrats! You did it! 🎉

Now, you can update and delete blog posts using the Update Collection Item Endpoint and Remove Collection Item Endpoint. This is similar to the process of creating an item.

Solution 2: Use the Zapier Webflow Integration

If you don't know how to code, welcome to the no-code section! You likely scrolled down here because that last section sounded like gobbledygook (I bet the engineers think so too 😅 ).

Zapier lets you connect Webflow with thousands of the most popular apps so you can automate your work.

➡️ Log in to your Zapier account and create a new workflow.

➡️ Click "Create Zap" in the top left.

➡️ Search for your source app. (This is where your original blog post will be written. It could be Airtable, Google Docs, Notion, etc.).

Create an Airtable Trigger in Zapier

We're going to use Airtable in this example.

➡️ Once you've selected Airtable as your app, select "New Record" as the trigger event. This zap will run every time a new record is created in the Airtable Base you connect.

➡️ Zapier will ask for your Airtable API key. You can find this on your Airtable account page.

‎➡️ Once you have your key, paste it into the pop-up in Zapier.

‎Once connected, your Airtable Base probably looks like this:

‎➡️ Now, you can set up a trigger.

➡️ Select the relevant Base and table in your Base before testing the trigger.

‎➡️ Add a row in your Airtable and see if the data comes through.

Create a Webflow Action in Zapier

Next, we'll let Zapier know what to do in the event of an Airtable trigger.

➡️ Select Webflow as your app in the Action section.

➡️ Select "Create Live Item" as the event. (We're selecting "Live" and not "Regular" since there is no separate Publish Webflow action in Zapier. So we'll create the item and publish it in one shot).

➡️ ‎You'll be presented with a pop-up that asks you to log in to Webflow and select the site you want to connect.

➡️ Select your Webflow Collection blog posts and map the fields in Airtable to the ones in your Webflow blog post.

➡️ Test the action to make sure you get the right data.

That's it! You're done. 🎉

Once you publish the zap, whenever you add a record to Airtable, it adds a CMS Collection item to Webflow and publishes it live.

This works in theory but is riddled with issues in practice.

Fun, right?

Right?

Known Limitations in the Webflow-Zapier integration

• Zapier can’t delete an item from the CMS with their Webflow zap; it can only create and update Collection items
• You can't stage items before publishing since you don't have granular control over publishing the site
• Airtable UI is terrible for creating long-form content

If you're looking for something basic to publish to Webflow via Zapier, consider using a different CMS.

Letterdrop Publishes to Webflow 

What's next?

Choose a CMS that publishes to Webflow — one that's writer-focused and truly no-code.

Letterdrop is a headless CMS built for content marketing. It publishes to your Webflow CMS Collections really well.

Letterdrop Gives You a Familiar CMS Experience, But It's Much More Powerful

Letterdrop is the complete tool for publishing to WebFlow. It's a content ops platform that helps you with project management, content calendar planning, and distribution.

Letterdrop offers the following features:

• The only true Webflow CMS integration on the market — DING! DING! DING! Letterdrop updates your Webflow Collection and publishes it to your Webflow site in less than a minute. It handles every edge case, like custom fields and previews. In fact, we're an official Webflow Partner.
• Built-in SEO optimization tooling — automatic suggestions to structurally optimize your articles for Google and get info from competing pages
• AI writing assistance and Grammarly Business — helps you brainstorm ideas, write content, and check for grammatical errors
• Previews — selectively publish your articles to the Webflow staging site so that you can visualize what they'll look like before hitting the big red GO button
• Code with syntax highlighting — supports Markdown, lets you select the language for syntax highlighting, and parses it into a format you can use with Webflow and Prism.js.
• Dynamic content calendar — automatically updates project statuses and notifies contributors when they need to take actions
• One-click email newsletter and social media publishing — automatically distribute your blog posts on your socials and via email. No more chasing down marketing ops.
• Live collaboration and revision history — team members can communicate and work together on projects that are synced within your CMS

Start Publishing with Letterdrop and Make Webflow Easy  

We get it — you need all the help you can get. But diving deep into a CMS that's clearly not made for your needs is frustrating.

Webflow is great for building a website. But for publishing blogs, Webflow's CMS requires engineering resources to use the API so you can build your own CMS tool on top of Webflow. That's a lot.

Sure, resourceful marketers can piece together solutions using Zapier. But while it brings together a pile of no-code tools, it's still a "duct tape" solution for what you want to achieve. There's a limit to the number of webhook requests, and f you reach this limit, the Zap will no longer be triggered. Even Zapier knows this.

Yikes!

With its SEO tools, plagiarism checker, content calendar, roles and permissions, and one-click publishing, Letterdrop makes Webflow easy. It does everything Zapier can do... and more — without that "Frankenbox duct tape, the engines are on fire, the wings are falling off, we're crashing into the mountain" feeling.

Want to level up your publishing game?

Visit our FAQ page here.

Book a demo here.