Installation

Learn how to install Attributes by Finsweet in your project using CDN or npm.

Attributes can be installed in two ways: via CDN for quick setup in Webflow, or via npm for JavaScript projects.

CDN installation (recommended for Webflow)

The fastest way to get started is to add the CDN script to your Webflow project.

1. Choose your loading strategy

   Attributes supports two loading strategies:

   Option 1: Load specific attributes (recommended)

   Only load the attributes you need for better performance:

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

   Add fs-{attribute-name} as attributes to load specific solutions.

   Option 2: Auto-load all used attributes

   Automatically detect and load attributes used on your page:

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

   The fs-attributes-auto option scans your page for any fs-* attributes and loads the corresponding modules. While convenient, it may load unused attributes if you have attributes in hidden elements.

2. Add the script to Webflow

   1. In your Webflow project, go to Project Settings > Custom Code
   2. Paste your chosen script into the Footer Code section
   3. Click Save Changes
   4. Publish your site

   Add the script to the footer (not the header) to ensure the DOM is fully loaded before Attributes initializes.

3. Start using attributes

   You can now add attributes to your elements! For example:

   <button fs-copyclip-click fs-copyclip-text="Hello World">
     Copy to Clipboard
   </button>
   

   The attribute will automatically initialize when the page loads.

npm installation (for developers)

For JavaScript projects or custom Webflow builds, you can install Attributes via npm.

1. Install the package

   npm

   npm install @finsweet/attributes
   
2. Import and use

   Import the main library in your JavaScript:

   import '@finsweet/attributes';
   

   This will automatically initialize all attributes found on the page.

   When using npm, Attributes automatically detects all fs-* attributes in your HTML and loads the corresponding modules.

3. Load specific attributes programmatically

   You can also load specific attributes on demand:

   // Load individual attributes
   window.FinsweetAttributes.load('modal');
   window.FinsweetAttributes.load('copyclip');
   
   // Execute callback when attribute is ready
   window.FinsweetAttributes.push(
     ['modal', (result) => {
       console.log('Modal attribute loaded', result);
     }]
   );
   

Version pinning

For production sites, we recommend pinning to a specific version to avoid unexpected breaking changes.

Instead of using @2, specify the exact version:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2.6.29/attributes.js"
  fs-modal
  fs-copyclip
></script>

Check the latest version on npm or GitHub releases.

Verifying installation

To verify Attributes is loaded correctly:

1. Open your browser’s developer console (F12)
2. Type: window.FinsweetAttributes
3. You should see an object with version, modules, and other properties

You can check the version:

console.log(window.FinsweetAttributes.version);
// Output: "2.6.29"

Next steps

Quickstart tutorial

Ready to build your first feature? Follow our quickstart guide to create a copy-to-clipboard button in 5 minutes.