Attributes API solutions:
Select a solution

Attributes API

Getting started

Attributes is a no-code solution for adding advanced functionality to a Webflow project.

Attributes API allows javascript on top of the Attributes no-code solution. We can write code to interact with the internal logic of Attributes.

All solutions directory page — Lists all no-code Attributes solutions. The API can be used to programmatically interact with these solutions.

Each API-supported solution has its own API documentation page.

Use cases

The API can be used to:

  • Add JavaScript to Attributes solutions.
  • Add custom functionality to Attributes when the default no-code functionality does not satisfy the use case.
  • Integrate third-party JavaScript libraries with Attributes solutions.
  • Integrate third-party data (data outside of Webflow CMS) with Attributes solutions.
  • Programmatically set custom values to filters, search, range sliders, etc.
  • Listen for events such as "renderitems", "switchpage", etc, to trigger custom actions when desired.

Example use cases

SlickJS Slider: Use a custom slider library like SlickJS together with Attributes cmsload. You can dynamically add new slides to SlickJS when cmsload loads them.

Google Analytics: Push analytics events to Google when the user applies a filter. When the filter changes, or satisfies a specific filter combination, push the event to the dataLayer.

GitHub Changelog: Filter through GitHub data on our Updates page. This page fetches data from GitHub with JavaScript and filters through the data with Attributes API.

Common confusions

Can the API fetch external data and add it to the Webflow website?

  • No. The API does not fetch the external data and bring it into Webflow. JavaScript can fetch the external data and bring it into Webflow. The Attributes API allows you to apply Attributes solutions to the external data.

Can the API be used with Webflow CMS?

  • Yes. The API is not specific to Webflow CMS or any data source. It can be used with any data. Attributes API allows us to interact with Attribute solutions, regardless of where the data comes from.

Can the API solve the 10,000 CMS item limit?

  • No. The API solution is completely separated from the 10,000 limit. The API can work with data from Webflow CMS, which has a hard limit of 10,000 CMS items. The API can work with data from external sources, which have no item limits. The API itself does not bring in that external data. JavaScript can bring in this external data and the API allows us to programmatically control the functionality from Attributes solutions.

Requirements

JavaScript fundamentals

Attributes API is best used by people who understand the basics of JavaScript. Although a non-technical Webflow developer may be able to use Attributes API, it is not a no-code tool.

Watch the video tutorial below to understand if you are ready for Attributes API.

If you're interested in learning JavaScript, we recommend this course on Udemy.

Tutorials

Understand the API with a walkthrough tutorial.

1. Get data from external API and add it to a Collection List

2. Filter external API data on the page with Attributes

Roadmap

We are actively growing and supporting Attributes API. Each released Attributes solution will soon have a matching Attributes API documentation page.

Here's what we're working on:

Components

Import full components from other pages.

Accessibility (a11y)

Ensures dynamic attributes are updated and elements are keyboard actionable.

Accordion

Create accessible accordions without Webflow Interactions.

Auto Video

Automatically play and pause videos based on visibility in the viewport

CMS Attribute

Add custom attributes with dynamic CMS data.

CMS Combine

Combine multiple Collection Lists into one

CMS Element

Allows static elements to be used instead of the CMS List when using Attributes CMS solutions.

CMS Nest

Nest Webflow CMS Collection lists without limitations

CMS Previous Next

Previous and next items on Webflow CMS Templates

CMS Select

Webflow CMS dynamic Form Select

CMS Slider

Dynamic Webflow Slider with Webflow CMS Collection List

CMS Sort

Sort items in a Webflow CMS dynamic Collection List

CMS Tabs

Dynamic Webflow Tabs with Webflow CMS Collection List

Code Highlight

Display custom code with syntax highlighting. Integrates with Webflow Rich Text.

Combo Box

A combination of a dropdown list and an editable text input.

Copy to Clipboard

Add copy to clipboard functionality to your Webflow project

Count List Items

Count and display the number of items in a Webflow CMS Collection List

Custom Favicon by Page

Set a custom favicon for a specific page

Custom Form Select

Use a Webflow Dropdown element as a Webflow Form <select> component

Custom Slider Dots

Customize slider dots for native Webflow Slider component

Disable Scrolling

Disable page scrolling when [something] happens

Edit Link Blocks in Editor

Make Webflow Link Block elements editable in Editor

Form Submit

Customize what happens after a Webflow form submission.

Input Active

Apply an active class when an input element is active.

Input Counter

Increment and decrement (+ and -) counter in a Webflow Form.

Mirror Click Events

Mirror a click from one element to another

Mirror Input Values

Mirror a user input to another input

Modal

Create accessible modal popups easily on Webflow.

Number Count

Count a number from an initial value to an end value.

Powerful Rich Text

Add HTML and components to Webflow Rich Text Block

Query Param

Use query parameter values to populate form inputs and text elements.

Range Slider

Build a custom Range Slider Form component

Read Time

Estimated read time of Rich Text content based on word count

Smart Lightbox

Lightbox / modals that change position in the DOM. Avoid z-index, fixed position, and transform issues.

Social Share

Share content and URL to social media platforms

Star Rating

Star rating inside any Webflow form.

Static to Collection List

Inject static content in a Webflow CMS dynamic list.

Table of Contents

Automatically generate a table of contents for a Rich Text Block.

Support

Attributes API technical support is available as part of our Finsweet Pro offering.

We can not guarantee that your API use case will be supported. We may be able to assist you in your API implementation. We may not be able to help at all. Our support staff is technical and does write JavaScript.

Learn more about our Support expectations.

Automated Support

Need more help? Use the Automated Support

Help yourself in minutes. Don't wait hours or days for support.

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.