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.
Solution 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:
- A Webflow site featuring a Blog Collection
- If a template is absent, you can discover one in the startup Webflow templates compilation
- A server like Node.js or Django
- If opting for serverless deployment, opt for solutions such as AWS Lambdas or Google Cloud Functions
- 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.
That concludes it! You’re all set. 🎉
Upon activating the zap, whenever you append a record in Airtable, it adds a CMS Collection item to Webflow and publishes it live.
While this process seems effective in theory, it poses numerous challenges in reality.
Enjoyable, isn’t it?
Isn’t it?
Recognized Constraints in the Webflow-Zapier Integration
- Zapier is incapable of eliminating an item from the CMS utilizing their Webflow zap; it solely has the capability to establish and update Collection items
- You lack the ability to stage items before publishing since you don’t possess precise control over site deployment
- Airtable’s user interface is dreadful for crafting extensive content
If you’re seeking a straightforward method to disseminate content to Webflow via Zapier, contemplate leveraging a distinct CMS.
Letterdrop Employs Webflow for Publishing
What lies ahead?
Select a CMS capable of publishing to Webflow — one focused on writers and truly devoid of code.
Letterdrop presents a headless CMS tailored for content marketing. It seamlessly publishes to your Webflow CMS Collections.
Easy publishing with Letterdrop
Letterdrop Grants You a Familiar CMS Experience, Yet It’s Significantly More Potent
Letterdrop serves as the comprehensive tool for publishing to WebFlow. It’s a content operations platform facilitating project management, content calendar scheduling, and distribution.
Letterdrop offers the subsequent features:
- The sole genuine Webflow CMS integration currently available — DING! DING! DING! Letterdrop updates your Webflow Collection and swiftly publishes it to your Webflow site in under a minute. It manages every specific scenario, such as custom fields and previews. In fact, we are recognized as an official Webflow Partner.
- Built-in SEO optimization tools — furnishing automated recommendations to structurally enhance your articles for Google and acquire insights from competing pages
- AI-powered writing aid and Grammarly Business — aiding brainstorming, content composition, and grammatical verification
- Previews — selectively publish your articles on the Webflow staging site to preview their appearance before hitting the publish button
- Code with syntax highlighting — supporting Markdown, enabling you to designate the language for syntax highlighting, and transpiring it into a format compatible with Webflow and Prism.js.
- Dynamic content calendar — automatically updates project statuses and notifies contributors about necessary actions
- One-click email newsletter and social media distribution — automatically disseminate your blog posts across social media and via email. No more chasing marketing operations.
- Live collaboration and revision history — team members can interact and collaborate on projects, all synchronized within your CMS
SEO Optimizer in Letterdrop
Commence Publishing with Letterdrop to Simplify Webflow
We comprehend—you require all the support you can get. However, delves into a CMS clearly unsuitable for your needs breeds frustration.
Webflow excels at website construction. Nonetheless, for blog publication, Webflow’s CMS necessitates engineering efforts to deploy the API for developing your personalized CMS tool using Webflow. That’s quite arduous.
Certainly, resourceful marketers can piece together solutions via Zapier. Albeit it consolidates an array of no-code utilities, it still manifests as a "duct tape" fix for achieving your objectives. The number of webhook requests is capped, and exceeding this limit results in the non-activation of the Zap. Even Zapier acknowledges this.
Oh dear!
With its SEO tools, plagiarism checker, content calendar, roles and permissions, and one-click publishing, Letterdrop simplifies Webflow. It accomplishes everything Zapier can… and beyond — minus that anxiety-ridden sensation of a "Frankenbox duct tape, the engines are on fire, the wings are falling off, we’re crashing into the mountain."
EN 
ZH 
ZH_CN 
JA 
KO