So I came across this question in Zendesk's community section today. A user wanted to know, how one could add a badge next to the agent's name. Great question, I thought. So decided to work on a solution. Luckily for me the community already came up with a solution in 2015. I went trough their code, made some changes and replied to the user in question. But I started wondering: Maybe there is a better solution! Let's have a look at the current idea and why it isn't ideal!
Solution I - It works but...
Yes, it works! But it's not a clean solution. Let's have a look at it first and then point out the obvious. (You do not have the time? Just skip to Solution II)
The following code will execute as soon as the DOM is ready. We start by declaring two arrays. One holds the names of our moderators, the other one holds the names of our support managers.
We then search for all the elements that contain the author's names of each comment on the page. We do so by using jQuery. Once we found all the elements, we execute a function for each element. Within the function we simply check if the name is present in one of our arrays. If so, we add the a corresponding class to the element.
We repeat the same for the post author. The initial post author element will only exist ones on the page. That's why we do not have to check on more than one element.
Here is the code:
//This code will be executed as soon as the DOM is ready
$(document).ready(function() {
//These two arrays hold the names of our moderators and support managers
var moderators = ["Someone", "Someone Else"];
var supportManagers = ["Cedric Jacob", "John Snow", "Peter Parker"];
//First we find every element with the .comment-author class and run the following function for all elements
$('.comment-author').each(function(index) {
//If the name is found in our supportManagers array...
if ($.inArray($(this).find(':nth-child(2)').find(':nth-child(1)').attr("title"), supportManagers) > -1) {
//...we add the support-manager class to the element
$(this).addClass('support-manager');
}
//If the name is found in our moderators array...
else if ($.inArray($(this).find(':nth-child(2)').find(':nth-child(1)').attr("title"), moderators) > -1) {
//...we add the moderator class to the element
$(this).addClass('moderator');
}
});
//Next we will check the author of the post
if ($.inArray($('.post-author').find(':nth-child(2)').find(':nth-child(1)').attr("title"), moderators) > -1) {
$('.post-author').addClass('moderator');
} else if ($.inArray($('.post-author').find(':nth-child(2)').find(':nth-child(1)').attr("title"), supportManagers) > -1) {
$('.post-author').addClass('support-manager');
}
})
This should add the corresponding classes to each manager and moderator. But how does that help us to add the badges? A little CSS does the trick.
.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";
}
This CSS code will add pseudo-elements after the elements with the classes .moderator and .support-manger.
As I said before, this solution was available within the community posts and I only made some minor adjustments to it. But why is this solution not ideal?
Well, we do need to supply the names and add them to the array. What keeps one of the end-users from having the same name as one of your moderators? Nothing and that is a problem. So let us work on a better solution, shall we?
Solution II - It works (no but)
Great place for butt joke, but I could not think of one. So let's move along...
Instead of waiting for the document to be ready, let us go to the core and adjust the code that generates the document. All these Help Center pages are generated using simple HTML and Zendesk's very own markup. The page we need to work on is called "Community post page".
This code will look different depending on your template and your own changes to it of course. But the process remains the same.
Let us have a look at the post author first. Somewhere in this code we are explaining how the DOM should display the element containing the author's name. I simply searched for class="post-author".
In our previous solution we found this element and checked if the name displayed within this element was actually a manager or moderator. What can we do here to figure this out? Zendesk allows us to use their markup language to do this:
// Check author's ID -> add class if necessary
<strong {{#is post.author.id 9887503805}} class="post-author manager" {{else}} class="post-author" {{/is}}" title="{{post.author.name}}">
In this example, we check if the author's id is 123456789. If so, we add the manager class. Using the ID is the best solution here as it is the only real unique identifier. We can do this with as many IDs as we like. Here is an example for two IDs:
// Check author's ID -> add class if necessary
<strong {{#is post.author.id 9887503805}} class="post-author manager" {{else}} {{#is post.author.id 987654321}} class="post-author moderator" {{else}} class="post-author" {{/is}}{{/is}}" title="{{post.author.name}}">
The same solution needs to be applied for the comments. In this case we search for class="comment-author".
But how does that help us to add the badges? Just like in solution I, we need to add some CSS rules:
.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";
}
And just like in solution I, this CSS code will add pseudo-elements after the elements with the classes .moderator and .support-manger.
And that's it! Please let me know if you have any questions or suggestions.
Discuss