@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:
- 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. - The exact name of the badge that needs to have a link
- The link you would like the badge to point to
- 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!