Simple course site with only Webflow & MemberStacks frontend API

Learn how to use the MemberStack front end API to store, retrieve, or update data for individual members and then display it on your Webflow site.

Using Webflow & MemberStack only. No Integromat. No Zapier. No Airtable. Nothing else…

Let’s keep it slim yet still build a powerful e-learning course site that you can add content to and start charging people money for immediately.

Add some muscle 💪 to your Webflow site.

Part 1: Here’s what you’re building…

Quick walk through of the features…

• 1. User signups.
• 2. User payments.
• 3. Gated course material.
• 4. Use the Webflow CMS for course material.
• 5. Mark any course lesson as “completed” or “not completed”.
• 6. Using the MemberStack front end API and datastore to track all this.

Next, let’s walk through the very basics of the MemberStack front end API…

Part 2: MemberStack Front End API - Get Member Data

MemberStack help docs: https://help.memberstack.com/en/

Going to the MemberStack helps docs you’ll find some example code for you to copy/paste into Webflow:

MemberStack.onReady.then(async function(member) {
    var metadata = await member.getMetaData()
    // do stuff with members data
})

One of the first things you did when you integrated MemberStack with Webflow was to install the MemberStack code snippet:

<!-- Memberstack -->
<script src="https://api.memberstack.io/static/memberstack.js?webflow" data-memberstack-id="1234567890"> </script>

When the above 👆code snippet loads in your web browser, it triggers the code you copied from the help docs. That code uses the front end API to get the members data.

Next, you’ll add a debugger; statement to that snippet of code coped from the help docs.

When the web browser runs this line of code, it stops rendering the web page and opens a console screen that allows you to easily review all of the information that MemberStack sent to us via their front end API.

That may sound complicated 😱 but it’s not!

It’s actually really easy and a fun trick to use allowing you to peer into the data and understand what is going on.

This is how you get data out of the MemberStack datastore using their front end API.

Next, let’s walk through how we send data to the MemberStack datastore using their front end API…

Part 3: MemberStack Front End API - Update Member Data

Now that you know how to get individual member data stored in the MemberStack datastore, via the front end API, lets walk through the basics of how to create or update data.

Back in the MemberStack help docs you’ll grab this snippet of code:

MemberStack.onReady.then(function(member) {
    var memberProgress = {
        lesson1: "finished",
        lesson2: "in-progress"
    }
    member.updateMetaData(memberProgress)
})

Again, just like in the previous section, this code is triggered when the page loads, and it automatically sends the data listed into the datastore for this individual member.

And those are the basics!

You could take these 2 snippets of code and do A LOT of customization with your Webflow site.

Next, you’re going to take it to the next level.

I’ve written a whole bunch of custom code wrapping around those 2 snippets in the previous sections to add full-featured functionality need to mark lessons as either completed or not completed.

Don’t worrry! You don’t have to understand the code if you don’t want to. There’s a link below and you can simply copy and paste it all into your Webflow site.

Let’s walk you through exactly all of this in the next step…

Part 4: Copy & Paste Custom Code - The Lesson Page

• All of the custom code
• The custom code for this step

Part 5: Copy & Paste Custom Code - The Course Page

• All of the custom code
• The custom code for this step