How to show logged in user's name in the website

In case you want to say Hello “User” in some of your blocks use the following:

  1. Add this into any text field <span class="d-none">{LOGGED_IN_USER:NAME}</span>
  2. Add the code below into page settings custom code header
<script>
    document.addEventListener("DOMContentLoaded", function () {
        if(window.logged_in_user) {
            const name = window.logged_in_user.softr_user_full_name;
            $("span:contains('{LOGGED_IN_USER:NAME}')").removeClass('d-none');
            $("span:contains('{LOGGED_IN_USER:NAME}')").html(name);
        }
    });
</script>
3 Likes

In case one wants to show only the first name.

<script>
    document.addEventListener("DOMContentLoaded", function () {
        if(window.logged_in_user) {
            const name = window.logged_in_user.softr_user_full_name;
            const firstName = name.split(' ').slice(0, -1).join(' ');
            $("span:contains('{LOGGED_IN_USER:NAME}')").removeClass('d-none');
            $("span:contains('{LOGGED_IN_USER:NAME}')").html(firstName);
        }
    });
</script>

First Name only: In case the name consists of more than 2 words, this code extracts the very first word only.

document.addEventListener("DOMContentLoaded", function () {
    if(window.logged_in_user) {
        const name = window.logged_in_user.softr_user_full_name;
        const firstName = name.split(' ').slice(0, 1).join(' ');
        $("span:contains('{LOGGED_IN_USER:NAME}')").removeClass('d-none');
        $("span:contains('{LOGGED_IN_USER:NAME}')").html(firstName);
    }
});

This works great thank you,
although I was trying to add the Hello “user name” in the header, is there a way to do this

1 Like

How would you change this to pull in another field from the Users Airtable table?

1 Like

I’m also trying to say “Hello [username/first-name]” in my header. Is this possible?

Hey @JimBowen,

You just need to replace this

const name = window.logged_in_user.softr_user_full_name; with

const name = 'Hello' + window.logged_in_user.softr_user_full_name;

Good Luck :slight_smile:

I am a little bit confused as I am not getting the desired results.

I have:

  1. Added the snippet into the custom code header.
  2. Created a new block under ‘Other - Simple Text’ and then set the value to: {LOGGED_IN_USER:NAME}

This just shows the block as text, rather than rending the HTML. I assume I am doing something wrong with Step 2? Can anyone help?

Ah, just realised I need to do Point 2 in a custom code block. That is working now, thanks.

2 Likes

@JimBowen the idea of the sample above was to use let’s say HERO or CTA blocks where in a text input fields you could add <span class="d-none">{LOGGED_IN_USER:NAME}</span> and then the code could be added into page settings custom code header area. I haven’t tested this in a Text Block. I would for now go with CTA block perhaps (you can remove the buttons :slight_smile: )

1 Like

Thanks for the update :slight_smile:

Glad to hear it works :slight_smile: