Finsweet Components

How to integrate Finsweet Components with Webflow

Webflow's native CMS lacks advanced filtering, pagination controls, and bulk operation tools. Finsweet Components addresses these constraints through programmatic content management and client-side interactivity.

Integrate Finsweet Components with Webflow through the marketplace app for visual component generation, direct script embedding via custom code for lightweight implementations, or combine the Webflow API with Finsweet's JavaScript layer for complex CMS operations and backend automation.

Use the Finsweet Components app

The Finsweet Components marketplace app provides six JavaScript-powered components including Advanced Slider, Marquee, Instagram Feed, YouTube Feed, HTML Table, and Number Count.

Open the Apps panel in Webflow, select a component type, choose a layout variant, and click Generate Component. The app creates properly structured nested elements with custom attributes already configured, which can then be styled using Webflow's Style panel.

The app provides these capabilities:

• Visual component generation: Create sliders, marquees, social feeds, tables, and counters without code
• Native styling integration: Style components using Webflow's Style panel with full class control
• CMS binding support: Connect Collection Lists to component wrappers for dynamic content
• Component library access: Duplicate components across projects through the app panel
• No-code implementation: Build and configure components entirely within Webflow

Install the app through your Webflow account in the Webflow Marketplace. Components require publishing to webflow.io staging or custom domains. They won't execute in preview mode. The app handles script loading automatically, which removes manual <script> tag management.

Native embeds and script injection

Direct script embedding supports lightweight implementations without the full marketplace app. Add component-specific scripts through Webflow's Custom Code settings in Project Settings for site-wide functionality, or use Code Embed elements for page-level implementations.

Add scripts to Site settings > Custom Code > Footer Code for site-wide loading. Use these component-specific scripts:

CMS Library Component:

<script defer src="https://cdn.finsweet.com/cms-library/1.1.0/cmsLibrary.js"></script>

Filter Component:

<script defer src="https://cdn.finsweet.com/filters/1.7.0/filters.js"></script>

Attribute Manager:

<script defer src="https://cdn.finsweet.com/attr-manager/1.0.3/attributeManager.js"></script>

After adding scripts, apply custom attributes to HTML elements through the Element Settings panel. Components identify elements through fs-[component]-element attributes rather than class names, allowing free class customization while maintaining functionality.

For page-specific implementations, drag a Code Embed element from the Add panel onto the canvas. Open the code editor and paste the required <script> tags. This approach works for testing components on individual pages before site-wide deployment. Components require live JavaScript execution and will only function on published websites (webflow.io staging or custom domains), not in preview mode.

Critical requirement: Never remove or rename generated custom attributes. Per the Finsweet Marquee documentation, removing attributes like fs-marquee-instance breaks JavaScript execution entirely. Additionally, as per Finsweet Cookie Consent documentation, you must keep all generated elements inside the designated wrapper. Altering the structure disables all JavaScript functionality.

Build with Webflow API and Finsweet JavaScript

API integration supports programmatic CMS management, automated content workflows, and real-time data synchronization between Webflow and external systems. Build bulk product import pipelines that sync inventory databases with Webflow collections, order status dashboards that update in real-time, multi-platform content syndication tools that publish to Webflow and other CMSs simultaneously, or webhook-driven notification systems that alert teams when content changes.

The Webflow Data API v2 provides 21 REST endpoints for backend collection operations (creating, reading, updating, deleting, and publishing CMS items) while Finsweet's JavaScript layer adds client-side filtering, sorting, and pagination capabilities.

This approach suits developers building custom admin tools for content teams, automated publishing workflows triggered by external events, integration with inventory management systems or CRM platforms, or analytics dashboards that visualize Webflow CMS data alongside metrics from other sources.

Manage CMS content with REST endpoints

The Webflow Data API provides 21 REST endpoints for collection operations. According to the Webflow Authentication Reference, API calls require Bearer token authentication:

Base URL: https://api.webflow.com/v2
Authorization: Bearer [token]
Content-Type: application/json

Core collection operations use these endpoints from the Webflow CMS API Reference:

• List collections with GET /collections
• Create items with POST /collections/{collection_id}/items
• Update items with PATCH /collections/{collectionid}/items/{itemid}
• Publish items with POST /collections/{collectionid}/items/{itemid}/publish
• Bulk operations with POST /collections/{collection_id}/items/bulk (max 100 items per request)

Filtering and sorting with Finsweet JavaScript

Finsweet's JavaScript layer provides client-side filtering and sorting capabilities for CMS collections without modifying Webflow's backend.

Load the universal Attributes script in your project's <head> tag via Project Settings > Custom Code:

<script async type="module"
 src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js">
</script>

Apply custom attributes to enable filtering. From the CMS Filter Reference:

<!-- Filter Form -->
<form fs-list-element="filters">
 <input type="text" fs-list-field="name" fs-list-debounce="300">
</form>

<!-- Collection List -->
<div fs-list-element="list">
 <div class="item">
 <h3 fs-list-field="name">Product Name</h3>
 </div>
</div>

You can add sorting controls using the following:

<button fs-sort-field="price" fs-sort-order="asc">Price: Low to High</button>
<button fs-sort-field="price" fs-sort-order="desc">Price: High to Low</button>

<div fs-sort-element="LIST">
 <div class="item">
 <p fs-sort-field="price">49.99</p>
 </div>
</div>

Pagination and infinite scroll

The CMS Load Reference demonstrates pagination implementation:

<script async type="module" fs-list fs-load
 src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js">
</script>

<div fs-load-limit="10">
 <!-- Items, only first 10 visible initially -->
</div>

<button fs-load-more fs-load-offset="0">Load More</button>

Combine with Webflow's API pagination parameters. The Staged Items List Reference supports offset and limit parameters (max 100 items per call) plus sortBy and sortOrder for server-side sorting.

Real-time updates with webhooks

Webflow provides webhook support for real-time CMS synchronization. Per the Webflow CMS API Reference, webhooks can be configured via:

POST https://api.webflow.com/v2/sites/{site_id}/webhooks

Supported webhook event types include:

• collection_item_created: New CMS item
• collection_item_updated: Item modified
• collection_item_deleted: Item removed
• collection_item_published: Item published to live
• collection_item_unpublished: Item moved to draft
• form_submission: Form submitted
• page_published: Page published
• site_publish: Site published
• ecomm_new_order: New order
• ecomm_order_changed: Order updated

Finsweet Components do not emit webhook notifications directly. Instead, Webflow's native webhooks capture all CMS modifications, including those made through Finsweet-powered interfaces. Webhooks provide real-time event notifications for backend systems to sync, update, or respond to Webflow CMS changes.

Configure webhooks for automated content synchronization. The Webflow Create Webhook Reference shows the endpoint structure:

const response = await fetch(
 `https://api.webflow.com/v2/sites/${siteId}/webhooks`,
 {
 method: 'POST',
 headers: {
 'Authorization': `Bearer ${token}`,
 'Content-Type': 'application/json'
 },
 body: JSON.stringify({
 triggerType: 'collection_item_created',
 deliveryUrl: 'https://your-server.com/webhook-handler',
 filter: { collectionId: 'specific_collection_id' }
 })
 }
);

According to the Webflow All Events Reference, CMS-specific webhook events include:

• collectionitemcreated: New CMS item added
• collectionitemupdated: Existing item modified
• collectionitemdeleted: Item removed
• collectionitempublished: Item status changes draft to published/live
• collectionitemunpublished: Live item moved back to draft

Webhook payloads include siteId, collectionId, itemId, field data, and timestamps. The Webhooks API documentation describes signature verification using HMAC-SHA256 hashing with the x-webflow-signature header and x-webflow-timestamp header.

What you can build

Integrating Finsweet Components with Webflow supports dynamic content displays, CMS-powered filtering systems, pagination with load-more functionality, sortable collection lists, nested collections, and slider components for CMS-driven carousels.

• Filterable product catalogs: Build searchable product collections with multi-criteria filtering, CMS-driven content updates, and real-time refinement without page reloads
• Social proof galleries: Display Instagram feeds or YouTube videos with automatic content updates, custom branded layouts, and CMS integration for curated selections
• Interactive data tables: Present structured data with CSV upload support, semantic HTML markup, responsive layouts, and Webflow styling controls
• Dynamic team carousels: Create CMS-driven sliders for team members, testimonials, or case studies using the Slider component, where non-technical editors can update content directly through Webflow's CMS