Collection Aggregator

A Next.js application that aggregates items from multiple Webflow CMS collections into a single destination collection. Built for Webflow Cloud.

Overview

This application syncs items from three source collections (White Papers, Blog Posts, and Webinars) into a unified "Resources" collection. It provides:

• Real-time webhook sync: Automatically syncs items when they're created, updated, or deleted in source collections
• Manual reset/sync: Endpoint to manually reset and re-sync all items from source collections
• Field mapping: Automatically maps fields and adds metadata (source ID, type) to destination items

Getting Started

Prerequisites

• Node.js and npm installed
• A Webflow site with the required collections
• A Webflow API token with appropriate permissions

Environment Variables

Create a .env file in the root directory with the following variables:

WEBFLOW_API_TOKEN=your_webflow_api_token
DESTINATION_COLLECTION_ID=your_destination_collection_id

Installation

npm install

Development

Run the development server:

npm run dev

The application will be available at http://localhost:3000/automations (note the /automations base path).

Building

npm run build

Deployment

Deploy to Webflow Cloud:

npm run deploy

Or use the Webflow CLI directly:

webflow cloud deploy

API Endpoints

Webhook Handler

POST /automations/api/webhooks

Receives webhook events from Webflow when items are created, updated, or deleted in the source collections. Configure this URL in your Webflow site's webhook settings.

Supported trigger types:

• collection_item_created
• collection_item_changed
• collection_item_deleted

Source collections:

• White Papers (69050d31ce12fb72103d7bf5)
• Blog Posts (69050d339e98b49587062e41)
• Webinars (69050d35ce12fb72103d7d89)

Reset/Sync Endpoint

POST /automations/api/reset

Manually resets the destination collection and re-syncs all items from the source collections. Useful for initial setup or recovery.

Example curl command:

curl -X POST http://localhost:3000/automations/api/reset

Response includes:

• Number of items deleted from destination
• Sync results for each source collection
• Summary statistics (total processed, created, errors)

How It Works

1. Webhook Flow: When an item is created/updated/deleted in a source collection, Webflow sends a webhook to /automations/api/webhooks
2. Field Mapping: The handler maps source fields to destination fields and adds:
   • source-id: The original item ID from the source collection
   • type: An option field indicating the resource type (White Paper, Blog Post, or Webinar)
3. Destination Sync: The item is created, updated, or deleted in the destination "Resources" collection accordingly

Project Structure

src/
├── app/
│   ├── api/
│   │   ├── reset/route.ts      # Manual reset/sync endpoint
│   │   └── webhooks/route.ts   # Webhook handler endpoint
│   └── ...
└── lib/
    ├── types.ts                 # TypeScript type definitions
    ├── webflow.ts              # Webflow API client functions
    ├── webhook-handlers.ts     # Webhook event handlers
    └── webhook-validation.ts   # Webhook validation and allowed collections