[Code] Fallback when Memberstack Fails to Load

Article author
Josh Lopez
  • Updated

It's possible that a firewall could prevent Memberstack from loading.

When this happens, you'll want to display a fallback UI informing customers, "This page is not functional because something is preventing 3rd party scripts." 

  1. Create a div element above your Memberstack signup and logins forms with the attribute data-ms-failed="true".
  2. Style the div and add text inside it. Set the element to display none. This element will only be visible if Memberstack fails to load.
  3. Place the following code before the closing body tag </body> on the pages with signup and login forms. 
function checkMemberstackDom(attempts = 3) {
    if (window.$memberstackDom) {
      return true
    } else if (attempts > 0) {
      setTimeout(() => {
        checkMemberstackDom(attempts - 1)
      }, 1000);
    } else {
      // memberstack has not loaded
      const forms = document.querySelectorAll("[data-ms-form]");
      // hide all memberstack forms
      forms.forEach((form) => {
          form.style.display = "none"
      })

      // display another element
      const otherElement = document.querySelector("[data-ms-failed]");
      if (otherElement) otherElement.style.display = "block";
    }
}
checkMemberstackDom()

Please leave a comment below if you have any questions.

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.