NoCode Hacks

Public member profiles with Webflow and Memberstack?

2020-09-20
Igor Voroshilov

I don’t think that people reading this article have a question of “why would I need a public user profile?”, obviously. So let's get straight to the point of how to build it with my 3 favourite tools:

Webflow - #1 website builder in the world

Memberstack - the easiest way to have a user logged in on your site

Zapier - pure magic connecting everything together

Warning❗️

If you are a professional developer who writes code to build things, please don’t read this article, because the way I manage databases will probably drive you mad and you may have a heart attack💔. My method of having 2 databases will look like a savage to you.

It actually is a bit of savage🙄

Anyway, NoCode fellows, let’s start!🚀

Basic principle

So, the thing is that we are going to have 2 databases - Memberstack and Webflow CMS - synchronized with each other through Zapier.

The reason we need it is that although Memberstack stores your user’s data, which theoretically can be used for displaying it in a public profile, the whole service is actually built around private profiles and there is no way to display member’s data on public.

⚠️Memberstack’s data is accessible only to the member himself during his own session on your website.

On the other hand, Webflow CMS data is built in the way to be accessible to the public - like product, blog post or… yes, member profile!

So, the trick is to take private data from Memberstack and make it public with Webflow CMS (Pure evil hack😈)

Here is what we need to do:

A Webflow form to create profile

Build a form, which will be accessible by your user so he would put necessary information for his public profile. Pre-populate hidden fields with such information as member id (required) and whatever Memberstack data you want to pass through to the public profile.

Create a Live Item Zap

Next thing is going to Zapier and creating a Zap which takes data from the form and creates a CMS item for Webflow.

I usually use member id as a slug for a new CMS item, but it is optional. However, you need to store member id somewhere in your new CMS item, so use it in slug or any other custom field. It is really important⚠️

After you manage to run this zap smoothly, you will have a new CMS item, which can be used as a public profile.

And that’s it! Done🎉

...but what if the user wants to update his profile later?🤔

Keep going

Update Memberstack data

Within the same Zap you want to update member’s data in memberstack to store the new CMS item id. It will be necessary to update the member's profile later.

So just make a new step in your Zap and update member’s data using member id (stored in your new CMS item) and add CMS item id to some custom field in Memberstack (I usually name it “Profile ID”). Also update member profile with all of the other fields from the CMS item to be able to pre-populate profile update form in case the user only wants to make minor changes in his public profile.

Create an update form

Create a profile update Webflow form and pre-populate fields with corresponding data from Memberstack. Also make sure to have a hidden field with pre-populated data of CMS item id stored in Memberstack. Also important⚠️

Create a live item update Zap

Go to Zapier again and create a new Zap, which would take data from your new form and update a Webflow CMS item. You will need to enter CMS item id as a must❗️ and good news is that we have that in our hidden form field😉. Then you connect all other fields to make sure all changes in profile are passed through and CMS data is updated.

Update Memberstack data

And again, you will use Memberstack data with the new profile update, so make sure to send new data from the updated CMS item to Memberstack again.

That’s it! Now you have a public profile for your user🎉

Cheers👋