Webflow Integration - Attributes by Finsweet

Overview

Attributes by Finsweet is designed specifically for Webflow, providing pre-built JavaScript functionality through HTML attributes. This allows designers to add advanced interactions and features without writing custom code.

Why Attributes for Webflow?

No-Code Solution

Webflow excels at visual design but has limitations for certain interactions. Attributes fills the gap:

No JavaScript knowledge required - Add functionality through HTML attributes
Visual workflow - Configure everything in Webflow’s Designer
Production-ready - Enterprise-grade, tested code
Maintained - Regular updates and bug fixes

Webflow-Native Approach

Attributes leverages Webflow’s built-in features:

Adding Attributes in Webflow

1. Add the Script

In your Webflow project settings, add the Attributes script to the <head> or before </body>:

<script 
  type="module" 
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@latest/attributes.js"
  fs-attributes-auto="true"
></script>

Add the script in Project Settings > Custom Code > Head Code or Footer Code depending on your needs. For most use cases, adding it to the Footer Code (before </body>) provides the best performance.

2. Add Custom Attributes to Elements

In the Webflow Designer:

Select an element
Open the Settings Panel (D key)
Scroll to Custom Attributes
Click + to add a new attribute
Enter the attribute name (e.g., fs-accordion-element) and value (e.g., component)

3. Publish and Test

Publish your site and test the functionality. The Attributes library will:

Load when the page loads
Detect all fs-* attributes in the DOM
Dynamically load only the required attribute packages
Initialize the functionality

Webflow-Specific Patterns

Working with Webflow Components

Webflow’s component system works seamlessly with Attributes:

<!-- Create this structure once as a Webflow Component -->
<div fs-accordion-element="component" class="accordion">
  <div fs-accordion-element="item" class="accordion-item">
    <button fs-accordion-element="trigger" class="accordion-trigger">
      Question
    </button>
    <div fs-accordion-element="content" class="accordion-content">
      Answer
    </div>
  </div>
</div>

Benefits:

Reusable: Copy the component across pages
Consistent: Attributes are preserved in component instances
Maintainable: Update the component once, apply everywhere

When you create a Webflow component with custom attributes, all instances of that component will inherit those attributes automatically.

Working with CMS Collections

Attributes work with Webflow CMS content:

<!-- CMS Collection List -->
<div fs-list-element="component" class="blog-list">
  
  <!-- CMS Collection Item (repeated for each post) -->
  <div fs-list-element="item" class="blog-item">
    <h3 class="blog-title">{CMS: Title}</h3>
    <div class="blog-excerpt">{CMS: Excerpt}</div>
    <span fs-list-element="category">{CMS: Category}</span>
  </div>
  
  <!-- Empty state -->
  <div fs-list-element="empty">No posts found</div>
  
</div>

Common CMS + Attributes patterns:

CMS Filter - Filter collection lists dynamically
CMS Load More - Paginate collection items
CMS Lightbox - Create lightboxes from CMS images
CMS Sort - Sort collection items client-side

Working with Webflow Interactions

Attributes complement Webflow’s native interactions:

Use Webflow IX2 for:

Animations and transitions
Scroll-based effects
Simple show/hide interactions
Visual effects

Use Attributes for:

Complex logic (forms, filtering, pagination)
State management (accordions, tabs, modals)
Data manipulation (counters, calculations)
External integrations

Example: Combining Both

<!-- Modal structure with Attributes -->
<div fs-modal-element="modal" fs-modal-modal="gallery" class="modal">
  
  <!-- Use Webflow IX2 for fade-in animation -->
  <div class="modal-content" data-ix="fade-in">
    <button fs-modal-element="close">Close</button>
    <!-- Content -->
  </div>
  
</div>

Attributes handles the modal open/close logic and state, while Webflow Interactions can handle the visual animations. They work together seamlessly.

Performance in Webflow

Automatic Code Splitting

Attributes uses dynamic imports to load only what you use:

// From packages/attributes/src/load.ts:7-11
export const loadAttribute = async (key: FinsweetAttributeKey) => {
  switch (key) {
    case 'accordion': {
      return import('@finsweet/attributes-accordion');
    }
    // Only the packages you use are downloaded
  }
};

If your page only uses fs-accordion-* attributes:

✓ Core library loads (~2KB gzipped)
✓ Accordion package loads (~3KB gzipped)
✗ Modal package doesn’t load
✗ List package doesn’t load
✗ Other packages don’t load

Webflow’s Publishing Pipeline

When you publish a Webflow site:

HTML is minified - Webflow optimizes your HTML
Assets are CDN-delivered - Fast global distribution
Script loads asynchronously - Non-blocking with type="module"
Attributes load on-demand - Only used packages download

Result: Minimal impact on page load time.

Optimization Tips

1. Use Explicit Declaration for Large Sites

Instead of auto-detection:

<!-- Auto-detection: Scans entire DOM -->
<script 
  type="module" 
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@latest/attributes.js"
  fs-attributes-auto="true"
></script>

Use explicit declaration:

<!-- Explicit: No DOM scanning -->
<script 
  type="module" 
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@latest/attributes.js"
  fs-accordion
  fs-modal
></script>

Place the script before </body> to avoid blocking page render: Project Settings > Custom Code > Footer Code

3. Use CDN Caching

The jsDelivr CDN automatically caches the library:

<!-- Cached globally, fast downloads -->
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@latest/attributes.js"></script>

Common Webflow Workflows

Creating an Accordion

Create the structure in Webflow Designer:
- Add a div for the component
- Add divs for each item
- Add buttons for triggers
- Add divs for content
Add custom attributes:
- Component: fs-accordion-element="component"
- Items: fs-accordion-element="item"
- Triggers: fs-accordion-element="trigger"
- Content: fs-accordion-element="content"
Style in Designer:
- Set initial state (content hidden)
- Style expanded state
- Add hover effects
Publish and test

Create a Webflow Symbol (Component) for your accordion item structure. This makes it easy to duplicate items and keeps attributes consistent.

Creating a Filtered CMS List

Add CMS Collection List in Webflow
Add filter buttons above the list
Add custom attributes:
- List wrapper: fs-list-element="component"
- List items: fs-list-element="item"
- Filter buttons: fs-list-element="filter" + fs-list-filter="{category}"
- Item categories: fs-list-category="{category}"
Style everything in Designer
Publish and test filtering

Create modal structure:
- Add a div for the modal (position: fixed)
- Add overlay and content sections
- Add close button
Create trigger buttons on your page
Add custom attributes:
- Modal: fs-modal-element="modal" + fs-modal-modal="uniqueId"
- Triggers: fs-modal-element="trigger" + fs-modal-target="uniqueId"
- Close button: fs-modal-element="close"
Style the modal (initial state: hidden)
Publish and test

Webflow-Specific Utilities

The Attributes library includes Webflow-specific utilities:

// Available via window.FinsweetAttributes.utils
window.FinsweetAttributes.utils = {
  fetchPage: typeof fetchPage,
  attachExternalStylesheets: typeof attachExternalStylesheets
};

These utilities help attributes work seamlessly with Webflow’s:

Multi-page apps
Dynamic content loading
Custom stylesheets
External integrations

Debugging in Webflow

Browser Console

Open the browser console (F12) to debug:

// Check if library loaded
console.log(window.FinsweetAttributes);

// Check loaded attributes
console.log(window.FinsweetAttributes.modules);

// Check library version
console.log(window.FinsweetAttributes.version);

// Check which attributes are active
console.log(Array.from(window.FinsweetAttributes.process));

Common Issues

Attributes Not Working

Check script is added: View page source, search for “@finsweet/attributes”
Check attributes are correct: Inspect element, verify attribute names
Check console for errors: Look for red error messages
Check attribute values: Ensure values match documentation

Attributes Load But Don’t Work

Check element structure: Verify parent-child relationships
Check for typos: Attribute names must be exact
Check for conflicts: Look for duplicate IDs or conflicting scripts
Check Webflow interactions: Disable IX2 to test for conflicts

Version Management

Latest Version (Recommended for Development)

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@latest/attributes.js"></script>

Automatically gets the newest version. Good for:

Development
Testing new features
Non-critical projects

Pinned Version (Recommended for Production)

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2.0.0/attributes.js"></script>

Locks to a specific version. Good for:

Production sites
Client projects
When stability is critical

While @latest is convenient, pinning to a specific version prevents unexpected changes when new versions are released. Update the version number manually when you’re ready to upgrade.

Best Practices for Webflow

1. Use Webflow Components

Create reusable components with attributes built-in:

Consistent implementation
Faster development
Easier maintenance

2. Document Your Attributes

Use Webflow’s element labels to document attributes:

What each attribute does
Required attribute combinations
Configuration notes

3. Test Before Publishing

Always test in Webflow Preview mode before publishing:

Test all interactions
Test on different screen sizes
Test with real content

4. Plan Your Structure

Sketch out the HTML structure before building:

Identify parent-child relationships
Plan attribute placement
Consider CMS integration

5. Keep It Simple

Start with basic implementations:

One attribute solution at a time
Test thoroughly
Add complexity gradually

Resources for Webflow Users

Finsweet Extension: Browser extension to help add attributes in Webflow
Documentation: Detailed guides for each attribute solution
Finsweet Forum: Community support and examples
Webflow University: Tutorials on custom attributes

The Finsweet Chrome Extension streamlines adding attributes in Webflow by providing autocomplete and validation directly in the Webflow Designer.

Documentation Index

​Overview

​Why Attributes for Webflow?

​No-Code Solution

​Webflow-Native Approach

​Adding Attributes in Webflow

​1. Add the Script

​2. Add Custom Attributes to Elements

​3. Publish and Test

​Webflow-Specific Patterns

​Working with Webflow Components

​Working with CMS Collections

​Working with Webflow Interactions

​Use Webflow IX2 for:

​Use Attributes for:

​Performance in Webflow

​Automatic Code Splitting

​Webflow’s Publishing Pipeline

​Optimization Tips

​1. Use Explicit Declaration for Large Sites

​2. Load Script in Footer

​3. Use CDN Caching

​Common Webflow Workflows

​Creating an Accordion

​Creating a Filtered CMS List

​Creating a Modal

​Webflow-Specific Utilities

​Debugging in Webflow

​Browser Console

​Common Issues

​Attributes Not Working

​Attributes Load But Don’t Work

​Version Management

​Latest Version (Recommended for Development)

​Pinned Version (Recommended for Production)

​Best Practices for Webflow

​1. Use Webflow Components

​2. Document Your Attributes

​3. Test Before Publishing

​4. Plan Your Structure

​5. Keep It Simple

​Resources for Webflow Users

Overview

Why Attributes for Webflow?

No-Code Solution

Webflow-Native Approach

Adding Attributes in Webflow

1. Add the Script

2. Add Custom Attributes to Elements

3. Publish and Test

Webflow-Specific Patterns

Working with Webflow Components

Working with CMS Collections

Working with Webflow Interactions

Use Webflow IX2 for:

Use Attributes for:

Performance in Webflow

Automatic Code Splitting

Webflow’s Publishing Pipeline

Optimization Tips

1. Use Explicit Declaration for Large Sites

2. Load Script in Footer

3. Use CDN Caching

Common Webflow Workflows

Creating an Accordion

Creating a Filtered CMS List

Creating a Modal

Webflow-Specific Utilities

Debugging in Webflow

Browser Console

Common Issues

Attributes Not Working

Attributes Load But Don’t Work

Version Management

Latest Version (Recommended for Development)

Pinned Version (Recommended for Production)

Best Practices for Webflow

1. Use Webflow Components

2. Document Your Attributes

3. Test Before Publishing

4. Plan Your Structure

5. Keep It Simple

Resources for Webflow Users