Core package for all Finsweet Attributes.
Import the core package in your project:
<!-- [Attributes by Finsweet] Core -->
<script async type="module" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes"></script>Important: It's only required to import it once, no matter how many Attribute solutions are added.
Define the Attribute solutions that should be loaded on each page by adding the following inside the <head> tag:
<script
async
type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-SOLUTION_KEY
></script>Replace SOLUTION_KEY with the key of the solution you want to load. You can load as many solutions as you want.
Example:
<script
async
type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-rangeslider
fs-date
fs-socialshare
fs-consent
></script>Attributes reads the settings from the HTML Attributes that are added to the elements on the page. But some solutions also allow passing a set of global settings.
To do so, add the settings to the module elements with solution prefixes included.
Example:
<script
async
type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-rangeslider
fs-date
fs-socialshare
fs-consent
fs-consent-mode="opt-in"
fs-consent-source="/"
></script>