How to Set Profile Avatars for Logged in Users with MemberStack

In this tutorial, we're going to learn how to set profile avatars for logged-in users with MemberStack in Webflow. MemberStack is the number one way to create membership-based sites for your Webflow build. This hack will allow a logged-in user to select their profile avatar, save it in metadata, and show it every time they log into the site. This adds a nice extra level of personalization to your MemberStack site.

Creating MemberStack Account and Customizing Avatars

The first step is to create a MemberStack account and then customize yourself visually through an avatar on your live site. These processes should ideally be on two different pages. You might have a pop-up modal or a page to sign up, and then on the success page or the account page, you'll ask the user to set their avatar. The avatar information will be stored inside metadata so that when the user signs out, reloads the page, or uses a different browser, the selected avatar will still be displayed.

To get started, navigate to the live example. You'll notice that when not logged in, clicking on the avatar does nothing. Once signed up, you can choose a preset avatar. It's recommended to use custom avatars rather than the logos applied in the example. The avatars are updated in real-time and saved in metadata, ensuring that even after signing out and signing back in, the selected avatar is displayed.

Applying Classes in Webflow

In the Webflow designer, it's essential to apply classes to the elements involved in the avatar selection. For the image, you'll need to create a class for the parent wrapper holding the image. It's crucial to ensure that the image is defined as an image and not a div block with a background.

Two important classes to use are "hack 35 like item" and "hack 35 set avatar" for the click target and the image class, respectively. The "hack 35 like item" is the click target, and inside it, you'll find the "hack 35 avatar" where the avatar selection process occurs. When a user clicks on the like item, the script will search for the image with the class "hack 35 avatar" and set the source of that image in metadata.

Implementing JavaScript in Webflow

Before the closing body tag in Webflow, the MemberStack script and the script handling the avatar work are inserted. It's important to ensure that the MemberStack script used is specific to your account.

The JavaScript involves an if statement to check if the member is logged in. If they are, another if statement checks if they have an avatar saved to their account. If an avatar is found in the metadata, the script sets their avatar. If no metadata for the avatar is found, a default avatar will be displayed.

Enabling User Avatar Selection

To enable users to set their avatars, a script is added to the page where the avatar selection occurs, typically the account page or the success page. This script allows users to click on the avatar and instantly update it. Additionally, it ensures that the selected avatar is saved to the user's metadata. The script targets the click target for the avatar, stores the image attribute to a variable, and then sets the profile display avatar with the selected image.

Redirecting After Signup

The last part of the setup involves redirecting the user back to the same page after they sign up. However, this specific part can be removed when setting up the avatar.

Conclusion

Setting profile avatars for logged-in users with MemberStack in Webflow adds a personal touch to any membership-based website. It allows users to interact visually with the platform and reinforces brand engagement. By following the steps outlined in this tutorial, you can easily implement profile avatars for logged-in users on your MemberStack site.

To further understand how these hacks work and use them on your live site, you can clone the entire hacks project available for cloning. Additionally, keep an eye out for new hacks by subscribing to the YouTube channel. For those interested in receiving email updates on new hacks, signing up at finsweet.com/hacks-updates is recommended. Lastly, if there's a specific hack you'd like to request or suggest for Webflow, you can submit your ideas at finsweet.com/hacks-requests.

With this tutorial, you should now be equipped with the knowledge and tools to enhance user personalization through profile avatars on MemberStack sites in Webflow.