Short masterclass on how to sync Memberstack and Webflow CMS

Use cases:

→ When you need to showcase user profiles publically.

→ Small social platforms.

→ Membership platforms.

For this to work make sure you have these accounts:

Webflow

Memberstack

→ Integromat / Make

Steps:

→ First set up all your necessary member fields in Memberstack.

→ Set up login and dashboard systems in Webflow.

→ Create a “Members” collection in Webflow CMS.

→ Crucial: Ensure that all fields in the CMS match those in Memberstack. (It will be much easier to connect everything later in Make.)

→ Crucial: For multi-reference fields: Ensure that you have a field in which you manually enter the ID of each referenced CMS item.

Once you have everything properly set up in Webflow CMS and Memberstack, you will start building Make scenario connecting these two.

(To populate multi-reference fields we will need to modify our data using a split(); function in Make, We will be storing arrays in Memberstack as well. Once we send over the data to Webflow, we will modify it so Webflow can recognize it as an array and populate our multi-reference fields.)

Make scenario should look something like this:

  1. Memberstack: Watch Updated Items

  2. Tools: Set a new variable with a name of e.g. “Events array” with one-lifetime execution. The variable value will be the value from the Memberstack database but split each time the function encounters “,”.

  3. Repeat step 2. as many times as necessary to modify data for all multi-reference fields.

  4. Webflow: Update an Item.

  5. Choose your site and the CMS collection that you previously created.

  6. Populate all the data. For multi-reference fields, make sure to use newly created variables (they will be highlighted in purple.)

  7. Make sure that the item is neither archived nor drafted.

  8. Execute a publish a site event. This will make changes visible on the live website.

Important note for multi-reference fields: You must use ID’s of the referenced items. These IDs will be forwarded to webflow in an array. Once the webflow recognizes the ID of the referenced item, it will correctly populate it in the CMS.

So instead of forwarding the name of the CMS item like: “Event 1” you will be forwarding a CMS ID which will be something like: “65455f278876498fe5f33423”

An array of these items should look like this: [“65455f278876498fe5f33423”, “65455f278876498fe5f33423”].

I’ve researched the internet for many tutorials on how to do this, and nearly all of them try to use webhooks to send custom API calls to webflow, however, I think that this way works much better and is a lot simpler to implement.

I’ve found it in some comments on a YouTube video.

I’ve had to research a ton to simply sync Memberstack and Webflow CMS and so far, this, for me was the best way to do it.

If anyone else found additional ways or resources on syncing Memberstack and Webflow, feel free to share them.

Happy no-code, development everyone.

1 Like

Hvala puno Zlatko, this is great! I’ll be sending this to people who ask from now on :slight_smile:

1 Like

Nema na čemu Julian! Hope this helped!

1 Like

This is very useful - thanks!

Do you have any good links to memberships/memberstack integration generally? Also what is your take on memberships and it’s future? I’m struggling to find much on it and wondering whether to move my 20k members to a synced Weblfow scenario making the Webflow memberships the ‘parent’ membership but am anxious to do so.

1 Like

Just adding to this - or should I ignore memberships completely and just force all purchases to a Memberstach account instead? FYI I’m selling 50/50 shipped products and online courses and would love everything to be in one place.

1 Like

If you’re using Memberstack, you don’t need to also use Webflow memberships!