How to add text to the top of the Memberstack login and signup modals

Using Memberstack 2.0? There is an updated version of this article here.

Here is how to add text to the signup and login modals from Memberstack using Webflow.

Add the following code to a page with login and signup buttons that use the Memberstack modals. Make sure to an ID to those buttons that match the getElementById text as well.

<script>
// Add an ID to your Memberstack modal buttons that matches the getElementById below.
// You must use both of these because the login and signup modals are the same and the text is changing based on the button your users click.

// adds text to the signup modal from Memberstack
document.getElementById("signupButton").addEventListener("click", addSignupModalText);
function addSignupModalText() {
  let oldModalText = document.getElementsByClassName('ms-signup-text');
  if (oldModalText) {
    for (var i = oldModalText.length - 1; i >= 0; --i) {
      oldModalText[i].remove();
    }
  }

  let msSignupHeaders = document.getElementsByClassName('ms-signup-header');
  for (var i=0; i<msSignupHeaders.length; i++) {
    msSignupHeaders[i].innerHTML += '<p class="ms-signup-text">Your signup text here.</p>';
  }
};

// adds text to the login modal from Memberstack
document.getElementById("loginButton").addEventListener("click", addLoginModalText);
function addLoginModalText() {
  let oldModalText = document.getElementsByClassName('ms-signup-text');
  if (oldModalText) {
    for (var i = oldModalText.length - 1; i >= 0; --i) {
      oldModalText[i].remove();
    }
  }

  let msSignupHeaders = document.getElementsByClassName('ms-signup-header');
  for (var i=0; i<msSignupHeaders.length; i++) {
    msSignupHeaders[i].innerHTML += '<p class="ms-signup-text">Your login text here.</p>';
  }
};
</script>

Here is the webflow project so you can see it in action and here is the live site.