🚀Quick Start | SA5 User Accounts
How to Easily Add SA5's User Info & Advanced Routing Enhancements to Your Webflow Memberships Site
Last updated
Was this helpful?
How to Easily Add SA5's User Info & Advanced Routing Enhancements to Your Webflow Memberships Site
Last updated
Was this helpful?
Was this helpful?
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.
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-group page. 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.
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.
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/[email protected]/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/[email protected]/dist/nocode/webflow-membership.js"
dev-src="http://127.0.0.1:4000/dist/nocode/webflow-membership.js"
devproxy-group="sa5"
></script>