🚀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.
Basic user info like name, email, and opt-in is automatically accessible once the library is installed.
Custom user fields requires special setup on your
/access-grouppage. Make sure to read that section if you want to access that data.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
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.
Last updated
Was this helpful?