Guide to Upload on Webflow CMS via API and Zapier

We adore utilizing Webflow at Letterdrop, but its pre-installed CMS can be cumbersome for posting blogs:

• The absence of permission support, collaboration features, and SEO tools makes it challenging for your team to work together on content creation and strategy without resorting to external applications
• It doesn’t have integration with Google Docs or other writing platforms, necessitating the use of manual copy and paste (and dealing with awkward formatting changes)
• Extensive expertise in Flexbox, CSS grids, and other front-end programming concepts is necessary, consuming time, especially when web development isn’t your primary role

Simply stated, Webflow CMS isn’t tailored for content marketing teams.

Understand our point?

While it’s superb for designers and web developers to swiftly create sites without coding, it can be frustrating for marketers aiming to post content in bulk.

Organizations are facing challenges retaining employees due to inadequate attention given to their mental well-being

Most companies eventually end up funneling data into Webflow from an application preferred by their writers, editors, and marketers (e.g., Airtable, Google Docs, Notion, or a headless CMS).

How? You have two choices: Utilize code for linking your CMS via the Webflow API or utilize no-code solutions such as Zapier.

Let’s guide you through the steps for each.

So‎lution 1: Posting through the Webflow API

The Webflow API enables manipulation of your CMS items – creation, updates, or deletions. However, coding knowledge is a prerequisite.

We presume you are acquainted with the Webflow Designer and possess technical prowess to handle APIs. If not, kindly redirect this to an engineer or proceed to the subsequent section engaging no-code platforms like Zapier with Webflow.

If you’re still following along, let’s commence.

Here are some fundamental terms you should grasp:

Key Webflow Concepts

Collections

A Collection mirrors a database in Webflow.

It serves as a content repository and facilitates data referencing from Collections across your Webflow site.

For instance, a Blog Post Collection in Webflow encapsulates blog post data, alongside a pre-set Blog template containing requisite fields for a basic blog (e.g., Title of type Plain Text, Body of type Rich Text, Read time of type Number, etc.). Themes obtained from Webflow template typically include a blog feature.

Default Blog Template in Webflow

Collection Items

Collection Items represent individual posts within the Blog Post Collection.

Each post refers to a specific blog post page bearing identical data as defined within the blog Collection schema.‎

You can produce Collection items within the Webflow CMS UI (despite evading it so diligently) or embed a Collection via API.

Blog Posts Represented by Collection Items

So, how do you establish a connection to a Webflow site from a backend server to initiate API requests?

Commencing the Connection with a WebFlow Site

Pre-requisites:

1. A Webflow site featuring a Blog Collection
   1. If a template is absent, you can discover one in the startup Webflow templates compilation
2. A server like Node.js or Django
   1. If opting for serverless deployment, opt for solutions such as AWS Lambdas or Google Cloud Functions
3. The Webflow SDK in your selected language or a corresponding library to conduct API requests (like Request or Axios for Node.js)

Initiating Webflow Site Connection via an API Token

Prior to modifying your Webflow site data, a connection is essential. This can be accomplished through a personal API key.

Procedure for obtaining your site’s API key:

➡️ Access your Webflow dashboard.

➡️ Navigate to the site for connection and click on the three dots (options menu).

➡️ Select “Settings.”

Access Settings

➡️ Head to Integrations, find API Access, and tap on “Generate API token.”

(Keep the token secure; avoid sharing or committing it to public repositories).

Generate an API token (Don’t worry. We’ve altered this token. It’s not ours)

➡️ Incorporate this API token in your header for every API request.

This is a sample header structure:

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

Copy

➡️ Utilize curl or Postman in your terminal to execute a query and validate its functionality.

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

Copy

➡️ Upon successful execution, a comprehensive list of your Webflow sites will be displayed, resembling 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","time zone": "America/Los_Angeles",
        "data source": "6ee3aee90fa1d92e4f760a0f"
    }
]

Replicate

➡️ You have the option to utilize this API token with the Webflow SDKs. When using the JavaScript SDK, ensure to provide the API token when initializing the Webflow object.

For instance:

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

const webflow = new Webflow({
  token: "Keep your API token in an environment variable and reference it here",
});

Replicate

You are now linked to your Webflow site from your server. Incredible!

Retrieving Collection Fields through API

Let us now establish a fresh Collection item in your Blog Posts Collection.

➡️ Launch the Designer perspective for your Webflow site.

➡️ Press on "CMS Collections" in the left-hand menu.

Select the Blog Posts Collection

➡️ Tap the "Settings" option in the upper right corner of this Collection.

Duplicate the Collection ID

‎➡️ You will observe that this Collection possesses a Collection ID. Duplicate it.

We will be referring to this in our API call. This way, we recognize which Collection to generate an item in (e.g., your blog post). However, before that, we should recognize the fields within this Collection and how to reference them.

➡️ Let’s execute an API call in your shell to retrieve their titles.

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

Replicate

➡️ This action should yield a response resembling this:

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

Replicate

Here, you can perceive the following:

• The title of the blog post is internally known as name
• The slug of the blog post is internally identified as slug
• The body of the blog post is internally referenced as post-body

➡️ Make note of this for your Collection as you will need to employ these field titles when forming your Collection item.

Constructing Collection Item Fields through API

Now, utilizing the Establish Collection Item API Endpoint and the Request package for executing API requests in Node.js, we will execute an API call to build a Collection item.

➡️ Incorporate your data in the request body, incorporating the data in fields. (You will need to utilize the field titles from the prior 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 Inaugural Blog Post via API',
      slug: 'my-inaugural-blog-post-via-api',
      _archived: false,
      _draft: false,
      author: '580e640c8c9a982ac9b8b778',
      'post-body': '<p>Here's the HTML for the body of your blog post</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);
});

Replicate

➡️ You should now be able to observe your recently created blog post in your Collection on Webflow! 🎉

Observe how it indicates, "Scheduled for Publishing." (This signifies your blog post is still pending publication).

‎Distributing Your Webflow Site through API

The ultimate stage is to disseminate your site so that the blog post entry you just established is live on your website.

You can achieve this with the Publish Site API Endpoint.

➡️ Initially, you need to record the domains you wish to publish to.

➡️ Subsequently, navigate to the Webflow Designer.

➡️ Hit "Publish" in the top right section to retrieve a list of domains where you can publish.

We only possess a standard Webflow domain. No custom domains are configured.

➡️ You will spot a webflow.io‎ domain, and if you have a custom domain configured, that will be visible too. You will need to integrate these in the payload 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);
});

Replicate

➡️ Allow a minute or two for publication. (The duration to publish your Webflow site varies based on its scale — the number of CMS Collection items and pages you possess).

➡️ Subsequently, you ought to be able to surf to your live blog and behold the blog post you crafted through API live on your site.

Congratulations! You have accomplished it! 🎉

Presently, you have the ability to modify and erase blog entries using the Update Collection Item Endpoint and Remove Collection Item Endpoint. This process mirrors the creation of an item.

Explore Solution 2: Engage with the Zapier Webflow Integration

If coding isn’t your forte, welcome to the section sans code! Odds are you landed here because the previous segment seemed like a jumble of words (I bet the engineers feel the same way 😅 ).

Zapier enables you to link Webflow with a myriad of the most prevalent apps for automating your tasks.

Airtable to Webflow Zap

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

➡️ Click "Create Zap" positioned in the upper left corner.

➡️ Seek out your source application. (This is where your original blog post will be crafted. It might involve Airtable, Google Docs, Notion, etc.).

Establish an Airtable Trigger in Zapier

We shall leverage Airtable for this illustration.

➡️ After selecting Airtable as your app, opt for "New Record" as the trigger event. This zap will function each time a new record is generated in the Airtable Base that you connect.

Select Airtable as the source app

➡️ Provide your Airtable API key as demanded by Zapier. This key can be located on your Airtable account page.

Airtable API Key

‎➡️ Subsequently, after procuring your key, embed it into the displayed box in Zapier.

Enter your Airtable API key into Zapier

‎Upon establishing the connection, your Airtable Base likely presents itself in this manner:

We think this is a hacked together way to organize your content marketing efforts, but this is how your Airtable entry will look

‎➡️ Now, you can arrange a trigger.

➡️ Choose the relevant Base and table within your Base before scrutinizing the trigger.

‎➡️ Include a row in your Airtable and evaluate if the information is transmitted.

Establish a Webflow Action in Zapier

Next, let Zapier know what actions to perform based on an Airtable trigger.

➡️ Select Webflow as your application in the Action segment.

➡️ Select "Create Live Item" as the event. (We’re opting for "Live" over "Regular" due to the absence of a dedicated Publish Webflow action in Zapier. Therefore, we’ll fabricate the item and publish it concurrently).

Webflow create live item action

➡️ ‎A prompt will appear, directing you to log in to Webflow and designate the site you wish to link.

Webflow OAuth

➡️ Select your Webflow Collection for blog posts and align the fields in Airtable with those in your Webflow blog post.

Mapping fields between Airtable and Webflow can get messy

➡️ to confirm the accuracy of the data.