Installing Memberstack in Webflow

Article author
Josh Lopez

This article explains how to install the Memberstack script and set up your Memberstack application in Webflow. It provides step-by-step instructions on accessing the Install Code page in Memberstack, implementing the script into Webflow, and publishing the changes. The article concludes by suggesting the next steps to create a signup form.

Step 1: Access the Install Code Page

install_code.gif

To begin, go to the Install Code page in Memberstack. On this page, you'll find a "Copy code" button. Click on it to copy your personalized header script to your clipboard.

It will look like:

<!-- Memberstack webflow package -->
<script data-memberstack-app="YOUR_APP_ID" src="https://static.memberstack.com/scripts/v1/memberstack.js" type="text/javascript"></script>

Step 2: Implement the Script into Webflow & Publish

header_code.gif

Next, follow these steps in your Webflow project:

  1. While in the Webflow designer view of your Webflow project, click on the top left menu (the "w" or hamburger menu).
  2. A dropdown menu will appear. Click on "Site settings".
  3. Click on the "Custom code" tab.
  4. Paste the Memberstack Webflow Install script in the Head code section. Ensure it is placed at the very top if you have already added code before.
  5. Click on "Save Changes".
  6. After saving, click on "Publish".
  7. Confirm and publish to finalize the installation of your header script.

What's Next?

Now that the code is installed, it's time to Create a Signup Form →. Follow the link to the next article for a guide on how to set up a signup form on your application.

Adding Memberstack to a Live Site

If you are adding Memberstack to an established website with lots of traffic, you probably don't want a "test-mode" badge showing up on every page. We have a solution!

All you need to do is replace the "app_your_application_id_goes_here" your app id and replace the install code with the script below. This will only load Memberstack when you are on a .webflow.io subdomain.  


<script>
  var url = window.location.href;
  var targetDomain = "webflow.io";
  var memberstackAppId = "app_your_application_id_goes_here";

  if (url.includes(targetDomain)) {
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("data-memberstack-app", memberstackAppId);
    script.src = "https://static.memberstack.com/scripts/v1/memberstack.js";
    document.head.appendChild(script);
  }
</script>

Was this article helpful?

Comments

3 comments

  • Comment author
    Luca Montalti

    Hi, is it possible to add async or defer to this javascript code to reduce load time of the page?

    1
  • Comment author
    Duncan Hamra

    Hey Luca Montalti 👋

    It's not recommended unless you are okay with content being accessible until the Memberstack script loads. If you do decide to go this route, I recommend using our new data-ms-bind:style attribute to set member-only content and links to be hidden by default. 

    0
  • Comment author
    Luca Montalti

    Thanks Duncan I will review this. The challenge I am having is with the loading speed of my home page upon which I don't have anything being loaded that is member gated.

    When I input the memberstack standard code into the webflow header, I get a warning that the memberstack API is being loaded before the content is redered meaning my FCP is very long.  When I run performance reports it is recommending me that I do the same - defer loading scripts until they are required.

    https://pagespeed.web.dev/analysis/https-www-greenupmarketplace-com/od1weyhmpf?form_factor=mobile.

    As such it would be good to understand if you could share an alternative option for the headercode where the memberstack APIs run on async / defer rather than upfront and whether doing that would have any implication.

     

     

    1

Please sign in to leave a comment.