By Prakash ChandranJune 22, 2021
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?
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.
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.
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.
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.
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.
let xanoUrl = new URL('PASTE YOUR ENDPOINT URL HERE');
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.