Different homepage for logged-in users

Feature Requests
1

Hi,
do you know if it is possible to set a different homepage for logged-in users?
I would expect that external users reach a specific homepage when connected, but internal users should reach a dedicated page when connected (for example seeing their own data instead than a general website homepage).
Thanks
Gigi

1 Like
2

Hello @Programmer89,

You have only one homepage on your application. You can create user groups and show the homepage to external users.

For internal users you just need to setup a list details profile block (you mentioned you want them to see their own data, this is why I mentioned this option) and set conditional filter, so each internal user will login and see his/her data.

Thanks,

3

I believe you have 2 options:

  1. show and hide blocks on your home ‘/’ based on whether the visitor is logged in or not.
  2. Set a different page like ‘/private’ and redirect the logged-in users that visit your ‘/’ page
4

Hi Suzie, in this case when internal user access the website using a magic link they reach an error page because the homepage is not visible for them, this is the problem

5

Hi, how can I redirect them?

6

You simply add a custom code block with a javascript snippet to redirect users to your desired URL.
The important thing is to set the visibility for this custom code block, to registered users or your specific group that you want to redirect to the new page.

<script>
setTimeout(function() {
    window.location.href = 'NEW_URL';
}, 500);
</script>
2 Likes
7

What’s the best practice here? Option 1 or 2? Do fewer non-visible blocks on the page affect page load time?

8

This works perfectly!
Thanks a lot
Gigi

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