Logged-In User Info ❺
In Webflow Memberships, get details of the currently logged-in user, anywhere in your site.
Last updated
Was this helpful?
In Webflow Memberships, get details of the currently logged-in user, anywhere in your site.
Last updated
Was this helpful?
NOTE: because User Info is a complex module in Sygnal Attributes, documentation is split in to several pages. Make sure to find and expand this item in the left-side nav, and explore the sub-pages below this one, they contain important configuration information.
One of the most sought-after capabilities in Webflow User Accounts is the ability to access information about the currently logged in user, anywhere in your site.
Use cases include;
Personalize your site by displaying the user's name in the top navigation of all pages
Auto-fill the logged-in user's email in a form email field, so they don't have to type it every time.
Have a unique identifier for the user, for integrating into external systems via logic, script, or automation.
Use custom user field data anywhere in your site to personalize their experience... favorite color, darkmode, calculations based on their age, or gender... whatever you like.
Customize any page of your site to specific access groups, so that certain elements only appear to those who should see them.
Features;
Get the current user's email, name, and marketing opt-in status
Get the Webflow UserID ( experimental ).
Get an additional unique, User-specific alternate ID which can be used for system integrations
Get
Get
Heavily optimized, with a multi-layered, asynchronous load approach to assembling the user data.
Limitations;
For custom user fields, the File field type is unsupported for now
Currently this library depends on the User Account screen in order to access user data and compose the user object. You can do what you want with your User Account page however those user fields must exist in the page ( even hidden ) in order for this library to work.
Read-only. The library is designed to read user data, but not to update it.
Here's a new cloneable, specific for SA5-
When a user is logged in, the User Info is constructed and the object contains this information;
name
- The user's name, as they've specified in account info
email
- The user's email address
name_short
- A pseudonym, composed from the email's name@ portion
name_short_clean
- The name_short pseudonym, without the @
name_short_tcase
- The name_short_clean pseudonym, title cased
user_id
- EXPERIMENTAL. The Webflow user ID.
user_id_alt
- A unique ID for the User. This is not the Webflow Membership's ID, and cannot be used with Webflow's API - but is equally usable for 3rd party system integration and tracking.
data
- A map of the user's custom fields. These are named using Webflow's internal data field names, which is based on your individual user field slugs.
Any of these can be accessed directly from the User object, which is provided in the callback function as soon as it is available.
You can automatically data-bind user information to any element you like, using custom attributes.
Simply use the wfu-bind
custom attribute, with $user.
and the value you want.
For example;
To data-bind the User's email address to an input field, add the custom attribute;
wfu-bind = $user.email
To data-bind the User's name to a text field, add the custom attribute;
wfu-bind = $user.name
To data-bind a custom user field, named City ( slug city
), add the custom attribute;
wfu-bind = $user.data.city
If you want to access the user object in code, you can do this most easily in the callback function, where the user object is already passed. Here you know the user object has been initialized and contains data, so it's the best place to access it.
Drop in the script below. User information loads automatically, and asynchronously.
If a user is logged in, any data-bound fields will be populated automatically. Your callback JS function will be also called, and you can do what you want with the user's available info in script.
IMPORTANT: This library depends on Webflow's User Account page ( at/user-account
) as the mechanism to access and load User data.
If you have removed any fields or need to add custom fields, you can add these in using the right side designer menu when the form is selected on the User Account page.
We protect user data. We consider all user data to be sensitive and it's important to treat it carefully.
Even basic contact information should never be kept in the browser cache longer than necessary. To maximize security, we build the user information object on first request, and then dispose of it as soon as the browser tab is closed.
In our testing, this gives the best user data security, while maximizing your site's performance- both of which are primary concerns for us and our clients.
Questions? Let us know - [email protected].
In Webflow Memberships, the only unique, persistent identifier we have access to client-side is the user's email address, which can not be changed.
However as this absolutely qualifies as PII, we do not want to use this as an identifier for integrating with other external systems.
To provide for this, we manufacture an Alt User ID as a one-way hash of the user's email. Use this when you need to "attach" data in an external system.
Callback on login
Login on external system, retrieve data
Callback on first login
Setup account on external system
Inactivity logout timer settings
Login activity logging
IMPORTANT: If you are upgrading from SA4, it's important to note that the code is now completely different and much simpler.
It's now in the site-wide before HEAD rather than the before BODY code area
You no longer include the data-binding library
You do not need to initialize the data-binding library
The script is no longer type=module
, and it needs defer
Don't blindly copy and paste URLs, you're much better to copy the code block here, and replace the old one directly. If you are using the custom callback feature, it is redesign as well, see STEP 3 for that new code.
wfu-bind
attribute to automatically load data into DOM elements SA5's Data-Binding feature can access logged-in user info as well, and you can easily data-bind it to text elements, titles, spans, form INPUT elements, and more. You can use this to, for example, automatically populate a form field with the logged-in User's email address.
See above for details.
Place this also in the before HEAD of your site, just after the library code above. If it's page-specific, you can instead place it on the before HEAD of specific pages if you like.
You should be able to have multiple instances of this code block, for example site-wide, and page specific, at the same time - however this has not been production tested. Test it carefully if you want to experiment with this approach.
All basic user info fields MUST exist, including Name, Email, and the Opt-in checkbox. These fields may be hidden, but they MUST exist in the page. Custom User Data fields must also exist if you want them, see for details.
First, add the library as detailed in .