State ❺🧪

Track, store, and apply website state for a better UX.

NOT YET AVAILABLE

Goals

• Arbitrary state definition

• Multi-part storage

  • Ability to store some state items temporarily, others long-term

  • Secure storage options

  • Reporting options

• Apply state

  • Set CSS vars

    • ? Subsets of custom CSS

    • ? Add global classes

  • Conditional visibility

  • Set GTM data-layer vars

  • Custom JS

    • On-load event handlers

    • On-change event handlers, per change type

  • Data-binding of state data

    • Bind to hidden form fields for submission

• Simple setup

  • No need to define a global state object

  • However options to tag state items with specific handling rules

    • Storage, longevity, security

Storage & retrieval;

• Local;

  • Session storage ( this session, this tab only )

  • Cookie storage ( store for specific duration )

  • Local storage ( long term )

• Remote;

  • DB, API or KV store

  • Identity system storage

    • User Account vars

    • Memberstack vars

Behavior;

• Smart as to whether state can be preserved long-term

  • i.e. for a var targeted as long-term,

Use Cases

• Light mode / dark mode

• Remembering form data-entry progress for long forms

• Sidebar open-closed e.g. https://discourse.webflow.com/t/enabling-binary-conditions-using-webflow-variables-and-local-storage/270704

• Other UX personalization preferences

• Referral tracking

• Shopping cart

• Likes / favorites

• Seen before

• Popup closed

• CTA completed

  • e.g. email collected, so don't show it again

• ? Accessibility states

• Loyalty

  • Points system, for e.g. purchase, actions, repeat visits

  • Rewards

• ? Simple points-based e-com

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply wfu-decode to the HTML Embed element you want to decode

See above for details.