SA5 | Sygnal Attributes | Designed for Webflow
Buy Us a Beer!Community ForumMicro-Consulting
  • โžก๏ธGithub Repo
  • ๐Ÿ‘ซSygnal Attributes Community
  • ๐Ÿ“˜Overview
    • Sygnal Attributes v5
    • How to Add Custom Code
    • What is Sygnal Attributes?
    • Sponsor a Feature โœจ
    • What's New?
    • Library Modules
    • Technical Notes & Goals
      • CSS Media Queries
      • Callback Handlers
      • Custom Attributes
    • Documentation
    • Configuration Blocks
      • Configuration Block Specification
    • Preloaders
    • Breakpoints
    • Component Support ๐Ÿงช
    • Sygnal Attributes ( SA5 ) Support
    • Dev Team Notes
    • GDPR
    • SA6
    • Triggers, Events & Actions
      • Triggers
        • Click Triggers
        • Scroll Into View Trigger
        • Hover Trigger
        • Timer Trigger
        • Form Triggers ๐Ÿงช
          • Form Submit Trigger ๐Ÿงช
        • Exit Intent Trigger ๐Ÿงช
        • ECommerce Triggers ๐Ÿงช
        • Inactivity Trigger ๐Ÿงช
        • Page Load Trigger ๐Ÿงช
        • Url Hash Trigger ๐Ÿงช
        • Gated Trigger ๐Ÿงช
        • Link Triggers ๐Ÿงช
        • Reactiv Triggers ๐Ÿงช
        • Interaction Trigger ๐Ÿงช
      • Events
        • Namespacing
        • Event Data
        • Link-Based Triggers ๐Ÿงช
        • Breakpoints ๐Ÿงช
        • Persistent Events ๐Ÿงช
        • Gated Events ๐Ÿงช
      • Actions
        • Click Actions
        • Alert Action
        • Visibility Actions
        • Scroll Into View Action
        • Video Actions ๐Ÿงช
        • Audio Action ๐Ÿงช
        • Class Adder Actions ๐Ÿงช
        • Tab Element Actions ๐Ÿงช
        • Interaction Actions ๐Ÿงช
        • Form Actions ๐Ÿงช
        • Navigate Actions ๐Ÿงช
        • Script Actions ๐Ÿงช
    • SA5 Core
      • Handlers
      • Controllers
      • Core Processing
      • Core Technical Notes
        • Element Tracking
  • ๐Ÿ“˜sa5-cache
    • ๐Ÿ”About SA5's Cache Lib
    • Data Caching โบ
      • Cache Setup v4
  • ๐Ÿ“˜sa5-socialshare
    • ๐Ÿ”About SA5's Social Share Lib
    • ๐Ÿš€Quick Start | SA5 Social Share
    • Email Social Share โบ
  • ๐Ÿ“˜sa5-detect ๐Ÿงช
    • ๐Ÿ”About SA5's Detect Lib
    • ๐Ÿš€Quick Start | SA5 Detect
    • Page
    • User Agent Detection
    • Geolocation Detection ๐Ÿงช
      • Cache Setup v4
    • Detect Incognito Mode
  • ๐Ÿ“˜sa5-analytics
    • ๐Ÿ”About SA5's Analytics Lib
    • ๐Ÿš€Quick Start | SA5 Analytics
    • A/B and Multivariate Testing
    • UTM Tracking
    • Rel Attributes
    • GA Events
    • GTM Events โบ๐Ÿงช
      • Important dataLayer Notes
      • Facebook
      • Google Analytics ( GA4 )
      • Future
  • ๐Ÿ“˜sa5-data
    • ๐Ÿ”About SA5's Data Lib
    • ๐Ÿš€Quick Start | SA5 Data & Data-Binding
    • Usage Notes
    • Concepts & Terminology
      • Data Paths
      • Complex Data Sources
      • Developing Concepts ๐Ÿ“
    • Data Sources ( Simple )
      • URL Querystring Data Source
      • URL Part Data Source
      • User Info Data Source
      • Cookies & Web Storage Data Sources ๐Ÿ“
      • Global Data Source ๐Ÿงช
    • Data Sources ( Complex )
      • RichText Data Source ๐Ÿงช
      • Defining Custom Data Sources
      • Collection List Data Source ๐Ÿ“
        • Developing Concepts | Collection List Data Sources
    • Data Binding
      • Conditional Visibility
      • Form Elements ๐Ÿ“
      • Templates & Macro Expansion ๐Ÿ“
      • Developing Concepts on Data-Binding ๐Ÿ“
      • Macro Expansion
        • Macro Expansion
        • Count Items
      • Preloaders
    • SA5 Data ( HSON ) โบ๐Ÿงช
      • SA5 Data BETA Kit
      • JSON Data Variants
    • Advanced Use
    • SA5 Data JS API
    • Future ๐Ÿ“
      • External Data
      • One-Way v. 2-way Bindings
      • Reactive Bindings
      • Data Sources ( External ) ๐Ÿงช
        • Google Sheets Data Source โ›”
        • GitHub Data Data Source โ›”
  • ๐Ÿ“˜sa5-forms
    • ๐Ÿ”About SA5's Forms Lib
      • SA5 Forms Roadmap
    • ๐Ÿš€Quick Start | SA5 Forms
      • SA5 Forms Future
    • Data-binding Form INPUTs & SELECTs โบ
    • Smart Form Webhook Handler โบ
      • Form Webhook Handler JS API Events
      • n8n Handler
      • โ–ถ๏ธBasin Handler
        • File Uploads
        • Future
      • โ–ถ๏ธMake ( Integromat ) Handler
      • Future
    • Form Data Validation
      • Invalid Field Indicators (Real-Time) ๐Ÿงช
      • Invalid Field Indicators on Submit Attempt ๐Ÿงช
      • Email validation
    • Remove Unchecked Checkboxes โœจ
    • Preserve Line Breaks
    • Form IP Info โบ
    • File Uploads ๐Ÿ“
    • Custom Form Submit Button
    • File Downloads
    • Form Select Element
    • SA5 Forms API
    • Dynamic Forms
    • Form Success Redirect ๐Ÿงช
    • Show / Hide Password ๐Ÿงช
  • ๐Ÿ“˜sa5-html
    • ๐Ÿ”About SA5's HTML Lib
      • Webflow Interactions
    • ๐Ÿš€Quick Start | SA5 HTML
    • Advanced Element Sorting โบ
    • Advanced Element Filtering โบ
      • Useful Filtering Examples
    • Dynamic URLs ๐Ÿงช
      • Future
    • Dynamic Attributes
      • Future
        • Smart Attributes ๐Ÿงช
        • Prefix, Postfix, and Formatted Attributes ๐Ÿงช
    • Scroll to Section
    • Breakpoints โบ
    • Limit Items by Breakpoint โบ
      • Designer CSS Embed
    • Limit Items to Multiple-of โบ
    • Numeric Sequencing โบ
    • Truncate Text w/ Ellipsis โบ
    • Encoded Email
    • Hide Section w/ Empty Collection Lists โบ
    • Download File โบ
    • Decode HTML โบ
    • Markdown โบ
      • Themes
    • Transform โบ๐Ÿงช
    • Code Formatting โบ๐Ÿงช
    • CMS Code Injection โบ๐Ÿงช
    • Responsive Tables โบ๐Ÿงช
    • Text Formatting โบ๐Ÿงช
    • Components โบ๐Ÿงช
      • Component Object Positioning
    • Auto-Size IFRAMEs ๐Ÿงช
    • Switch Case โบ๐Ÿงช
    • Lazy Load
    • Gallery ๐Ÿงช
    • Scroll Anchor
  • ๐Ÿ“˜sa5-layout
    • ๐Ÿ”About SA5's Layout Lib
      • Future
    • ๐Ÿš€Quick Start | SA5 Layout Lib
    • Layout โบ
      • Tabs Layout Handler
      • Slider Layout Handler ๐Ÿงช
      • Future
    • Element Groups โบ๐Ÿงช
    • Equal Height Rows โบ๐Ÿงช
  • ๐Ÿ“˜sa5-logic ๐Ÿงช
    • ๐Ÿ”About SA5's Logic Lib
      • Future
    • ๐Ÿš€Quick Start | SA5 Logic Lib
    • If โบ๐Ÿงช
    • Switch โบ๐Ÿงช
  • ๐Ÿ“˜sa5-booking
    • ๐Ÿ”About SA5's Booking Lib
    • ๐Ÿš€Quick Start | SA5 Booking Lib
    • GetTimely โบ๐Ÿงช
    • SimplyBook โบ๐Ÿงช
  • ๐Ÿ“˜sa5-richtext
    • ๐Ÿ”About SA5's Rich Text Lib
      • Future
    • ๐Ÿš€Quick Start | SA5 Rich Text
    • Nested Lists โบ
      • Legacy Feature Notes
    • GitHub Gists โบ
      • โ–ถ๏ธVideo Tutorials
      • Why Gist?
      • Technical Notes
      • Future
    • Code Blocks ๐Ÿงช
      • Wrapping Code Blocks
      • Copy Code to Clipboard
    • Excalidraw ( SVG Embeds )
    • URL Expanders ๐Ÿงช
    • Annotations ๐Ÿงช
    • Text SPAN Formatting ๐Ÿงช
    • Lightboxes ๐Ÿงช
      • Future
    • Embeddables
    • Richtext โบ๐Ÿงช
      • CSS Isolation
    • Blockquotes
    • Call-Outs
    • Responsive Inline Images
  • ๐Ÿ“˜sa5-table
    • HTML Tables
  • ๐Ÿ“˜sa5-kiosk ๐Ÿงช
    • ๐Ÿ”About SA5's Kiosk Lib
    • ๐Ÿš€Quick Start | SA5 Kiosk
    • Usage Notes
    • Kiosk Hardware & Browser Setup
    • Kiosk Base ๐Ÿงช
    • Inactivity Timer
    • Display Mode
    • Technical Notes
    • Future
      • Smart Watch Notes
    • ToDo
  • ๐Ÿ“˜sa5-hotkeys
    • ๐Ÿ”About SA5's Hotkeys Lib
    • ๐Ÿš€Quick Start | SA5 Hotkeys
    • Hotkeys โบ
      • Future
  • ๐Ÿ“˜sa5-commerce
    • Payment Providers
    • Price in Local Currency ๐Ÿงช
  • ๐Ÿ“˜sa5-demo
    • Webflow Preview Link
  • ๐Ÿ“˜sa5-ui
    • ๐Ÿ”About SA5's UI Lib
    • ๐Ÿš€Quick Start | SA5 UI
    • 5-Star Ratings Component โบ
  • ๐Ÿ“˜sa5-cro
    • ๐Ÿ”About SA5's CRO Lib
    • ๐Ÿš€Quick Start | SA5 CRO
    • Conversion Tracking Event
  • ๐Ÿ“˜sa5-url
    • ๐Ÿ”About SA5's Url Lib
    • ๐Ÿš€Quick Start | SA5 Url
    • Query Param Passthrough
      • Future
    • External Link Targeting
    • Relative Link Fixups โ›”
  • ๐Ÿ“˜sa5-video
    • ๐Ÿ”About SA5's Webflow Video Lib
    • ๐Ÿš€Quick Start | SA5 Video
    • Background Video Poster
    • Triggers, Events & Actions
    • YouTube Hide Related Videos [BETA]
      • Styling Options
      • Future
    • Media Pop-Ups ๐Ÿงช
    • Video Player ( Direct )
    • Video Controller File Format
    • Media Controller
    • Video Player Controller
      • Video Playback Spec ๐Ÿงช
      • YouTube Video Data ๐Ÿงช
      • Loom Video Data ๐Ÿงช
  • ๐Ÿ“˜sa5-elements
    • ๐Ÿ”About SA5's Elements Lib
      • Elements Lib Future Plans
    • ๐Ÿš€Quick Start | SA5 Elements
    • Element Actions ๐Ÿงช
    • Tabs Element
      • Tabs Future Plans
      • Triggers, Events & Actions ๐Ÿงช
      • Tabs API
    • Slider Element
      • Triggers, Events & Actions ๐Ÿงช
      • Slider JS API
      • Slider JS API Events
      • Advanced Slider Use
      • Future
    • Deck Controller Element โ›”
    • Button Element
      • Triggers, Events & Actions ๐Ÿงช
    • Dropdown Element
      • Triggers, Events & Actions ๐Ÿงช
      • Future
    • Lightbox Element
      • CMS Lightbox + Groups
      • CMS Lightbox + Captions
        • Popular Lightbox Setups
      • Lightbox JS API
      • Triggers, Events & Actions ๐Ÿงช
      • SA5 Lightbox Future
    • Radio Button Element ๐Ÿงช
      • Triggers, Events & Actions ๐Ÿงช
    • Autocomplete Element
      • Styling
      • Future
    • Accordion Element
      • Accordion Future Plans
      • Triggers, Events & Actions ๐Ÿงช
      • Accordion API
    • Lottie Element โบ๐Ÿงช
      • Triggers, Events & Actions ๐Ÿงช
    • Locale Switcher Element โบ๐Ÿงช
      • Technical Notes
      • JavaScript API
  • ๐Ÿ“˜sa5-format
    • ๐Ÿ”About SA5's Format Lib
    • ๐Ÿš€Quick Start | SA5 Format
    • Format Numbers & Currencies โบ
    • Format Dates โบ
      • Use Cases
        • Custom Format a Date
        • Localize a Date
        • From and To Relative Timespans
        • Age
      • Future - Date formatting
      • Setup Your Date Field for Good Parsing
  • ๐Ÿ“˜sa5-user-accounts
    • ๐Ÿ”About SA5's Webflow User Accounts Lib
    • ๐Ÿš€Quick Start | SA5 User Accounts
    • Logged-In User Info โบ
      • Custom User Fields
      • Webflow's UserID
      • Access Groups
        • Using Access Groups for Conditional Visibility
        • Using Access Groups for Routing โบ๐Ÿงช
      • The User object
        • The User Object Lifecycle
      • Tips & Best Practices
      • User Info FAQs
      • Troubleshooting
      • โฉFuture Plans & Ideas
      • BETA testing
      • Technical Notes - Interfaces
      • Future Development
    • Advanced Log-In & Sign-Up Flow โบ
    • Conditional Element Display โบ
    • Expand Login Button โบ
  • ๐Ÿ“˜sa5-track
    • ๐Ÿ”About SA5's Tracking Lib
    • ๐Ÿš€Quick Start | SA5 Tracking
    • Webflow Cookies & Storage Tracking โบ
      • Conditional Element Visibility
      • Tracking Page Visits
      • Tracking Button Clicks
      • Track Query String Params
      • Track Checkbox State
      • Cloneable Demo
    • SA5 Referer Tracking โบ๐Ÿงช
    • Future Plans
      • Likes & Favorites Tracking โบ๐Ÿงช
      • Recently Viewed Tracking โบ๐Ÿงช
  • ๐Ÿ“˜sa5-modals
    • ๐Ÿ”About SA5's Webflow Modals & Popups Lib
    • ๐Ÿš€Quick Start | SA5 Modals & Popups
    • Webflow Popups & Modals
      • Triggers
      • Gating Modals
      • Modal Design & Styling Notes
      • Simple Modals v. Custom Modals
      • Modal JS API
      • Page-Specific Modal Control
      • Common Configurations
      • Pro-Tips
      • SA5 Modals Roadmap & Future
        • Future Attributes
        • Future Triggers
    • Dismissible Elements
    • Triggers, Events & Actions ๐Ÿงช
    • Webflow Modals & Popups Auto-Open and Auto-Close
    • Side Panels ๐Ÿงช
  • ๐Ÿ“˜sa5-selectcustom
    • ๐Ÿ”About SA5's Custom Form Select Lib
    • ๐Ÿš€Quick Start | SA5 Custom Form Select
    • Triggers, Events & Actions ๐Ÿงช
    • Custom Form Select โบ๐Ÿงช
  • ๐Ÿ“˜sa5-gallery
    • ๐Ÿ”About SA5's Gallery Lib
    • ๐Ÿš€Quick Start | SA5 Gallery
    • Gallery โบ๐Ÿงช
      • Simple Collage Layout Engine
  • ๐Ÿ“˜sa5-effects
    • ๐Ÿ”About SA5's Effects Lib
    • ๐Ÿš€Quick Start | SA5 Effects
    • Depthmap (Fake 3D) Image โบ๐Ÿงช
    • Image Zoom
  • ๐Ÿ“˜sa5-fixup
    • Viewport META
    • Webflow Fixups โบ
  • ๐Ÿ“˜sa5-countup
    • CountUp Animated Numbers
  • ๐Ÿ“˜sa5-seo
    • ๐Ÿ”About SA5's SEO Lib
    • ๐Ÿš€Quick Start | SA5 SEO
    • Noindex โบ๐Ÿงช
    • Nofollow โบ๐Ÿงช
    • JSON-LD โบ๐Ÿงช
      • JSON-LD Article โบ๐Ÿงช
      • JSON-LD Video โบ๐Ÿงช
      • JSON-LD Course Info โบ๐Ÿงช
      • JSON-LD WebPage
      • JSON-LD Sitelinks Searchbox โบ๐Ÿงช
  • ๐Ÿ“˜sa5-core
    • SA5 Core โบ
    • Webflow Designer Support โบ
  • ๐Ÿ“˜sa5-embeds
    • ๐Ÿ”About SA5's Embeds Lib
    • ๐Ÿš€Quick Start | SA5 Embeds
    • Table Embeds โบ
      • Google Doc Table Embeds
        • Styling Table Embeds
      • Google Sheets Table Embeds
      • Future
  • ๐Ÿ“˜sa5-state
    • ๐Ÿ”About SA5's State Lib
    • ๐Ÿš€Quick Start | SA5 State
    • State โบ๐Ÿงช
      • State Handlers
        • SA5 State Handler
        • MobX
        • Redux
  • ๐Ÿ“˜sa5-localization
    • ๐Ÿ”About SA5's Localization Lib
    • ๐Ÿš€Quick Start | SA5 Localization
    • Localization Functions
    • Locale URLs
    • Sort locales in the order you choose
  • ๐Ÿ“˜sa5-404
    • ๐Ÿ”About SA5's 404 Lib
    • ๐Ÿš€Quick Start | SA5 404
    • 404 Smart Search โบ
  • ๐Ÿ“˜sa5-calc
    • ๐Ÿ”About SA5's Calc Lib
      • Future
    • ๐Ÿš€Quick Start | SA5 Calc
    • Count & Sum Items โบ
      • Source Types
      • Calc Use Cases
  • ๐Ÿ“˜sa5-trigger โ›”
    • ๐Ÿ”About SA5's Trigger Lib
    • ๐Ÿš€Quick Start | SA5 Trigger
    • IX Triggers ( Legacy ) โบ
  • ๐Ÿ“˜Deprecated Features
    • Repeater โ›”
    • Lipsum Generator โ›”
    • JSON Formatter โ›”
Powered by GitBook
On this page

Was this helpful?

  1. Overview
  2. Technical Notes & Goals

Callback Handlers

Callback Handlers used to configure and extend SA5 module functionality.

SA5 uses callbacks for two purposes;

  1. Specifying configuration options, for modules which have them

  2. Notifying custom code handlers of state changes that the site owner may want to specially handle

An example callback;

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipRoutingConfig', 
  (config) => {
  
    // ... your custom code here ... 

    return config;
  }]); 
</script>

Defined Callbacks

Callback Name
Module
Use

getMembershipRoutingConfig

Memberships

userInfoChanged

Memberships

breakpointChanged

HTML

Last updated 1 year ago

Was this helpful?

when new user information is loaded

on a breakpoint change

๐Ÿ“˜
Configuration
Event Notification
Event Notification