Webflow Site API

Overview

API Plugin simplifies Webflow site management by enabling API endpoint creation without coding or server setup. You can make unlimited API calls to your Webflow site without worrying about rate limits.

Key benefits include:

• Bypass Webflow API rate limits
• Manage collection items programmatically across any collection
• Submit Webflow forms via API
• Batch create, update, and delete items
• Publish changes instantly through the API
• Protect API key security
• Eliminate server configuration requirements
• Monitor API usage logs

This integration provides a clean, RESTful interface to your Webflow site data while keeping your Webflow API credentials secure.

How to Setup

We assume you have signed up on API Plugin and are logged into the dashboard.

To set up the Webflow Site API:

1. Go to the marketplace
2. Create a new API
3. Select Webflow from the list

You'll need a Webflow API token to configure this API. You can generate the token in your Webflow account:

1. Log in to your Webflow account
2. Navigate to Account Settings → Integrations tab
3. Find the "API Access" section
4. Generate a new API token with read/write permissions

Once you have your API token, go to the API Plugin dashboard. Give your API a name, input your token, select your site, and create your API endpoint.

Now you'll have a simple and secure API for your entire Webflow site.

Endpoints

Get All Items

GET /webflow/{token}/items?collectionId={collectionId}

Query parameters:

• collectionId (required): ID of the collection to fetch items from
• limit (default: 100): Number of items to return
• offset (optional): For pagination
• sort (optional): Field to sort by (prefix with "-" for descending)
• filter (optional): JSON encoded filter object

Get Single Item

GET /webflow/{token}/items/{itemId}?collectionId={collectionId}

Query parameters:

• collectionId (required): ID of the collection the item belongs to

Create Item

POST /webflow/{token}/items?collectionId={collectionId}

Query parameters:

• collectionId (required): ID of the collection to create the item in
• live (optional, default: false): Whether to publish the item immediately

Request body: Object containing item fields

Update Item

PATCH /webflow/{token}/items/{itemId}?collectionId={collectionId}

Query parameters:

• collectionId (required): ID of the collection the item belongs to
• live (optional, default: false): Whether to publish the update immediately

Request body: Object containing updated fields

Delete Item

DELETE /webflow/{token}/items/{itemId}?collectionId={collectionId}

Query parameters:

• collectionId (required): ID of the collection the item belongs to
• live (optional, default: false): Whether to publish the deletion immediately

Get Collections

GET /webflow/{token}/collections

Returns all collections for your site.

Get Collection Schema

GET /webflow/{token}/collections/{collectionId}

Returns the schema/structure of a specific collection.

Get Forms

GET /webflow/{token}/forms

Returns all forms for your site.

Submit Form

POST /webflow/{token}/forms/submit?formId={formId}

Query parameters:

• formId (required): ID of the form to submit

Request body: Object containing form field data

Publish Site

POST /webflow/{token}/publish

Request body (optional):

{
    "itemIds": ["item1", "item2"] // Optional array of specific items to publish
}

Publishes changes to your Webflow site. If itemIds is provided, only those specific items will be published; otherwise, all changes will be published.

Usage Examples

Get All Items in a Collection

fetch('https://api.example.com/webflow/YOUR_TOKEN/items?collectionId=abc123')
    .then((response) => response.json())
    .then((data) => console.log(data));

Create a New Item

fetch('https://api.example.com/webflow/YOUR_TOKEN/items?collectionId=abc123&live=true', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        name: 'New Product',
        slug: 'new-product',
        price: 99.99,
        description: 'This is a new product',
    }),
})
    .then((response) => response.json())
    .then((data) => console.log(data));

Update an Item

fetch('https://api.example.com/webflow/YOUR_TOKEN/items/ITEM_ID?collectionId=abc123&live=true', {
    method: 'PATCH',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        price: 89.99,
        description: 'Updated product description',
    }),
})
    .then((response) => response.json())
    .then((data) => console.log(data));

Submit a Form

fetch('https://api.example.com/webflow/YOUR_TOKEN/forms/submit?formId=form123', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        name: 'John Doe',
        email: 'john@example.com',
        message: 'Hello, I am interested in your services.',
    }),
})
    .then((response) => response.json())
    .then((data) => console.log(data));

Publish Site Changes

fetch('https://api.example.com/webflow/YOUR_TOKEN/publish', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        itemIds: ['item1', 'item2'], // Optional - only publish specific items
    }),
})
    .then((response) => response.json())
    .then((data) => console.log(data));

Security Considerations

Your Webflow API token is securely encrypted on our servers and is never exposed to clients. All requests to your Webflow site go through our API, adding an extra layer of security.

You can also set allowed domains to restrict API access to specific origins, enhancing security for your Webflow data.