#TipTuesday Give a nudge to users who are still using the custom profile avatar.

paddykelly

Here's an idea to add a personal touch to your community. I've created a custom HTML Widget to encourage users to complete their profiles with a snazzy avatar. Having custom photos/avatars help to bring out the personality of your community and encourage engagement. It's why give badges to users who upload their own photos.

This is a DIY widget that you will have to DIY (or you can DI with some help from someone from your team). It requires inserting a Custom HTML Widget in a Homepage Layout in the Appearance tab.

The idea is to detect if the current logged in user has a default avatar, and if so, show this message. If they have already uploaded a personal avatar or photo, don't show this message. It can look something like this, only cooler:

Here’s the simple recipe:

1. Create a Custom HTML Widget: Decide where you want this friendly reminder to appear.
2. Set Visibility for Admins: Initially, keep it under wraps from general users by setting the widget’s visibility to Administrators only.

1. Craft Your Message: In the HTML panel, insert an HTML element where your message will live.

<!-- Custom HTML for Avatar Upload Prompt -->
<div class="myMissingInfo hide" id="MyMissingInfo">
    <h2 class="messagecontent title">Is this how you want to be seen?</h2>
    <div class="imageWrapper"><a href="/profile/picture" title="Click to update photo."><img src="" class="profilePhoto" id="profilePhoto"></a></div>
    <div class="messagecontent message">
        I see you are using a default avatar. Don't be shy, show your true colors and help us know you better.
    </div>
    <div class="profileLinkWrapper"><a href="/profile/picture">Update Your Photo.</a></div>
</div>

1. Add Some JavaScript Magic: Use JavaScript to check if the profile is incomplete and then display the prompt.

// JavaScript to Check Profile Completion and Show Avatar Upload Prompt

class UserProfile {
    
    constructor(e) {
        this.vanilla = e;
        this.shadowRoot = customHtmlRoot.shadowRoot;
        this.displayElementID = "MyMissingInfo";
        this.displayElement = this.shadowRoot.getElementById(this.displayElementID) ?? false;
        this.currentUserId = this.vanilla.getCurrentUser().userID ?? 0;
        this.verifyUserProfile();
    }

    verifyUserProfile = () => {
        // If the current user is a guest, abort.
        if (this.currentUserId === 0 ) {
            return;
        }

        // Do an API call to the current user's profile.
        this.vanilla.apiv2.get('/users/me').then((res) => {
            console.log(res.data);
            // Check if they current user has a default avatar...
            if (this.hasDefaultPhoto(res.data.photoUrl)) {
                // If so, display the avatar in the message, and make the message visible.         
                this.displayCurrentPhoto(res.data.photoUrl);
            }
        }).catch((err) => {console.log('Looking for the UserProfile update message? It failed to load. Error message: ', err)});
    }

    // Test for default photo or avatar.
    hasDefaultPhoto = (photo) => {
        if (photo.endsWith("defaulticon.png") || photo.includes("/uploads/defaultavatar/")) {
            return true;
        }
        return false;
    }

    // Display the current default avatar they are using in the message and set the message to show.
    displayCurrentPhoto = (photo) => {
        const imageTag = this.shadowRoot.getElementById('profilePhoto');
        imageTag.src = photo;
        this.displayElement.classList.replace('hide', 'show');
    }
}

onVanillaReady((e) => {
    new UserProfile(e);
});

1. Style with CSS: Make your prompt stand out with some CSS flair.

/* CSS for Avatar Upload Prompt */
.myMissingInfo {
    min-height: 200px;
    width: 100%;
    box-shadow: 1px 1px 3px 3px #eee;
    border-radius: 6px;
    padding: 15px 0;
    flex-direction: column;
}

.myMissingInfo h2.messagecontent.title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 18px;
}

.myMissingInfo.hide {
    display: none;
}

.myMissingInfo.show {
    display: flex;
}

.messagecontent {
    display: flex;
    flex: 1;
    margin: 5px 15px;
}

.myMissingInfo .imageWrapper {
    position: relative;
    overflow: hidden;
    border-color: rgba(170, 173, 177, 0.3);
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    margin: auto;
    max-height: 60px;
    max-width: 60px;
}
.imageWrapper img {
    max-height: 60px;
    max-width: 60px;
}

.messagecontent.warning {
    background-color: #fff8ce;
    padding: 6px 7px;
}

.profileLinkWrapper {
    width: 100%;
    margin: 30px auto;
    text-align: center;
}

.profileLinkWrapper a {
    padding: 5px 10px;
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    text-decoration: none;
    margin: auto;
}

.profileLinkWrapper a {
    background-color: #037dbc;
    border-color: #037dbc;
    color: #ffffff;
    font-weight: 600;
}

Remember, if coding isn’t your jam, there’s no harm in reaching out to a tech-savvy colleague to lend a hand. And don’t stress—keep it visible to just the admins while you fine-tune your creation. Once you’re ready to go live, update the conditions to share it with all your users.

If you have questions or comments, let me know below.

Happy coding, and here’s to a more connected community! 🚀

amorales

This is such a great tip! Apart from the font, text, and color — can someone share what else needs to be changed in the code? I'd love to use this in our community but we don't have a specific person to do the code but I'm willing to learn :)