# Sygnal Attributes v5

{% hint style="success" %}
**SA5 is the lastest version of Sygnal's Webflow Utilities Library.**\
The tools here are 100% free, 100% open-source, and 100% designed for Webflow.  
{% endhint %}

## Libraries

SA5 is divided into a series of individual libraries. 

### Our Most Popular Libs

| Library                                                        | Purpose                                                                                                                | Features                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [SA5 HTML](https://attr.sygnal.com/sa5-html)                   | A huge range of page-modification capabilities                                                                         | <ul><li><a href="../sa5-html/sa5-dynamic-attributes">Dynamic attributes</a></li><li><a href="../sa5-html/truncate-text-w-ellipsis">Truncate text w/ ellipses</a></li><li><a href="../sa5-html/advanced-element-sorting">Advanced sorting</a></li><li><a href="../sa5-html/advanced-element-filtering">Advanced filtering</a></li><li><a href="../sa5-html/encoded-email">Encoded Emails</a></li><li><a href="../sa5-html/hide-section-w-empty-collection-lists">Hide Sections w/ Empty Collection Lists</a></li><li>and much more...</li></ul> |
| [SA5 User Accounts](https://attr.sygnal.com/sa5-user-accounts) | <p>Get logged in user info to personalize your site and improve user experience.<br>Custom-route on login. </p>        | <ul><li>User name</li><li>Email</li><li>Custom fields</li><li>Access groups</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| [SA5 Rich Text](https://attr.sygnal.com/sa5-richtext)          | Add capabilities to Webflow's Rich Text Block                                                                          | <ul><li>Responsive inline images</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| [SA5 Layout](https://attr.sygnal.com/sa5-layout)               | Advanced, dynamic layouts for your Webflow pages                                                                       | <ul><li>Restructure your collection lists entirely into groups</li><li>Create dynamic tabs from the CMS</li><li>Overcome Webflow's 5-nested-item limit </li></ul>                                                                                                                                                                                                                                                                                                                                                                              |
| [SA5 Forms](https://attr.sygnal.com/sa5-forms)                 | Easily replace Webflow's native form handler with your choice of 3rd party handlers like Basin, Zapier, Make, and n8n. | <ul><li>Eliminate SPAM</li><li>Trigger automations  </li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| [SA5 Modals](https://attr.sygnal.com/sa5-modals)               | Create powerful, consistent modals with full design control and zero interactions                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| [SA5 Hotkeys](https://attr.sygnal.com/sa5-hotkeys)             | Define custom hotkeys to trigger your scripts, page actions and navigation                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| [SA5 URL](https://attr.sygnal.com/sa5-url)                     | Special URL enhancement tools                                                                                          | <ul><li>Pass-through your query params from one page to another for referer tracking</li><li>Target all external links to a new tab</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                  |
| [SA5 Video](https://attr.sygnal.com/sa5-video)                 | Add capabilities to your video elements                                                                                | <ul><li>Youtube Hide related videos</li><li>Background Video poster image</li><li>Video player</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| [SA5 Elements](https://attr.sygnal.com/sa5-elements)           | Control Webflow's elements with code, and receive events when they change                                              | <ul><li>Tabs</li><li>Sliders</li><li>Buttons</li><li>Dropdown menus</li><li>Lightboxes</li><li>Radio buttons</li><li>Accordions</li><li>Lotties</li><li>Locale Switcher</li></ul>                                                                                                                                                                                                                                                                                                                                                              |
| [SA5 Format](https://attr.sygnal.com/sa5-format)               | Format numbers and currencies & dates specially                                                                        | <ul><li>Locale-specific formatting</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| [SA5 Track](https://attr.sygnal.com/sa5-track)                 | Special tracking using cookies and webStorage                                                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| [SA5 Select Custom](https://attr.sygnal.com/sa5-selectcustom)  | Custom Select element based on Finsweet's attribute of the same name.  Adds some dynamic update capabilities           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |

### Specialized Use / Advanced Libs;

| Library                                                     | Purpose                                                                                                       | Features                                                                                                                                                                                                                           |
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [SA5 Core](https://attr.sygnal.com/sa5-core)                | Central to SA5, but has a few tricks up its sleeve                                                            | <ul><li>Hide objects in the designer and make them visible in the published site</li></ul>                                                                                                                                         |
| [SA5 Cache](https://attr.sygnal.com/sa5-cache)              | Handle high-latency tasks such as content-fetching with a built-in caching layer.                             | <ul><li>Allows complex calculations and slow data retrievals to easily cache.</li><li>Code your update directly to the cache layer and it will "lazy load" the content when needed.</li></ul>                                      |
| [SA5 Embeds](https://attr.sygnal.com/sa5-embeds)            | Embed external content into your blog posts and pages.                                                        | <ul><li>Tables from Google Docs</li></ul>                                                                                                                                                                                          |
| [SA5 Social Share](https://attr.sygnal.com/sa5-socialshare) | Adds Email as a social share option.  Designed to work in conjunction with Finsweet's Social Share component. | <ul><li>Adds share-to-email</li></ul>                                                                                                                                                                                              |
| [SA5 Analytics](https://attr.sygnal.com/sa5-analytics)      | Adds some analytics capabilities to your site using attributes.                                               | <ul><li>GTM dataLayer events</li><li>UTM Tracking</li><li>Rel Attributes</li><li>A/B testing</li></ul>                                                                                                                             |
| [SA5 Data](https://attr.sygnal.com/sa5-data)                | Extract CMS data into JS objects from your collection lists, to power your custom code and calculations.      | <ul><li>Extract data from collection lists into datasources</li><li>Extract querystring data, and URL data</li><li>Cookies and webStorage</li><li>Data-bind these pieces of information to text elements and form inputs</li></ul> |
| [SA5 404](https://attr.sygnal.com/sa5-404)                  | Improve your 404 pages                                                                                        | <ul><li>Smart search trigger Webflow site search based on the Path the user was looking for </li></ul>                                                                                                                             |
| [SA5 Countup](https://attr.sygnal.com/sa5-countup)          | Animated count up to a set value. Triggers on scroll-into-view                                                |                                                                                                                                                                                                                                    |
| [SA5 UI](https://attr.sygnal.com/sa5-ui)                    | Special UI components                                                                                         | <ul><li>5-star ratings component ( display only ) </li></ul>                                                                                                                                                                       |
| [SA5 Demo](https://attr.sygnal.com/sa5-demo)                | Add special capabilities to your Webflow demo sites, such as links to the correct readonly link page.         |                                                                                                                                                                                                                                    |
| [SA5 Commerce](https://attr.sygnal.com/sa5-commerce)        | Simple commerce solutions for one-off purchases.                                                              | <ul><li>Paypal</li><li>Windcave</li></ul>                                                                                                                                                                                          |
| [SA5 Trigger](https://attr.sygnal.com/sa5-trigger)          | Custom trigger items and interactions from text links and buttons.                                            | <ul><li>Trigger interactions, such as pop-ups and modals from a link</li><li>Support CMS-driven scenarios </li></ul>                                                                                                               |

### Experimental Libraries & Features 🧪

*These are libraries we're experimenting with.*&#x20;

Now you can [sponsor the development](https://attr.sygnal.com/overview/sponsor) of those features, and they will be added to the library for everyone to use.&#x20;

| Library                                                         | Purpose                                                                                                                         | Features                                                    |
| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| [SA5 Calc](https://attr.sygnal.com/sa5-calc) 🧪                 | Calculate & sum items                                                                                                           |                                                             |
| [SA5 SEO](https://attr.sygnal.com/sa5-seo) 🧪                   | Some SEO tools                                                                                                                  | <ul><li>Noindex</li><li>Nofollow</li><li>JSON-LD </li></ul> |
| [SA5 Fixup](https://attr.sygnal.com/sa5-fixup) 🧪               | Fix a few things in Webflow editor and published sites.                                                                         |                                                             |
| [SA5 Logic](https://attr.sygnal.com/sa5-logic) 🧪               | Add logic capabilities using attributes, for conditional visibility and page structuring                                        | <ul><li>If</li><li>Switch</li></ul>                         |
| [SA5 Effects](https://attr.sygnal.com/sa5-effects) 🧪           | Experimental effects                                                                                                            | <ul><li>Depthmap ( fake 3d ) </li></ul>                     |
| [SA5 State](https://attr.sygnal.com/sa5-state) 🧪               | State management                                                                                                                |                                                             |
| [SA5 Booking](https://attr.sygnal.com/sa5-booking) 🧪           | Tag trigger elements easily to invoke 3rd party booking systems with the correct service, location, category, and staff member. | <ul><li>GetTimely</li><li>SimplyBook</li></ul>              |
| [SA5 Localization](https://attr.sygnal.com/sa5-localization) 🧪 | Various localization features                                                                                                   |                                                             |
| [SA5 Detect](https://attr.sygnal.com/sa5-detect) 🧪             | Detect and manipulate your page depending on how                                                                                |                                                             |
| [SA5 Table](https://attr.sygnal.com/sa5-table)                  | Add HTML tables                                                                                                                 |                                                             |

{% hint style="info" %}
We've also begun including our dev team and roadmap notes in these docs so that they are available for community comment and discussion. You can expand most features for a Future notes document.&#x20;
{% endhint %}

## Feature Requests

* Share your ideas in SA5's forum.&#x20;
* If you'd like a specific feature built that you already see on our design board here, you can sponsor a feature.  Features marked with&#x20;

## 2023 Review of SA5's Capabilities

{% embed url="<https://www.loom.com/share/f31effc1fa604bc7a701c25ebcda513f>" %}

## Navigating the Docs

* Documentation is organized by library&#x20;
* At the top of most libraries, you'll two important pages-
  * 🔍 **About this Library**, which gives you an overview of the capabilities
  * 🚀 **Quick Start**, which gives you the *library code* you need&#x20;
* Within each library the features are grouped separately
* A *lot of features* have **subpages**- make sure to click the **>** to expand those sections\
  ![](https://2168358812-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBcvwQ6TdfCVq8IuMako%2Fuploads%2FjiT7FqxY34CjlNuuqJKs%2Fimage.png?alt=media\&token=083fcd81-171f-4ff0-a325-a04394566958)
* 🧪 indicates EXPERIMENTAL items, which are **not yet available**&#x20;
* 📝 indicates NOTES, which are primarily for the dev team&#x20;
* ▶️ indicates VIDEO TUTORIALS, which we're just beginning to add

## **What’s new in v5?**

**The tech changes we've made in v5 open the doors to a lot of new capabilities.**

{% hint style="success" %}
If you are using v4, none of these changes will affect your current websites. \
Since all of our CDN URLs are version-locked, you’ll continue to use the same libraries you are using now until you upgrade to the newer versions, *someday*, if you want to.
{% endhint %}

### The v5 Tech Stack

* We’ve changing from a JavaScript ES6 codebase to TypeScript
* We’ve changed fully from CSS to SASS.
* We’ve eliminating all use of jQuery in the libraries.
* We’ve separated classes through the library into discrete source files
* We’ve bundled the distributed files differently for even greater efficiency
* We've integrated debugging features&#x20;

We’re excited about the tremendous capabilities the new stack gives us.

### **Switching to v5**

If you *choose to* switch to the upgraded v5 libraries at some point, you’ll see a few minor integration changes;

**Javascript** \<script> elements;

* Will be moved from the **before-/body** section to the **before-/head** section of your pages and site-wide code settings.
* The library URLs will change to point at the `/dist/` path, rather than the `/src/` path.
* You'll also notice that the `type=module` is dropped

**CSS** `<link>` elements will essentially remain unchanged, and will continue to point to `/dist/css/`

{% hint style="info" %}
All of this is covered in the docs for each feature, and we’ll update the docs as each library is migrated, so that you can upgrade them if you choose to.
{% endhint %}

#### What about attribute or code changes?

You can simply reference the new libraries *with no changes* to your *custom attributes* or existing features- and you’ll still get the enhanced features and performance benefits.

#### Will I need to upgrade to v5 eventually?

**Nope!** If you’re happy with things as they are and don’t need any of the new features, you don’t need to change a thing. v4 will continue to run indefinitely.&#x20;