Add Member Name Onto Squarespace Page With Memberspace

Memberspace is a great plugin for membership management for Squarespace. I use it with a number of my clients for online courses, employee portals, and resource banks.

But there was always one thing I could never figure out. How can I greet my members with a personal message after they log in? Something like, “Hi John Smith! Glad you’re here.” This tutorial will show you how.

If you want more advanced Squarespace tips, walk-throughs, and resources, sign up for my newsletter. 

---

PREREQUISITE: NONE OF THIS WILL WORK UNLESS YOU’RE ALREADY USING MEMBERSPACE.

Here is what we’re going to do:

1. Add a custom code block with your html.

2. Add in Javascript to the Footer

3. Customize the greeting.

1. Add A Custom Code Block With Your HTML

  <h2 id="member-greeting"> </h2>

Just copy and paste the above code into a code block where you’d like the greeting to be. We’ll come back to changing this in the Customize section below.

2. Add Your Javascript To The Footer

Memberspace provides some advanced code in their help center that I tweaked to make work. I won’t walk you through my tweaking, but this is what I ended up with.

Code Update

Memberspace Updated their code recently, so I’ve updated my code accordingly.

Be sure to grab the 2.0 code below when you upgrade your website with the Memberspace 2.0 code.

Memberspace v2.0

  <script>
  (function() {
    const handleReady = ({ detail }) => {
      const { memberInfo } = detail;

      if (memberInfo) {
        document.getElementById("member-greeting").innerHTML = 
          "  <h2> Hi " + memberInfo.firstName + ", glad you're here!  </h2>";
      }
    }

    document.addEventListener('MemberSpace.ready', handleReady);
  }());
  </script>

Memberspace v1.0

  <script>
  (function() {
    MemberSpace.onReady = MemberSpace.onReady || [];
    MemberSpace.onReady.push(function(args) {
      if (args.member) {
        document.getElementById("member-greeting").innerHTML = 
        "  <h2> Hi " + args.member.firstName + ", glad you're here!  </h2>";
      }
    });
  }());
  </script>

Side-note: I pulled some the following code from the W3schools website which is a great place to go for coding resources.

3. Customize the Greeting

I’m going to walk you through the code so that you know exactly what’s happening. The only code in here you need to worry about are these two lines:
document.getElementById("demo").innerHTML = " Hi " + args.member.firstName;

So let’s go through these so you know how to customize them how you’d like.

• getElementbyID() -> This will look through your HTML to find the element with an ID = whatever is in the parenthesis. If you’d like it to look for a class, exchange it for document.getElementsByClassName("member-greeting")[0].innerHTML

• .innerHTML -> This is adding whatever we put after the equal signs inside the div. For example:
  <div id=”member-greeting”>
  this is what’s added
  <div>

• Memberspace tells us that the variables that we can use are:

  • id

  • name

  • firstName

  • lastName

  • email

  • plans

  • failedCard

• If you’d like the paragraph style to be different, change the HTML on the page say something like:

  • <h1 id="member-greeting"></h1>

Hope that helps, drop me a question if you have one and sign up for my newsletter below for more advanced Squarespace skills & tips.