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

Ask the community
1

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>
4 Likes
2

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>
3

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);
    }
});
4

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
5

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

1 Like
6

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

7

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:

8

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?

9

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

2 Likes
10

@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
11

Thanks for the update :slight_smile:

Glad to hear it works :slight_smile:

12

I have had success with:

Hello {LOGGED_IN_USER:NAME}

Copy and paste this into the text field.

1 Like
13

hello, to preview what this looks like, do i have to signup on my website’s signup form to create a user, login to website, and then it will show user’s name in preview? or is there another way to test/preview? thanks! @artur

14

Hey @conf,

You will need to create a user on Test model, login with test user details to check in Preview or simply use a magic link for test user.

15

it works well in custom code, and text area

but,

it doesn’t work in ‘Empty State’ in list block and ‘Placeholder’

is it impossible to do this ? or is there anyother way it could be ?

Thanks in advance !

16

Weird thing is,
code works well in empty state
i don’t understand why user related code doesn’t work in here

17

image

18

@TAXPACEE the issue is that the empty state text is displayed dynamically and the code has worked before empty state is shown.

This might work

<script>
	const onRecords = (e) => {
		setTimeout(() => {
                        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);
                        }
		}, 50);
	};
	
	window.addEventListener('get-records-table1', onRecords);
</script>

table1 is block name you see it in studio block config panel

19

Sincerly Thanks a lot artur !

i tried the code you gave, it didn’t work well

though, this one below here worked for me.

so i share it for somebody else.

JS code [footer]
<script>
	const onRecords = (e) => {
		setTimeout(() => {
                        if(window.logged_in_user) {
                            const name = window.logged_in_user.softr_user_full_name;
                            $("span:contains('{LOGGED_IN_USER:NAME}')").html(name);
                        }
		}, 50);
	};
	
	window.addEventListener('get-records-table1', onRecords);
</script>

HTML Code ['Empty State']
<span>{LOGGED_IN_USER:NAME}</span>

Always Thanks !

Let’s go Softr !

1 Like
20

@artur it seems like it works half the time for me. The other half nothing is displayed. Do you have any idea what could be the issue?

i am using this code btw:

<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>