Skip to main content

Lesson 2 of 7 · 0:40 · Beginner · Webflow

Install Memberstack on Webflow

Add the Memberstack script to your Webflow site.

Where this fits

You’ve seen the full build. Now you’ll start it for real, beginning with the one step everything else depends on.

By the end of this lesson you can

  • Copy the Memberstack install script from your dashboard
  • Paste it into the head code in your Webflow site settings and publish
  • Check your install with the Test install code button

Lesson notes

How it works

What the Memberstack install script does

The install script is one script tag. It carries your app ID in a data-memberstack-app attribute and loads Memberstack from https://static.memberstack.com/scripts/v2/memberstack.js. On Webflow, that also loads Memberstack's Webflow package, which scans each page for data-ms-* attributes and handles what they ask for: forms, modals, member data and hidden content.

It goes in the Head code because that code runs site-wide, on every page, and runs early. That matters later, when Memberstack has to decide who can see a page before showing it.

Memberstack also needs to know which domains may talk to your app. Add your Webflow staging domain (for example my-site.webflow.io) and your production domain under Settings, Application, and mark the ones you want in Test Mode.

How to install Memberstack in Webflow

Your site must allow custom code, so it needs a paid Webflow Site plan or a paid Workspace plan.

  1. In the Memberstack dashboard, open the install code (on the Getting started page or the Install Code section of Settings) and click Copy code.
  2. In the Webflow Designer, open the top-left menu and choose Site settings.
  3. Open the Custom code tab.
  4. Paste the script into Head code. If there's already code there, put Memberstack at the very top.
  5. Click Save Changes, then Publish.

How to check the install worked

Back in Memberstack, paste your published site link and click Test install code. It only passes after you've published, because it checks the live site, not the Designer.

While your app is in Test Mode, a test-mode badge shows on your site. That's normal, and it confirms the script is loading.

Before you move on

0 of 5

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: With the script in place, you’ll build the first thing every member touches: the signup form.

Common questions

Can I install Memberstack on a free Webflow Starter site?

Only if it's in a paid Webflow Workspace plan. Otherwise Webflow blocks the custom code field and the Memberstack script can't be added.

Why does Test install code fail even though I pasted the script?

The test checks your published site. Save the custom code, publish the site, then run the test again.

Where does the Memberstack script go in Webflow?

In Site settings, Custom code, Head code, at the very top if other code is already there. That makes it load on every page.

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    The first thing that we’re going to need to do on our Memberstack site is install the header codes we’ve just created a app and that’s it we’ve done nothing else let’s go ahead and click right here to install the script it’s right there for us let’s hit copy let’s go back over here and head over to our project settings then what you’re going to want to do is go to the custom code section right there in the head code paste it in save changes and published if you follow those steps you’ll be good to go but if you’re not sure then what you can do is go ahead and copy your link head back

  2. 0:31

    over into Memberstack and just paste it in here like that click test install code and it’ll tell you that it is all working

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.