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."
- Create a div element above your Memberstack signup and logins forms with the attribute
data-ms-failed="true"
. - 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.
- 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.
Comments
0 comments
Please sign in to leave a comment.