Skip to main content
  1. Memberstack 2.0
  2. FAQs
  3. Features and Capabilities

Supported Website Builders & Platforms Reference Guide

Memberstack Team
Memberstack Team
  • Updated

⏱️ TL;DR

  • Officially Supported: Webflow, WordPress (via plugin), and custom HTML/JS codebases (React, Next.js, Vue, Svelte, etc., built using our @memberstack/dom package).
  • Unsupported Builders (Wix, Squarespace, Hostinger, Framer, Shopify): These platforms are closed ecosystems. They do not natively support custom HTML attributes (data-ms-*), and some use "iframe wrapping" which completely blocks Memberstack from loading.
  • The Workaround (Hostinger & Squarespace): While we don't officially support them, you can bypass custom attributes on Hostinger and Squarespace by using custom JavaScript and URL query parameters to trigger modals.
  • Wix is completely blocked due to secure sandbox restrictions and cannot use this workaround.

1. Supported vs. Unsupported Platforms

Memberstack relies on two core requirements to function:

  1. The ability to run custom JavaScript in your site's header (<head>).
  2. The ability to add custom HTML attributes (like data-ms-modal="signup") directly to your native buttons, forms, and links.

If a platform blocks either of these, Memberstack cannot run natively.

2. Webflow Quickstart (No-Code Integration)

Webflow is Memberstack's primary integration partner. You can build a complete membership site without writing a single line of code.

Step 1: Install the Script

Go to Settings in your Memberstack Dashboard, select the Install tab, copy your unique Header Script, and paste it into your Webflow site: 

  1. Open your Webflow Dashboard and go to Site Settings > Custom Code.
  2. Paste the script into the Head Code box.
  3. Click Save and Publish your site.
<script data-memberstack-app="YOUR_APP_ID" src="https://static.memberstack.com/scripts/v2/memberstack.js" type="text/javascript"></script>

Step 2: Use Pre-Built Modals

To create signup, login, or profile buttons, simply select any element in Webflow (a button, link, or div) and add a Custom Attribute in the right-hand panel:

Desired Action Attribute Name Attribute Value
Launch Signup Modal data-ms-modal signup
Launch Login Modal data-ms-modal login
Launch Profile/Billing Modal data-ms-modal profile

Step 3: Gate Content

To hide elements or lock entire pages:

  • To show a Webflow element only to members of a specific plan (e.g., a premium nav link): Select the element and add the attribute name data-ms-content with the value of your content ID which gets auto-generated when you create gated content in Memberstack. This will show the element only to members with plans that have access to such content and hide it from everyone else.
  • To hide an element from members of a plan (e.g., hiding a "Sign Up" button from someone who already upgraded): Add the attribute name data-ms-content with an exclamation mark before the content ID (e.g., !CONTENT-ID).
  • To lock a folder or page: Navigate to Gated Content in the left-hand menu, click + Add, and define your folder or page path (e.g., /premium). Select the plan you created to grant access, and click Save. Memberstack will now automatically redirect unauthorized users. 

3. Custom HTML/JS Quickstart (Vanilla Web Apps)

If you are building a custom website or using a static site generator (like Jekyll, Hugo, or Astro), you can integrate Memberstack using standard HTML attributes and our JavaScript API.

Step 1: Add the Script

Place the following script at the very bottom of your <head> tag on every page:

<script
  data-memberstack-app="app_your_app_id_here"
  src="https://static.memberstack.com/scripts/v2/memberstack.js"
  type="text/javascript">
</script>

Step 2: HTML Attribute Triggers

You can launch our secure, hosted modals directly from your HTML buttons:

Step 3: Accessing Member Data in JavaScript

Once a member is logged in, you can access their details directly in your front-end scripts:

4. WordPress Quickstart (Via Dedicated Plugin)

You can run Memberstack on WordPress by using our official plugin to inject the necessary tracking and modal scripts.  This article will also provide further information about getting started with WordPress and Memberstack!  

Step 1: Install the Memberstack Plugin

  1. Log into your WordPress Admin Dashboard.
  2. Go to Plugins > Add New.
  3. Search for "Memberstack" and click Install Now, then Activate.

Step 2: Connect Your App

  1. In your WordPress sidebar, click on the new Memberstack tab.
  2. Paste your App ID (found in your Memberstack Dashboard under Settings) into the configuration field.
  3. Click Save. The plugin will now automatically load the Memberstack script across your entire WordPress site.

Step 3: Adding Modals to WordPress Menus or Pages

Because WordPress page builders (like Elementor, Divi, or Gutenberg) allow you to add custom attributes, you can link buttons easily:

  • In Elementor/Divi: Select your button, go to its Advanced / Attributes tab, and add data-ms-modal|signup (or login).
  • In standard Gutenberg HTML Blocks: Switch to "Edit as HTML" and add the attribute manually:

5. Why Closed Builders Don't Work (The Technical Reasons)

If you are using an unsupported builder, you will likely hit one of two major roadblocks:

Roadblock A: No Custom Attributes (Hostinger & Squarespace)

Native buttons and forms in Hostinger and Squarespace do not allow you to add custom HTML attributes (like data-ms-price:add).

  • The Symptom: You paste your Memberstack script in the header, but clicking your "Sign Up" button does absolutely nothing because Memberstack has no way of "listening" to that button.

Roadblock B: Iframe Wrapping & Security Sandboxes (Wix & Widget Blocks)

Platforms like Wix render custom code inside an insulated sandbox called an iframe. Some builders (like Hostinger) also do this if you paste code into a "Custom HTML Widget" instead of the global site settings.

  • The Symptom: Memberstack's modals try to load, but they are trapped inside a tiny box on the screen, or they crash entirely. You will often see this console error:
    Uncaught (in promise) Error: Uncaught Error: No Listener: tabs:outgoing.message.ready
  • The Cause: Memberstack’s security script is trying to talk to the parent window, but the builder’s iframe sandbox is blocking it. Because of this, Wix cannot run Memberstack.

4. Hostinger & Squarespace Workaround: Trigger Modals via URL Links

If you are determined to use Memberstack on Hostinger or Squarespace, you can bypass the need for custom attributes on native buttons by using URL parameters and a small snippet of custom JavaScript.

Instead of adding data-ms-modal="signup" to a native button, you will configure your button's link to point to a URL with a query parameter, like: https://yourdomain.com?openModal=true&modalType=signup

The Setup

  1. Paste your standard Memberstack installation script into your site's global custom header code section.
  2. Directly below that script, paste the following helper code:

  1. Configure your native Hostinger/Squarespace buttons to link to these exact URLs:
    • Sign Up Button Link: https://yourdomain.com?openModal=true&modalType=signup
    • Log In Button Link: https://yourdomain.com?openModal=true&modalType=login
    • Profile Button Link: https://yourdomain.com?openModal=true&modalType=profile

⚠️ Note: This is a community-supported workaround. Because we do not officially support these builders, our support team cannot assist in debugging custom code installations on these platforms.

6. Headless Memberstack

We hear you! Many developers want the power of Memberstack's backend (members, plans, and metadata) but want to build their front-ends on platforms like Framer or Shopify.

To support this, you can connect to Memberstack entirely headlessly using our Admin APIs, REST APIs, and webhooks (via Svix). This allows you to handle authentication and member data on your own backend, bypassing our client-side DOM package entirely. We are actively working on expanding our SDK library to make headless setups even easier.

 

❓ Frequently Asked Questions (FAQ)

Q: Can I use Memberstack with custom hosting (like AWS, Netlify, or Vercel)?

Yes! As long as you are writing custom HTML/JS (or using a framework like React, Vue, Next.js, Svelte, etc.), you can host your site anywhere you like. Memberstack works perfectly on custom-hosted sites. Note: For React and Next.js sites, we recommend installing our framework-agnostic @memberstack/dom package directly.

Q: Why does my Hostinger site show a console error about "No Listener"?

This happens if you pasted your Memberstack install script inside a "Custom HTML" page widget instead of the global site-wide header. Hostinger wraps page-level HTML widgets in sandboxed iframes, which blocks Memberstack. Always ensure the script is pasted in the global <head> settings of your Hostinger site.

Q: Will Memberstack ever build a native Wix or Squarespace plugin?

Due to the highly closed nature of Wix and Squarespace's developer ecosystems, we do not currently have plans to build native plugins for these platforms. We highly recommend migrating your site to Webflow or WordPress if you require native membership functionality.

Was this article helpful?

Didn’t find your answer?

Get an instant answer from Rey, or reach a human. Either way, we’re happy to help.

Ask Rey AI Ask the community Contact support

Comments

No comments yet. Start the conversation below.

Please sign in to leave a comment.

Sitemap
Ask the AINew Ask the Community Message Support
Slack Channel Product Wishlist Report a Bug
Twitter - @Memberstack System Status
Terms & Privacy Policies