Tip: How to add cool agent badges in Communities (Gather)
It's something that has caused lots of discussion in other posts here - how we can get the same cool little badges Zendesk use, on our own Community forums.
Thanks to the help of a few Zendesk people, we now have the code snippets available to do this ourselves.
Note: whilst this is currently a workaround, it means there are some flaws (although minor). Because you need to input specific names into the code, it means that anyone on the Community with the same name is likely to have the same 'moderator' style badge appear too. So if you have agents called John Smith and lots of clients with the same name, it might get a little confusing.
To start off, add the following JavaScript snippet onto the end of your code:
$(document).ready(function() {
var moderators = ["Username 1", "Username 2", "Adam Pepper", "Another Person"];
var supportManagers = ["Samantha Flaherty", "Christian Colding", "Jesper Petersson"];
$('.comment-author').each(function(index) {
if ($.inArray($.trim($(this).text()), moderators) > -1) {
$(this).addClass('moderator');
}
else if ($.inArray($.trim($(this).text()), supportManagers) > -1) {
$(this).addClass('support-manager');
}
});
if ($.inArray($.trim($('.post-author').text()), moderators) > -1 ) {
$('.post-author').addClass('moderator');
}
else if ($.inArray($.trim($('.post-author').text()), supportManagers) > -1 ) {
$('.post-author').addClass('support-manager');
}
});
You can edit the code to have the titles you prefer (in my example, I've changed Product Manager to Support Manager) and you will need to add in the names of your agents too.
Note: if you update any titles in the JS snippet you'll also have to update the related code in the CSS snippet below.
Then, add the following code snippet onto the end of your Communities CSS:
.moderator:after, .support-manager:after {
content: "Community Moderator";
background-color: grey;
border-radius: 3px;
color: white;
margin-left: 8px;
padding: 2px 5px;
font-size: 10px;
}
.support-manager:after {
content: "Support Manager";
}
You can edit this so your badge has different colours and fonts, to fit your brand.
Finally, you should be able to see the badge:
If you find you have any difficulties adding this code, it's worth checking:
- If you're using the new theming infrastructure (I've completed this by using a standard theme on our sandbox help centre)
- You're not trying to add this to Communitiesv1 (this code won't work with the old code)
- Your code definitely has the right handles - without those crucial handles ({ }) your code can break and cause silly things to happen.
Hope this helps - thanks so much Zendesk for providing this code :)
-
Hi Eric,
I did this. From the examples / code above:
1. In the javascript I changed$('.comment-author').each(function(index)into
$('.add-badge').each(function(index)2. In the CSS I added an empty class. Technically this is not necessary but for referential purposes I like it there (if you use a class it should exist too, right?)
.add-badge {
/* empty class for badges; For reference only */
}Make sure to add the example code from this article too.
3. In the html of the community article page I added the class to the span that displays the author of the article or comment.<span class="add-badge" title="{{post.author.name}}">
{{#link 'user_profile' id=post.author.id}}
{{post.author.name}}
{{/link}}
</span>That's it!
All credits for the tip to Laura H, ofcourse.
-
Instead of advising people to modify strings of text that match Moderator names, why not create the javascript trigger based off the ID of moderators? Something along the lines of this:
$('a[href*="22805752907"]').addClass ( "FancyNewModeratorClass" );Basically, what this code will do is look for the ID number of a person in the link to that person's profile (replacing "22805752907" in the example above with the ID of the moderator). Since profile ID numbers are unique to the person and are baked into the URL of each person, this should work. This way, you wouldn't get the "John Smith" problem as outlined in the article. I would not want to allow for the possibility of mis-labeling a user as a moderator, if I were maintaining a community.
We have decided to move away from Zendesk Community in favor of a more feature-rich community option, otherwise I would flesh this concept out completely: adding all moderator ID's to an array and then filtering the links that the script triggers off of. Hope this helps, though.
-
This is really helpful, Luke. If it is possible, maybe Zendesk can incorporate the abiltyy to easily add an image to do this?to various profiles. The problem with us coding is every time we need to make a change, we have to hire someone to do that. It takes testing & TIME!. A simple coding change in the product would be easier for many customers. Thank you for that. I will pose to our team and see if they might be interested. I think they would rather have ZD build it into the profile.
-
For v1- it's not that the code won't work, you just have to use the right element calls for it. In this case, instead of:
$('.comment-author').It would be
$('.question-author').For v1 version, the code is available here with the correct each(function) search for each element: https://support.zendesk.com/hc/en-us/community/posts/204997028-Community-job-titles-roles-for-anyone-on-v1
-
No problem at all :)
-
I would love the ability to add an actual badge image (jpg). Can that be done using what is shown above in CSS? How could we accomplish this?
Mary P
-
Has anyone found a way to include a Jpg badge in a profile?
-
@Mary Paez,
Did you figure out a way to solve your problem? It's not difficult to modify the CSS to change the image that appears for agents. An example of how I did that in our instance is below, injecting our company logo into each agent's profile:
.avatar .icon-agent::before {
position: absolute;
right: -2px;
bottom: -4px;
content: url($assets-logo-shield-15x22-png);
}You would need to mess with that code based on your own image's dimensions.
You could have the image appear after the name, similar to how this article is injecting the "Community Moderator" by just modifying the CSS as outlined in the article to reference an image (like I did in the sample code above). You could theoretically stack up additional badges by adding more complicated Javascript arrays and loops and adding more classes...but it will be very difficult to manage if you're trying to offer badges to many quantities of people, or if they change often.
-
Are there any plans to expose more user information about the authors than the "agent" parameter? It would be nice to be able to have different badges for moderators, support staff, or SMEs based on user tags or segments rather than having to continuously maintain lists of names.
-
Thank you for the article and the updates to Copenhagen.
Can we use IDs instead of hardcoded names? I'm concerned if two people posting with the same name as one of the moderators, the non-moderator user will also be branded, "Community Moderator" next to their name. Can we use unique IDs? If so, where can I find the IDs of our agents?
var moderators = ["Melanie Benzel", "Katrina Lewison", "Amy Frank", "Ryan Strait"
Any code examples would be much appreciated - Thank you.
-
Thanks for sharing that, Oleg!
Also, I see that this is your first comment. Welcome to the Zendesk Community!
-
Also.. I FREAKING LOVE THIS xD
-
Wow, thank you so much for this tip Samantha! Well done! I'll make sure to move it our general tips section once Community v2 is live for everyone.
-
Love it. Thanks so much for posting this, Sam! :)
-
Thanks, Sam! :D
-
Coming across this for the first time, nice. Thank you for sharing Samantha!
-
Does anyone have a live working example of this working in an external community?
-
Yes, it's in this very community!
Notice Deepa above you, she has a Product Manager "badge." And Samantha above Deepa has a Community Monderator badge.
-
@Jennifer thanks, definitely glossed over that.
I was wondering if anyone has designed something more detailed. For example an icon or image. Potentially something like how Fitbit does badging or similar.
-
Sorry, I don't know of any examples.
-
Hey Josh!
I don't know of any examples off the top of my head...Deepa might, though. Hopefully she'll have a chance to weigh in.
I would imagine it would just be a matter of altering the code to use image assets (although I don't know for certain as I haven't reached that level in my coding skills). Maybe one of our coding gurus here in the Community will have some insight.
-
Hey Josh,
It's just CSS so you should be able to add badges etc. I haven't added a badge or image for ours so don't have code to share; it should be pretty straightforward to manipulate if you're comfortable with CSS though.
-
Hi Samantha,
I was wondering if there's any other user info (tags, role etc.) that is visible when loading the page so that you don't have to hard code the names in?
User or organisation tags appear to be exposed somehow because you can use them to restrict articles for signed-in users.
-
I'm having trouble getting this to work w/ the Copenhagen theme. Is there something that's different?
-
Same here, trouble with getting it to work in Copenhagen theme. Did you find a solution, Laura?
-
Hi Laura, Harold, and Oxana - in looking into the Copenhagen theme, it is true that it is set up differently and will not work with the same JS provided above. However, with some tweaks, it can work with Copenhagen. It looks like the main issue is with the class .comment-author:
$('.comment-author').each(function(index)This class is not used in the same way in Copenhagen themes, so some changes would need to be made. I was able to create a new class which I added to the spans in the the theme pages where I wanted badges to be applied and then updated the JS to reference the new class. Once this was done - the badges were applied in Copenhagen as well! I hope this helps.
-
Thanks Laura H, this worked for me. Awesome!
-
Hello Laura H
I am working on the agent badge feature for my community. However, it didn't work.
I find that you mentioned the Copenhagen theme is not compatible with above sample codes. I am wondering could you share more information about how did you resolve this problem.Any information will appreciated
Thank you very much.
-
Hi Harold,
Thanks for helping out! Glad you got it working.
If you'd like to write up the solution as a new tip for the Copenhagen theme (since this tip was written for old themes) we'll give you swag! In fact, double swag this month!
(And Laura won't mind. You can just give her credit in the tip!)
-
Hello Harold
Thank you for your share. Your sample code work for me.
Thank you very much.
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
58 Kommentare