How to set the script tag

The Attributes script

To make a Solution functional, the initial step is to include the Attributes script on your page. The script granularly imports the Attributes library's modules and allows you to specify the specific solutions you want to use.

How to add the <script> tag to your page

At the top of every Solution's documentation page, there's a script block that you need to copy. Click on the Copy Script button.

In Webflow, open your page's Settings panel, and paste the copied code into the <head> tag field.

The classic way to use Attributes

It’s the way the documentation is describing: add the script as described above, and add custom attributes to necessary elements in Webflow’s Settings panel.

Select the appropriate element on the Canvas or in the Navigator panel

Add the desired attributes in the Settings panel

The advanced way to use the <script> tag

Introduced with Attributes v2, the <script> tag sports two new features: a single universal JavaScript Library, and the ability to define Settings attributes within the <script> tag itself.

NOTE

Finsweet Attributes is now one unique library.

You only have to call the library once. It's universal: it's the same for all Finsweet Attributes Solutions, for how many Solutions you’re using in your page.

The Finsweet Attributes library does not fully load with every call. Instead, by specifying the Solutions you're using on the page within the <script> tag, Attributes only loads the necessary components for your selected features to function properly.

src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"

The call to the Universal Finsweet Attribute library

The Solution in use is added as an attribute within the <script> tag

We define the current Solution by adding its key name to the <script> tag itself.

fs-inject

></script>

fs-richtext attribute is added to define the current Solution

All the settings attributes can be added inside of the <script> tag

Instead of being added to elements in the page. They’re gathered into once place: it’s easier to inspect and maintain, it’s also easier to re-use on another page.

Defined on the <script> tag, settings attributes affect all relevant elements in the page. It’s still possible to define them again on the relevant elements themselves to override the ones set in the <script> tag.

fs-list

fs-list-cache="false"

></script>

fs-richtext-resetix="true" is one of the settings attributes for Powerful Rich text

Here's various ways to set the <script> tag:

fs-inject

></script>

fs-richtext

fs-richtext-inject="my-component"

fs-richtext-resetix="true"

fs-richtext-sanitize="true"

></script>

fs-richtext

fs-richtext-inject="my-component"

fs-richtext-resetix="true"

fs-richtext-sanitize="true"

fs-list

fs-list-resetix="true"

fs-readtime-wpmfs="265"

></script>

IMPORTANT

When you add more Solutions to your page, make sure to properly integrate them. Instead of copying the whole script from our documentation, just update the <script> tag in your page's <head> code.

For example, if you've added the Powerful Rich Text script and want to include CMS Slider, just add the fs-list attribute to the existing <script> tag.

❌ This is wrong:

fs-inject

></script>

‍

fs-list

></script>

✅ This is correct:

fs-inject

fs-cmsslider

></script>

NOTE

For users familiar with the <script> tag, here's a pro-tip to streamline repetitive workflows: Instead of manually declaring the Solutions you're using on a page, you can let Attributes automatically detect them by using the fs-attributes-auto attribute. This simplifies the process and reduces the need for manual input.

fs-attributes-auto

></script>

Be aware that this method has one downside: it needs to wait until the page has been loaded to scan the DOM and import the used attributes, so it may be a little less responsive than the standard method.

NOTE

There are two types of custom attributes in Finsweet Attributes

The Element attributes (e.g., fs-inject-element="component")
- Typically, their names finish with element — although some may end with component, field, name, target, or value.
- These attributes identify and affect the elements targeted by the Solution, such as lists, components, or text elements.
- They should be applied to page elements, using the Style panel.
The Settings attributes (e.g., fs-inject-resetix="true")
- Their names finish with the setting's name (e.g., resetix).
- These attributes specify the Solution's settings.
- They can be added to page elements or within the <script> tag that calls the Finsweet Attributes JavaScript library.</aside>

Finsweet Attributes inheritance and override

Targeted elements inherit attributes set on parent elements or within the `<script>` tag

Defined within the <script> tag, the settings attributes — the ones with -element attributes on — are applied globally across a page, ensuring that these settings impact all targeted elements marked with the element attributes.

Settings attributes can actually be defined on any element of the page. Their values will be inherited by all their appropriate children.

The three methods showcased below are producing the same result:

Settings attributes are set on each of the targeted elements

<body>

</div>

</body>

A setting attribute is set on a common parent of the targeted elements, affecting all targeted children

<body>

</div>

</body>

A setting attribute is set within the script tag, affecting all targeted elements on the page

<head>

src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"

fs-list

fs-list-duration="250"

></script>

</head>

‍

<body>

</div>

</body>

Attributes are overriding other attributes set above in the DOM

It's possible to override global settings by defining attributes again on any individual element within the page.

Overriding is particularly useful if you’re using multiple instances of the same Solution, with different settings, on one page.

The three examples below are showcasing different override methods, and produce the exact same results:

The two first lists are set with a fade duration of 250ms, and the third one with a fade of 500ms

<body>

‍ <div class="collection-list" fs-list-element="list" fs-list-duration="500">...</div>

</div>

</body>

The attribute sets on the Container affects the two first lists. The attribute set on the third list overrides the one set on the Container.

<body>

‍ <div class="collection-list" fs-list-element="list" fs-list-duration="500">...</div>

</div>

</body>

The attribute set within the <script> tag affects all list on the page, except for the third one, on which an overriding attribute has been set

<head>

src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"

fs-list

fs-list-duration="250"

></script>

</head>

‍

<body>

‍ <div class="collection-list" fs-list-element="list" fs-list-duration="500">...</div>

</div>

</body>

Benefits of adding the Settings attributes within the <script> tag

Adding the Settings attributes within the script tag rather than on the targeted elements or any of their parents in the DOM is optional. The Solution will absolutely work the same, whatever the method you chose to employ.

But Settings attributes within the <script> tag comes with several benefits:

Settings are grouped into one location
No need to inspect several elements and the Settings panel to get an overview of the current Solution's configuration or to edit it: they're all conveniently grouped within the <script> tag.
All related elements inherit them
If you're using multiple instances of the same Solution in one page, the Settings attributes defined within the <script> tag will affect them all. And you can still re-define some of them on any element in the page: they will override the settings for all of their children.
It's easier to re-employ a Solution
You can copy the entire <script> tag on another page using the same Solution(s) , or archive it for later use. You'll only need to define the Elements attributes again on the new pages, saving a lot of time.

Finsweet Attributes is a series of essential functionalities — called Solutions — that anyone can add to Webflow websites, without code knowledge. It’s based on a javascript library, that is targeting custom attributes added to elements, to empower the website with new features (eg. filtering a Collection List). Learn how it works.

By making Attributes Open Source, we want to lead the way in developing quality software for Webflow that you can rely on, with security in mind too. It’s an open canvas into a software you know very well already: wether you use it to learn how we made it, or to start developing your own Solutions, we have decided to make Attributes limitless for you. Read about Attributes Open Source initiative.

How to set the <script> tag

The Attributes script

How to add the <script> tag to your page

The classic way to use Attributes

The advanced way to use the <script> tag

Finsweet Attributes is now one unique library.

The Solution in use is added as an attribute within the <script> tag

All the settings attributes can be added inside of the <script> tag

There are two types of custom attributes in Finsweet Attributes

Finsweet Attributes inheritance and override

Targeted elements inherit attributes set on parent elements or within the `<script>` tag

Attributes are overriding other attributes set above in the DOM

Benefits of adding the Settings attributes within the <script> tag

Hire trusted professionals to build your next project

How to set the <script> tag

The Attributes script

How to add the <script> tag to your page

The classic way to use Attributes

The advanced way to use the <script> tag

Finsweet Attributes is now one unique library.

The Solution in use is added as an attribute within the <script> tag

All the settings attributes can be added inside of the <script> tag

There are two types of custom attributes in Finsweet Attributes

Finsweet Attributes inheritance and override

Targeted elements inherit attributes set on parent elements or within the <script> tag

Attributes are overriding other attributes set above in the DOM

Benefits of adding the Settings attributes within the <script> tag

Hire trusted professionals to build your next project

Targeted elements inherit attributes set on parent elements or within the `<script>` tag