Logged-In User Info ❺

In Webflow Memberships, get details of the currently logged-in user, anywhere in your site.

Questions? Comments? Suggestions? Join the Sygnal Attributes forum on discourse.

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 custom user fields

• Get access groups

• 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.

Demonstration

Here's a new cloneable, specific for SA5-

Get the Current User's Info in Memberships - WebflowGet the Current User's Info in Memberships

Accessing User Information

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.

Data Binding

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

The $user convention is used only in the wfu-bind custom attribute. If you want to access the user object in JavaScript, see the next section.

Accessing the User object in JavaScript

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.

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['userInfoChanged', 
  (user) => {
    console.log("USER INFO CHANGED", user); 
  }]); 
</script> 

Usage Notes

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.

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 Custom User Fields for details.

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.

Data Security

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 - [e-mail].

Personally Identifiable Information ( PII )

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.

Future

• 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

Getting Started ( NOCODE )

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.

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Use the 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.

STEP 3 - ( OPTIONAL ) Add custom code to use User Info specially

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.

<!-- Sygnal Attributes 5 | Memberships | User Info Changed Event -->
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['userInfoChanged', 
  (user) => {
    console.log("USER INFO CHANGED", user); 
  }]); 
</script> 

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.