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 could 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 video 1 and 2.

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 there to install. You can also reset your workspace and start from scratch by going into Settings.

Create a CMS collection called Members and make sure to add custom fields for 'First name', 'Last name' and 'Email'. You can optionally clone this site which contains the Basic and Premium pages to see and copy the Javascript for how data is injected onto the page.

Enter the API key for Memberstack and the API Key + Member CMS Collection ID for Webflow in the appropriate fields in Xano. Go into the Plan database table and fill in the memberstack_id for each plan you have in your Memberstack account.

Step 1: Set up Memberstack
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.

Step 2: Set up Webflow
We recommend using one of the included Memberstack Templates, however if you want to setup it up yourself, you'll need the following pages in Webflow

* Home 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 video 1 and 2 since Xano will be replacing Airtable + Zapier.

You 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 can follow this step-by-step tutorial to set this up, But at step 7 use this javascript file instead in your page settings. or clone this Webflow site and look at the Account Home - Basic page. You can copy/paste elements into your site.


Setup 3: Setup Xano
After this extension is installed, setup is pretty straight forward. Enter your Member Stack 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 here it says Manage extension"

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 gotten by going to your Memberstack site, 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. If you've setup Webflow properly, replace the url of the Javascript in the page settings. So it should look something like:

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

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

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.

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 WebhookThat'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.