Show logged in user’s name in the website (updated code)

Custom Coding
1

Insert this in a text field on static block <span id="user-name"></span>
and this to Page Settings>Custom Code>Header field and replace BLOCKID with your block id(name)

<script>
window.addEventListener('block-loaded-BLOCKID', () => {
        if(window.logged_in_user) {
            let helloUser = document.createElement('span').innerTex = "Hello " + window.logged_in_user.softr_user_full_name;
            document.getElementById('user-name').append(helloUser);
        }   
    
});
</script>
3 Likes
3

If you have a first name field in your database (users table), yes =>

Put: <span class="d-none">{LOGGED_IN_USER:FIELD:First Name}</span> wherever you want to display the first name.

Then in the header custom code (page settings) add this:

<script>
window.addEventListener('block-loaded-list1', () => {
	console.log('Block loaded');
    if(window['logged_in_user'] && window['logged_in_user']['First Name']) {
        const nameData = window['logged_in_user']['First Name'];
        $("span:contains('{LOGGED_IN_USER:FIELD:First Name}')").removeClass('d-none');
        $("span:contains('{LOGGED_IN_USER:FIELD:First Name}')").html(nameData);
    }
});

</script>

You need to change ‘First Name’ by your actual first name field (case sensitive)
Replace ‘list1’ in window.addEventListener(‘block-loaded-list1’, () => { by the block ID where the name should be displayed.

4

Can you please check my understanding?
I am following this Softr Help Doc. It says if I am created a new field called Position in Airtable, I can then map it to User Profile block. If I do this, I can then write javascript custom code like the following?

window.addEventListener(‘block-loaded-cta1’, () => {
if(window[‘location’][‘pathname’]==‘/mywebpage’ && window[‘logged_in_user’]) {
const myData = window[‘logged_in_user’][‘Position’];
dataLayer.push ({‘event’ : ‘My Custom Event’,‘my_position’ : myData });
}
});

5

Hello,

This code is not needed any longer if you want to display the user name in the website.

Please, check this doc.

If still there is something I can help, please let me know.

6

Thank you for your reply. However, it does not apply to my scenario. In my case, I need to add a new field in Airtable and I plan to sync it to the internal user table. What I really need is to push that data to Google Tag Manager via the JavaScript custom code. This is what I need help with. If Airtable and the internal user table has a new field called “Position”, how do I reference in Javascript.

Is it … const myData = window[‘logged_in_user’][‘Position’];?

7

Why am I missing out on such a nice out-of-the-box feature?!

This is very cool ! :heart_eyes:

2 Likes