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
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.
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.
- Click on "Save Changes".
- After saving, click on "Publish".
- 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.
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.