Finsweet Class Adder

How to integrate Finsweet Class Adder with Webflow

Dynamic class manipulation in Webflow enables conditional styling, user interaction states, and automated visual updates without rebuilding components. This integration responds to CMS data, user actions, and external triggers to apply CSS classes programmatically.

Integrate through custom code with data attributes for basic implementations or use Webflow's REST API to manage custom scripts for server-triggered updates.

Note: Finsweet Class Adder was created in 2020 and is no longer actively maintained. For new projects, consider using Finsweet Attributes v2 or Webflow's native interactions. This guide documents Class Adder for existing implementations only.

Script embed and data attributes

Add the Class Adder library through Webflow's custom code settings to enable dynamic class management across your site. Configure behavior through HTML data attributes without writing JavaScript.

Add <script src="https://cdn.finsweet.com/class-adder/v1.0.0/classAdder.min.js"></script> to your site's footer code through Site settings > Custom code. The library initializes automatically after publishing.

Configure elements using data attributes:

• data-class-adder-trigger="click" applies classes when elements are clicked
• data-class-adder-trigger="hover" applies classes during mouse hover states
• data-class-adder-trigger="scroll" activates classes when elements enter viewport
• data-class-adder-trigger="load" applies classes immediately on page load
• data-class-adder-target specifies target elements using any valid CSS selector
• data-class-adder-class defines the class name to apply

This approach works with CMS collections. Apply data attributes to collection list items and the library handles dynamic content without additional configuration.

Common use cases include z-index management for layered interfaces, theme switching for dark mode toggles, visibility controls for conditional content, and state management for multi-step forms.

Build with Webflow REST API to manage custom scripts

Use Webflow's REST API to register and deploy custom JavaScript when you need server-triggered styling updates or integration with external systems. The API manages script registration and deployment while the scripts themselves handle client-side class manipulation.

Authenticate with Webflow's OAuth system using sites:read and custom_code:write scopes. Include the bearer token in API requests with headers Authorization: Bearer <token> and Accept-Version: 2.0.0.

Webflow REST API endpoints for managing custom code:

• POST /sites/{site_id}/registered_scripts/inline registers inline scripts with displayName, version, sourceCode, and canCopy parameters
• POST /sites/{site_id}/registered_scripts/hosted registers hosted scripts from external URLs with hostedLocation and integrityHash parameters
• PUT /sites/{site_id}/custom_code applies site-wide custom code to head or footer
• PUT /pages/{page_id}/custom_code applies page-specific custom code
• GET /sites/{site_id}/collections retrieves collection data for CMS-based styling
• POST /sites/{site_id}/webhooks configures automated triggers for events like collection_item_created

Webhook-triggered class management

Connect external systems to your Webflow site's visual states using Webflow's webhook system. Your server receives CMS events and responds by updating content that custom scripts then style according to your rules.

Note: This approach requires server infrastructure to receive and process webhooks. For most styling needs without external system integration, use Webflow's native interactions or Finsweet Attributes v2 instead.

Create webhooks that monitor CMS changes with POST requests to https://api.webflow.com/v2/sites/{site_id}/webhooks:

{
  "triggerType": "collection_item_created",
  "url": "https://your-server.com/webhook",
  "filter": { "collectionId": "your_collection_id" }
}

Available webhook events include collection_item_created for new CMS items, collection_item_changed for item updates, form.submission for form completions, and site.publish for deployment notifications.

Your webhook endpoint receives payloads containing id, siteId, collectionId, and fieldData with all CMS field values. Validate webhooks using the x-webflow-signature header with HMAC SHA-256 verification and the x-webflow-timestamp header to prevent replay attacks. Webflow allows a 5-minute tolerance window for timestamp validation.

Monitor webhook health through GET /sites/{site_id}/webhooks to track active integrations.

What you can build

Dynamic class management responds to user interactions, CMS data, and external events for automated styling changes.

• Alternating collection layouts: Build blog lists or product grids where every third item displays in a featured layout with different typography and sizing as content editors add new CMS items
• Interactive filtering interfaces: Create portfolio pages where category buttons apply visual styles to matching items while dimming others through class toggles
• Conditional content visibility: Design multi-step forms or gated content that reveals based on user progress using scroll position or click events
• Theme switching systems: Implement dark mode toggles or brand theme selectors that apply styling changes across the site through a single class addition to the body element