Jun 20, 2021 4 min read

WMX Part 1: Build a Membership site using Webflow, Memberstack, and Xano

This tutorial is for people that want to use Webflow for their front-end (Website or app), Memberstack to restrict access and sign up users, and Xano to store data and pass it to Webflow based on Membership level.

Welcome to the WMX series.

Don't know what WMX or the tools are?

Webflow is an amazing tool for creating responsive websites without code.
Memberstack provides a designer-friendly membership platform that works seamlessly with Webflow.
Xano is the fastest way to build your app's backend using NO CODE and together,

Note: Webflow doesn't make it NO CODE easy to connect to an external API, but with a little Javascript in your Webflow page settings anything is possible and we'll walk you through how to do this below:

Step 1 - Setup Webflow + Memberstack

Setup Memberstack and Webflow to work together. The easiest way is to clone the Memberstack Webflow template. If you've never signed up for Memberstack before, you should have this option when you onboard with them. If you don't want to use the template and need help customizing your existing Webflow site with Memberstack, Mackenzie Child's Setup Webflow and Memberstack tutorial is awesome. You only need to watch part 1 and part 2.

Finally, you can optionally clone this Webflow site which contains the Basic and Premium pages with the Javascript setup. You can look at the page settings to see how the Javascript is used to inject data onto the page using the API.

Details on Memberstack Initial Setup
When you go through their onboarding wizard, you can get setup using one of their Webflow templates. This is by far and away the fastest way to get started if you haven't already set up your Memberstack/Webflow connection.

Details on Webflow Setup
We recommend using one of the included Memberstack Templates, however, if you want to set it up yourself, you'll need the following pages in Webflow

* Landing page
* Sign up page
* Login page
* Home page(s) for logged in users based on their plan

If you don't know how to set this up in Webflow, Mackenzie Child has a great Memberstack + Webflow explainer series.

Watch only part 1 and part 2 since Xano will be replacing the role of Airtable + Zapier.

Setting up Webflow to Receive Data from an External API

To summarize, you'll need to setup an element (like a Div) on the Webflow page your users log into where Xano will inject data from it's API and give it an ID - Cards-Container. You will also need to setup a hidden Div that you will inject the user's WebflowID into. Xano uses this to pull items belong to only that user.

To set this up, you can follow the step-by-step tutorial on Displaying External Data from an API in Webflow, But at step 7 use this javascript file instead in your page settings.

You can also clone this Webflow site and look at the Account Home - Basic page and copy/paste elements into your site.

Create a CMS collection called 'Members' in Webflow
Make sure to add custom fields for 'First name', 'Last name' and 'Email'. The Webflow user will be stored here.

Step 2 - Setup Xano

Sign up for a free account at Xano.com. When you go through the onboarding wizard, use the WMX template. If you already have a Xano account, you can go to the Marketplace and find the template to install. You can also reset your workspace and start from scratch by going into Settings.

Setup API Keys
After the WMX template is installed, setup is pretty straight forward. Enter your Memberstack and Webflow API Keys in Environment Variables as well as the Collection ID from your Members CMS. You can do that by going into Settings » and click "Manage" in the Environment variables section. or enter it on the WMX Marketplace page where it says Manage extension

Setup Membership Plans
Go to the Plan Xano database table and edit the plans to match what you have in your Memberstack account. For each plan, you'll need to put in the memberstack_id. This can be taken by going to your Memberstack site and clicking on memberships.

In Xano, the Plan table has pre-seeded items associated with the Basic and Premium memberships. The IDs you see in the Items field are associated with the contents in the Item table. Feel free to Add/edit/delete based on the content you want your users to see when they login.

Add items_of_member API Endpoint to Webflow Page Javascript
In Xano, go to API » public CRUD API » Click on the items_of_member API Endpoint. Click the button at the top that says "Endpoint URL". This will copy the link of the endpoint into your clipboard.

If you've setup Webflow properly, replace the url of the Javascript on line 3 in page settings. So it should look something like:

let xanoUrl = new URL('PASTE YOUR ENDPOINT URL HERE');

If you don't have the Javascript to load data onto the page, you can get it here:
https://go.xano.co/3qY6phh

If you haven't setup Webflow, scroll up under Step 2: Setup Webflow.

Copy the Xano API endpoint to the Memberstack Webhook

Go to API » public CRUD API » Click on the memberstack_member API Endpoint. Click the button at the top that says "Endpoint URL". This will copy the link of the endpoint to your clipboard. This Endpoint processes the payload from Memberstack and triggers Xano to pass data back and forth from Webflow to Memberstack.

Go to the Webhooks section in Memberstack. Click the new button, paste in the endpoint you copied from Xano, make sure New Member is selected and click Save Webhook.

That's it! Everything should be setup so when you go to create a new member on your Webflow site, they should be logged in and taken to a page that lists all of the items they have access to.

Resources

Tutorials

Cloneable Sites

Webflow Page Javascript