Webflow Collection Item Blog Post Draft API

import logging
import requests
import uvicorn
import os
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel, Field
from typing import Dict, Optional

logger = logging.getLogger(__name__)

app = FastAPI()

class BlogPostData(BaseModel):
    post_name: str
    extra_fields: Dict[str, str] = Field(default={})

def convert_to_kebab_case(s: str):
    return s.lower().replace("_", "-")

def convert_to_slug(s: str):
    return s.lower().replace(" ", "_")

About this template

The Webflow Blog Post Publisher is an app that provides an API endpoint to publish blog posts on Webflow as a draft. The API accepts all necessary information to create a blog post, including the Webflow API token. It also accepts extra fields that will be sent to Webflow as part of the fieldData. The name of the new item added to the collection will be the post_name provided in the request. The slug of the new item will be derived from the post_name by replacing spaces with underscores. The API accepts optional fields in the BlogPostData for extra_fields. All the optional fields will be part of the dictionary extra_fields. All the variables in the extra_fields are converted to kebab-case before they are passed into fieldData. The optional fields inside extra_fields variable are post_body, thumbnail_image, main_image, and post_summary. The app requires two environment variables to function properly: WEBFLOW_API_TOKEN and COLLECTION_ID. The post is linked with the collection in Webflow. The COLLECTION_ID environment variable is the ID of the collection in Webflow where the post will be added.

Introduction to the Webflow Blog Post Publisher Template

Welcome to the Webflow Blog Post Publisher template! This template is designed to help you seamlessly publish blog posts to your Webflow collection with ease. Whether you're a content creator, marketer, or a non-technical builder, this template will enable you to automate the process of adding new blog posts to your Webflow site without the need for manual entry. The template provides an API endpoint that accepts blog post data, including optional fields, and publishes it directly to your specified Webflow collection.

Getting Started with the Template

To begin using this template, simply click on "Start with this Template" in the Lazy builder interface. This will pre-populate the code in the Lazy Builder, so you won't need to copy, paste, or delete any code manually.

Initial Setup: Adding Environment Secrets

Before you can use this template, you'll need to set up a couple of environment secrets within the Lazy Builder. These are:

  • WEBFLOW_API_TOKEN: Your Webflow API token, which is necessary for authentication when making requests to the Webflow API.
  • COLLECTION_ID: The ID of the Webflow collection where you want to publish your blog posts.

To obtain these values, you'll need to:

  1. Log in to your Webflow account and navigate to your project settings.
  2. Go to the Integrations tab and generate an API token under the API Access section.
  3. For the COLLECTION_ID, go to the Collections section of your project and select the collection you want to use. The collection ID can be found in the collection settings or the URL.
  4. Once you have these values, enter them into the Environment Secrets tab within the Lazy Builder.

Test: Deploying the App

With the environment secrets set, you're ready to deploy the app. Press the "Test" button to begin the deployment process. The Lazy CLI will handle the deployment, and you won't need to worry about installing libraries or setting up your environment.

Using the App

After deployment, Lazy will provide you with a dedicated server link to use the API. Since this template uses FastAPI, you will also receive a link to the API documentation, which will guide you on how to interact with the API endpoint.

To publish a blog post, you'll need to make a POST request to the "/publish_draft" endpoint with the necessary blog post data. Here's a sample request:

POST /publish_draft HTTP/1.1
Host: [Your Lazy Server Link]
Content-Type: application/json

  "post_name": "My Awesome Blog Post",
  "extra_fields": {
    "post_body": "This is the content of the blog post...",
    "thumbnail_image": "url_to_thumbnail_image",
    "main_image": "url_to_main_image",
    "post_summary": "A brief summary of the blog post..."

And here's what a sample response might look like:

  "_id": "unique_item_id",
  "slug": "my-awesome-blog-post",
  "name": "My Awesome Blog Post",
  // Other fields returned by Webflow

Integrating the App

Once your blog post is published, you can integrate it into your Webflow site. The new post will appear in your specified collection and can be managed directly from your Webflow dashboard. If you have a frontend or external tool that displays content from your Webflow collection, the new post will automatically be available there as well.

Remember, this template is designed to simplify the process of publishing content to Webflow, so you can focus on creating great content without worrying about the technical details of content management.

Last published
June 15, 2024

More templates like this

Integration of Stripe Checkout Page in Webflow

To integrate a custom Stripe checkout page in Webflow, you need both a backend and a frontend. This template enables you to quickly set up the backend service. It is compatible with any price point you have established through the Stripe API. After adding the API key and directing the backend service to the price ID, you can activate the backend service by clicking the test button. Then, by integrating the Stripe frontend code into a Webflow page, you instantly create a custom payment page in Webflow. This method can be used to set up various types of payment pages in Webflow, including one-time payments and subscriptions.


Discord Server Member Count Web Component

A web component that displays the member count of a Discord server and can be embedded in a Webflow website. The member count is fetched from an API endpoint, and the web component is served through another API endpoint.

Fast API
Webflow Collection Item Blog Post Draft API