WMX • Part 1 • How to build a Membership site with Webflow, MemberStack and Xano course

Welcome to this step-by-step guide on creating a membership site using the powerful combination of Webflow, Memberstack, and Xano. We'll walk through the entire process, from setting up the necessary accounts and integrations to displaying content based on a user's membership plan. Let's get started!

Prerequisites

Before we dive in, make sure you have the following:

1. A Webflow account
2. A Memberstack account
3. A Xano account (sign up for a free account at xano.com)

Setting Up Xano

1. Log in to your Xano account and navigate to the dashboard.
2. Click on "Get Started" and name your workspace "WMX" (short for Webflow, Memberstack, and Xano).
3. From the Marketplace, select the "WMX Webflow MemberStack Xano" template.
4. Click "Manage" and provide the following keys:

• Webflow API key
• Webflow Member CMS Collection ID
• Memberstack API key

Obtaining the Webflow API Key

1. In Webflow, go to your project settings and click on "Integrations."
2. Scroll down and click "Create or Generate a New API Token" under "API Access."
3. Copy the generated API key and paste it into the corresponding field in Xano.

Setting Up the Webflow CMS Collection

1. In Webflow, add a new CMS Collection named "members."
2. Add the following fields: First Name, Last Name, and Email.
3. Create the collection and copy its ID.
4. Paste the Collection ID into the "Webflow Member CMS Collection ID" field in Xano.

Obtaining the Memberstack API Key

1. In Memberstack, go to "Power-ups" > "Integrations" > "Custom Integrations."
2. Create a new API key.
3. Copy the API key and paste it into the "Memberstack API Key" field in Xano.
4. Click "Update" in Xano.

Configuring Memberstack Webhooks

1. In Memberstack, go to "Settings" > "Webhooks."
2. Delete any existing webhooks.
3. In Xano, navigate to the API section and copy the "memberstack member post" endpoint URL.
4. Back in Memberstack, add a new webhook with the copied URL and set it to trigger on "New Member."

Setting Up Membership Plans in Xano

1. In Xano, go to the "Database Tables" section.
2. Open the "Plan" table and add your membership plans from Memberstack, including their respective IDs.
3. In the "Items" column, enter the item IDs from the "Item" table that should be associated with each plan.

Displaying Membership Content in Webflow

1. In Webflow, locate the page where you want to display membership content (e.g., "Account Home Basic").
2. Add a container element with an ID (e.g., "cards-container") where the membership items will be displayed.
3. Add a sample card element that will be used as a template for displaying each item. Hide this sample card using the "Hide" option.
4. In the page settings, scroll down to the "Before Tag" section and paste the following JavaScript code, replacing the API endpoint URL with your own:

1. In the same page, add a hidden div with the following attribute: `data-ms-member="Webflow-member-ID"`. This will allow the JavaScript to access the Webflow Member ID.
2. Repeat steps 2-5 for any other membership plan pages (e.g., "Account Home Premium").
3. Publish your Webflow site.

Testing the Membership Site

1. Sign up for a membership plan on your Webflow site.
2. After successful registration, navigate to the corresponding membership plan page (e.g., "Account Home Basic" or "Account Home Premium").
3. You should see the membership items associated with your plan displayed on the page.

Congratulations! You've successfully set up a membership site using Webflow, Memberstack, and Xano. Users can now sign up, log in, and view content based on their membership plan.