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: Copy the Install Code
You can get it from the Getting started page or from the Install Code section of the settings page.
You'll find a "Copy code" button. Click on it to copy your personalized header script to your clipboard.
Step 2: Implement the Script into Webflow & Publish
Next, follow these steps in your Webflow project:
- While in the Webflow designer view of your Webflow project, click on the top left menu (the "w" or hamburger menu).
- A dropdown menu will appear. Click on "Site settings".
- Click on the "Custom code" tab.
- 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. (If this fails, please see trouble shooting below).
- Click on "Save Changes".
- After saving, click on "Publish".
- Confirm and publish to finalize the installation of your header script.
Troubleshooting
Site plan required to unlock custom code.
This issue is common and frustrating. Good news is we have a solution (bad news is it takes time).
1. Transfer your project to duncan@memberstack.com. (He's a cofounder at Memberstack).
2. Send an email to duncan@memberstack.com with your install script.
3. Duncan will add the script for you and transfer the project right back. Now you're ready to proceed!
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>
Comments
3 comments
Hi, is it possible to add async or defer to this javascript code to reduce load time of the page?
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.
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.
Please sign in to leave a comment.