Different homepage for logged-in users

Feature Requests
9

In case anyone is trying to do the same thing, I’ll leave breadcrumbs here… my goal was to redirect users to a specific homepage, based on their user group (per this thread). I wanted it to work so no matter how they get there (icon in the corner, loading the site and already logged in) they’ll get to their own separate page for the homepage.

I built off of the code from @acjnas here which works great on its own. However I wanted to combine it with some code from another thread to keep my loading screen spinner (which I found essential for Softr because my blocks were loading from the bottom-up). That thread is here and the code was from @matthieu_chateau.

Below is the combined code in the end that’s working for me – you can change the color of the spinner too, which I currently have set to #b3d2ff. By the way I am a TOTAL n00b who is not really a coder, just hacking it from these forums and working with ChatGPT. But it’s working great for me!

In the header of the whole site’s custom code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
#loading-spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loading-spinner i {
  font-size: 60px;
  color: **#b3d2ff**;
}

.loading-text {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #b3d2ff;
  margin-left: 30px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  #loading-spinner {
    flex-direction: column;
  }
  
  .loading-text {
    margin-left: 0px;
  }
}
</style>

<script>
  var redirectInProgress = false;

  document.addEventListener('DOMContentLoaded', function() {
    // Show the spinner immediately
    var spinner = document.getElementById('loading-spinner');
    spinner.style.display = 'flex';
  });
  
  // Optional: Update the loading text dynamically
  document.querySelector('.loading-text').textContent = document.title + ' is loading...';
</script>

In the footer section for the whole site:

<script>
  window.addEventListener('load', function() {
    var spinner = document.getElementById('loading-spinner');
    // Hide the spinner only if no redirect is happening
    if (!redirectInProgress) {
      spinner.style.display = 'none';
    }
  });

<div id="loading-spinner">
  <i class="fas fa-spinner fa-spin"></i>
  <p class="loading-text"></p>
</div>

(I have some other code in the footer above for AtomChat - it works to put that between the two sections of code in the footer above.)

Then, follow @acjnas’s advice to add a custom code block. Set the visibility so that the block is ONLY visible to users of the given user group. Change out the URL depending on the user group. My example below is for a user group I have called ‘Pro’, where you can put in your own URL:

1 Like