Get Logged-In User Info
In Webflow Memberships, get details of the currently logged-in user
This is phase three of a developing feature. Currently it provides access to the logged-in User's name, email address, custom user fields and a user-unique alternate ID.
One of the most sought-after capabilities in Webflow Memberships BETA is the ability to access information about the logged in user.
Use cases include;
- Personalize your site by displaying the user's name
- 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.
Features;
- Get the current user's email
- Get the current user's name ( released in v4.4 )
- Get a unique, User-specific alternate ID which can be used for system integrations
- Get access groups ( coming soon )
- Heavily optimized, with a multi-layered, asynchronous load approach to assembling the user data.
Limitations;
- Changes to user information, e.g. changing the user's name on the Account Info page won't be reflected in the user object until the next login
- For custom user fields, the File field type is unsupported for now
- Currently the Webflow UserID is not easily available, we're looking at efficient solutions for this.
New cloneable, specific for v4.7-
When a user is logged in, the User Info object contains this information;
name- The user's name, as they've specified in account infoemail- The user's email addressname_short- A pseudonym, composed from the email's [email protected] portionname_short_clean- The name_short pseudonym, without the @name_short_tcase- The name_short_clean pseudonym, title caseduser_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
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. 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.
async function myCallback(user) {
alert(user.email); // Show the current user's email
alert(user.data["city"]); // Show the current user's custom city field
}
Drop in the script below. User information loads automatically, and asynchronously.
If a user is logged in, your callback JS function will be called, and you can do what you want with the user's available info.
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]
Add this script to the custom code BODY of your site.
<!-- Sygnal Attr | User Info -->
<script type="module">
import { WfuUserInfo, WfuUser } from 'https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/modules/webflow-membership.js';
import { WfuDataBinder } from 'https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/modules/webflow-databind.min.js';
$(function() {
var membership = new WfuUserInfo({
userInfoUpdatedCallback: myCallback
}).init();
});
async function myCallback(user) {
// Automatic data-binding using attributes
var dataBinder = new WfuDataBinder({
user: user
}).bind();
}
</script>
Note the 3 parts here;
- 1.The library imports
- 2.The library setup and configuration, which happens on DOM ready
- Which includes your callback function name
- 3.Your callback function, which data binds that user info
The Sygnal Attributes DataBinder can automatically make use of logged-in user info as well, and data-bind it to DOM elements.
You can use this to, for example, automatically populate a form field with the logged-in User's email address.
See above for details.