Skip to main content

Hoping my CSS and third-party script pros like @SmartlyGreg can chime in here. 

My colleague had a great idea: linking a badge icon to something that explains it / shows its meaning. 

Our use case: We’re doing power user spotlights articles of people in our community. While there’s not a great way to link their unique article (published off community) to their profile, we were thinking we could link the Spotlight badge to either the full collection of spotlights or an article about how to earn the badge / participate in a spotlight

This use case might be useful for linking other badges to articles explaining what they mean or how they earn it.

Soo…. is there something in the code/data that could be configured with third-party scripts, CSS, or a combination of the two to link whatever renders that badge icon on user profiles? 

@DannyPancratz thank you for thinking of yours truly! 

This is a very interesting one! And it can indeed be done, all you will need is 3/4 variables:

  1. The total number of badges your community has
    There is a for loop in the script going through all the badges in the list to identify the specific one you want to add a link to, In the unlikely event that a user has all of them and that the one to add a link to is the last one in the list you’ll want that number to be the total number of badges available.
  2. The exact name of the badge that needs to have a link
  3. The link you would like the badge to point to
  4. Optionally, the class name for the badge
    This will allow you to add some custom CSS to the badge to highlight that it is different to other badges. Once the class name has been added you can do anything you want, such as a border colour, making it bigger than other badges, or even movement, as in the example below. Seems a missed opportunity if people do not notice it!

 

Full script with variables to replace:

<!-- Adding Badge Links -->
<script>
if (inSidedData.page.url.includes("members")) {
setTimeout(function(){
var numberedBadge = document.getElementsByClassName("qa-user-badges-list")i0].getElementsByTagName("li");
for (let i = 0; i < VARIABLE1; i++) {
var currentBadge = numberedBadgeBi].childNodesN1].title;
if (currentBadge == "VARIABLE2") {
numberedBadgeBi].classList.add("OPTIONALVARIABLE4");
var badgeImg = numberedBadgeBi].childNodesN1];
var linkElement = document.createElement("a");
linkElement.setAttribute('href','VARIABLE3');
linkElement.appendChild(badgeImg);
numberedBadgeBi].appendChild(linkElement);
}
}
}, 2000);
}
</script>

 

Optional Custom CSS for the optionally used badge class:

/* Spotlight Badges */
.OPTIONALVARIABLE4 {
animation: shake1 5s;
animation-iteration-count: infinite;
}
@keyframes shake1 {
0% { transform: translate(1px, 1px) rotate(0deg); }
25% { transform: translate(1px, 1px) rotate(300deg); }
50% { transform: translate(1px, 1px) rotate(0deg); }
75% { transform: translate(1px, 1px) rotate(0deg); }
100% { transform: translate(1px, 1px) rotate(-50deg); }
}

This might needs a bit of testing but it has worked for me. Furthermore, if you wanted every badge to have a link you could rinse and repeat the same script over multiple times.


You never cease to amaze, @SmartlyGreg. Thanks for the answer and for the detailed directions. 


@DannyPancratz actually you know there is a way to pull off the external link tailored for each user, but it requires a tool able to handle redirects. Hubspot can handle such things for example, not sure what tools are available to you…

The process would be to use the script above only the URL (VARIABLE3) would be broken into 2 parts, the base url and the appended identifier, which can come from InSided Data object, either:

  • inSidedData.user.name
  • inSidedData.user.userid

This would result in the script adding a custom url unique to each user, but obviously you would not have followed this naming convention for the destination page; cue the redirect tool.

Create a redirect for each custom badge url to point to that user’s destination page:

Original Link →  Destination url
fakeurl.com/SmartlyGreg → actualdestinationurl.com/articlebygreg

Hope this helps!


Reply