๐Ÿš€Quick Start | SA5 User Accounts

How to Easily Add SA5's User Info & Advanced Routing Enhancements to Your Webflow Memberships Site

How to Add the Library

Add this script to the site wide custom code HEAD area of your site.

<!-- Sygnal Attributes 5 | User Accounts --> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/dist/css/webflow-membership.css"> 
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/dist/nocode/webflow-membership.js"></script>
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipConfig', 
  (config) => {
    // Apply any configuration settings here
    // such as access groups 
    return config;
  }]);
</script>

Once you've added the library, both the User Info and the Advanced Log-In & Sign-Up Flow features are available to use.

Current User Info Quick Start

User info works automatically behind the scenes, and gathers data when a User first logs in.

To access User Info, you can use the data-binding feature on an element, such as a form field. Add a custom attribute of wfu-bind with the DSD you want to the element you want data-bound.

For example, this custom attribute setting on an INPUT element will data-bind the user's email;

wfu-bind = $user.email

See SA5's full list of data source descriptors for User Info here.

If you want to use the user's info in custom code, use the callback option, and you get the full user object.

Log-In & Sign-Up Flow Quick Start

We use the same library above for this module.

However it requires configuration which is done through a configuration callback.

See here for the code to configure log-in & sign-up flow.

Add the custom attributes for the features you need, described in each feature separately.

SA5 Library Developers

For SA5 library developers, use the extended syntax to support Sygnal DevProxy.

<!-- Sygnal Attributes 5 | Memberships --> 
<link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/dist/css/webflow-membership.css"
  dev-href="http://127.0.0.1:4000/dist/css/webflow-membership.css"
  devproxy-group="sa5"
  > 
<script defer 
  src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.6.0/dist/nocode/webflow-membership.js" 
  dev-src="http://127.0.0.1:4000/dist/nocode/webflow-membership.js"
  devproxy-group="sa5"
  ></script>

Last updated

Was this helpful?