Do you want to force your users to log in but with a nice UX using blur effect and an alert box? Check this out

Custom Coding
#1

Hi all!

As always, no excessive teasing needed, here is the demo if the user is not logged in: https://test-play.softr.app/slide-page

All style stuff should be customizable. Also note that the not logged in user won’t have the ability to click anywhere except on the link provided (‘log in’).

In the header code of the page settings:

<div id="alertWrapper">
  <div id="alertBox" class="custom-alert">
       <a href="#" id="goBackBtn">Go Back</a>
       <p>You are not logged in. Please <a href="https://yoursoftrapp.com/whatever-you-want">log in</a> to access the content.</p>
  </div>
</div>

<style>
#alertWrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 999;
  display: none;
}

.custom-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ebebeb;
  color: #000000;
  border-radius: 8px;
  border: 2px solid #182939;
  padding-top: 50px;
  padding-right: 60px;
  padding-bottom: 50px;
  padding-left: 60px;
  z-index: 1000;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.custom-alert p {
  margin: 0;
}

.custom-alert * {
  pointer-events: auto;
}

#goBackBtn {
  position: absolute;
  top: 15px;
  left: 15px;
  color: #000000;
  text-decoration: underline;
  font-size: 13px;
  font-weight: 400;
}

@media only screen and (max-width: 768px) {
  .custom-alert {
    padding: 50px 20px;
  }
}

</style>

In the footer code of the page settings:

<script>
if (!window.logged_in_user) {
  var alertWrapper = document.getElementById("alertWrapper");
  alertWrapper.style.display = "flex";
}
</script>

<script>
document.getElementById("goBackBtn").addEventListener("click", function(event) {
  event.preventDefault();
  window.history.back();
});
</script>

Capture
Capture1342×619 20.1 KB

6 Likes
#2

Thanks for sharing @matthieu_chateau, another great workaround :star_struck:

1 Like
#3

Woa ! So nice @matthieu_chateau, I love it !

Be careful because this is not a protection at all for your content, only esthetical views to remember your visitor has to login.

In 20 secondes you can easily remove it and access the content, so use it as a non-protective feature !

#4

Yes, if you disable javascript. But blocks behind the blur effect have conditional filters, so no big problem at the end.

2 Likes
#5

I know you know but it is just people here who could take this script like this and forget to create such protections :wink: