How to create a single-letter name avatar that works with Memberstack's dynamic loading? Answered

Post author
Jamie Debnam

Hey guys, bit of a random one. Rather than users setting a profile picture, I just want to use a text element that takes the users first name and limits it to the first character only. I tried using some javascript to do this and it would work initially and then when the name loaded via memberstack it would break. Anyone have an idea on how to achieve this?

Here’s the code I’m using:

<script> 
document.addEventListener("DOMContentLoaded", function () { 
// Get the element containing the user's name 
const userNameElement = document.getElementById("userInitial"); 

if (userNameElement && userNameElement.textContent) { 
// Get the full name 
const fullName = userNameElement.textContent.trim(); 

// Extract the first initial 
const firstInitial = fullName.charAt(0).toUpperCase();
 
// Replace the content with the first initial 
userNameElement.textContent = firstInitial; 
} 
}); 
</script>

It seems to briefly work on page load (https://coachesjunction.webflow.io/app/dashboard). However it then looks like something else is loading causing it to break.

Comments

6 comments

  • Comment author
    Chukwudi

    I've reviewed your code, and it worked perfectly for me without any issues. You may have to clear your cache and try again.

    However, here’s an alternative approach that achieves the same result, which I believe will work seamlessly for you as well.

    <script>
  document.addEventListener("DOMContentLoaded", function () {
    // Retrieve the current user's data from localStorage
    const currentUser = JSON.parse(localStorage.getItem("_ms-mem"));
    
    if (currentUser && currentUser.customFields && currentUser.customFields['first-name']) {
      // Get the user's first name from customFields
      const fullName = currentUser.customFields['first-name'].trim();
      
      // Extract the first initial
      const firstInitial = fullName.charAt(0).toUpperCase();
      
      // Display the initial in the desired element
      const userNameElement = document.getElementById("userInitial");
      if (userNameElement) {
        userNameElement.textContent = firstInitial;
      }
    }
  });
</script>
    0
  • Comment author
    Jamie Debnam

    Hey Chukwudi, thanks for your reply. Unfortunately even after clearing the cache, it still looks like it’s not working. It’ll work initially and then as soon as memberstack loads (the test mode widget appears), it’ll then switch from the first initial to the full name.

    Here’s a link to the loom. You’ll see it very briefly works on page load but then it looks like it is being overwritten or something when the page has finished loading.

    0
  • Comment author
    Chukwudi

    I've just watched your video and that seems to be a cache issue. Here's a video of what it looks like on my end: Loom Link

    0
  • Comment author
    Jamie Debnam

    Sorry Chukwudi, that’s because I manually set it to J and removed the data-attribute the other day to demo to the client and you just happened to sign up with a name that had J in it 😄 I’ve re-enabled it and cleared cache but still seeming to get the same issues

    0
  • Comment author
    Chukwudi

    Ok. Let's go back to using the Memberstack code instead of localStorage.
    Please use this instead:

    <script>
  document.addEventListener("DOMContentLoaded", function () {
    // Ensure Memberstack is loaded before accessing the data
    window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
      if (member && member.customFields && member.customFields['first-name']) {
        // Get the user's first name from customFields
        const fullName = member.customFields['first-name'].trim();
        // Extract the first initial
        const firstInitial = fullName.charAt(0).toUpperCase();
        // Display the initial in the desired element
        const userNameElement = document.getElementById("userInitial");
        if (userNameElement) {
          userNameElement.textContent = firstInitial;
        }
      }
    }).catch(function (error) {
      console.error("Error fetching Memberstack user data:", error);
    });
  });
</script>
    0
  • Comment author
    Magnaem from Memberstack

    Hey Jamie!

    I saw your post and put together a solution for you! This simple script generates an avatar with a members initials when a member doesn’t have a profile picture. It works with Memberstack and Webflow. Let me know if you have any questions!

    You can watch this tutorial and get the code at the link below🙏🏽

    https://www.memberstack.com/scripts/initial-based-avatar

     

    0

Please sign in to leave a comment.