🚀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

IMPORTANT We've made some enhancements to SA5 Core in v5.5.0. If you are already using other SA5 Libs, please make certain to upgrade them to at least v5.5.0 as well to ensure cross-compatibility.

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/[email protected]/dist/css/webflow-membership.css"> 
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/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

The User Info library can be considered as 3 feature sets.

1. Basic user info like name, email, and opt-in is automatically accessible once the library is installed.

2. Custom user fields requires special setup on your /access-group page. Make sure to read that section if you want to access that data.

3. Access groups also requires a special setup. Make sure to read those pages if you want access to your access group data.

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.

Users who are already logged in will need to log out, and log in again in order for the library to refresh their data.

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 Devmode and Sygnal DevProxy. These make it easier to develop and test code changes with Webflow sites.

<!-- Sygnal Attributes 5 | Memberships --> 
<link rel="stylesheet" 
  href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-membership.css"
  dev-href="http://127.0.0.1:4000/dist/css/webflow-membership.css"
  group="SA5 User Accounts"  
  > 
<script defer 
  src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/nocode/webflow-membership.js" 
  dev-src="http://127.0.0.1:4000/dist/nocode/webflow-membership.js"
  group="SA5 User Accounts"  
  ></script>