[Gather] Adding agent badge in Communities

Thanks for sharing, Brian!

Thanks posting this updated version, Brian!

You're welcome, @Nicholas! I'm glad to hear that it helped you out! :)

And you're welcome, @Jennifer and @Jessie!

Holy cow, thank you so much for this article. I was struggling with getting this to work but your super helpful screenshots were exactly what I needed! 

No problem, @Christen!
I'm glad this worked for you!

- Brian

Thanks for the post Brian!
Best regards,
Pawel

You're welcome @Pawel!
Glad to help!

Hi Brian, I followed your method and it works! Except for the fact that "Community Moderator" appears between the name and the date. Any chance that we can change that?

https://fleksy.zendesk.com/hc/en-us/community/posts/360038643131-How-can-i-secure-delete-all-entries-in-clipboard-

Hey Stephane,

This looks like it's a CSS issue, can you post what you have for the HTML for the post author and CSS for the moderator class? It's hard to find the issue without the code.

Hi Dan,

Thanks for the quick reply! Here is what I have below:

CSS:

Hey Stephane,

I think part of the issue related to the <b class="author"> part of the code.

I was able to get it working locally by changing the the <b> class from author to moderator and removing the moderator class from the span itself.

I'm not sure if it's correct to add a class to a <b> tag anymore, if you want to bold the text, I'd look into adding it to the moderator class itself. I'm not a web dev, just a guy who's had to learn along the way, so take that with a grain of salt.

Anyway, in this case, if you wanted to keep that <b> tag, I'd try putting the <b> tag class name inside the conditional. Something like this:

{{#if author.agent}}

<b class="moderator">
<span title="{{author.name}}">

{{else}}

<b class="author">
<span title="{{author.name}}">

{{/if}}

etc.etc.

</b>

I'd revisit the way you have this structured, and take a second look at the example provided, as there's no use of a <b> tag in there. If not, this might get things looking the way you're expecting.

Hope this helps!

YMMV, no warranties (expressed or implied) batteries not included....

Hi,

first of all, great guide @Brian, worked flawlessly for me.

Quick follow up question: Does this only work for agents or could you also use this for end-users as well, based on e.g. tags, user IDs, organizations or something similar? For instance @Dan and @Nicole: Do you have an active agent role on support.zendesk.com or is this a custom badge for specific end-users?

If so, how would we do that?

Best,
Marcel

Hey @Dan, I think I just fixed it by removing class="author" from <b >. Thank you for your help!

Now it looks like the spacing between the name and the date is very tight. Not sure how I should go about adding space between the date and the name. You can see here.

@marcel - this is a custom badge for specific end-users. We update it manually by user name whenever we wish to add or remove the badge from a particular name. 

@stephane

This will likely be a margin setting in your CSS. Consider adding a margin-bottom for a few pixels to the moderator class, or a margin-top to the meta class.

here's margin-top:5px; for the .meta class.

@marcel - this is a custom badge for specific end-users. We update it manually by user name whenever we wish to add or remove the badge from a particular name. 

@Nicole: Thank you for your reply, much appreciated. Would you mind sharing the code snippet / CSS to show how exactly you are doing this?

Best,
Marcel

Hey Nicole,

thank you for getting back to me. By now, I ended up combining Brian's tip with Samantha's Tip: How to add cool agent badges in Communities, so agents are automatically flagged as company members, while I can also add forum badges to individual users.

Best,
Marcel

While I got this to work, somewhat, every person commenting is labeled a Community Moderator, and I am thinking it is due to the class identifier of class="moderator" in the provided examples. Below are the snippets of my CSS, JS, and HTML.

JSS:

$(document).ready(function() {
var moderators = ["Jeremy Robinson"];
var supportManagers = ["Greg Foxworthy", "Jonny Hinojos", "Emily Witt"];

$('.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');
}
});

CSS:

.moderator:after, .support-manager:after {
content: "Community Moderator";
background-color: #6415AD;
border-radius: 3px;
color: white;
margin-left: 8px;
padding: 2px 5px;
font-size: 10px;
}

.support-manager:after {
content: "Support Manager";
}

HTML:
<div class="comment-author">
<div class="avatar comment-avatar">
{{#if author.agent}}
<span class="icon-agent"></span>
{{/if}}
<img src="{{author.avatar_url}}" alt="Avatar" class="user-avatar"/>
</div>
<div class="comment-meta">
{{#if author.agent}}
<span title="{{author.name}}" class="moderator">
{{else}}
<span title="{{author.name}}">
{{/if}}
{{#link 'user_profile' id=author.id}}
{{author.name}}
{{/link}}
</span>

and

<div class="avatar post-avatar">
{{#if post.author.agent}}
<span class="icon-agent"></span>
{{/if}}
<img src="{{post.author.avatar_url}}" alt="Avatar" class="user-avatar"/>
</div>
<div class="post-meta">
{{#if post.author.agent}}
<span title="{{post.author.name}}" class="moderator">
{{else}}
<span title="{{post.author.name}}">
{{/if}}
{{#link 'user_profile' id=post.author.id}}
{{post.author.name}}
{{/link}}
</span>

@Jeremy Robinson 

I haven't tested this, but wouldn't this always be true?

if ($.inArray($.trim($(this).text()), moderators) > -1)

@McCabe Tonna

Good question - my JS is not as good as I would like it to be, so I was working off of the example given in this article  as well as the article we are currently discussing in, and perhaps that what I got mixed up. I would have thought that it looks at the vars that I set in the JS first, and based off of that, will associate the appropriate class.

@Jeremy, Makes sense. 

If you're saying everyone who comments gets the tag, that means it's always True.

Can you try updating it from -1 to 0? 

@McCabe Tonna-

That did not do the trick, however, modifying the HTML class did change what's displayed, so it's forcing the class... is there a way that you can think of that will allow it to determine the CSS class to use based on the JS variables since it doesn't seem to work outside of the forced class designation. Below are the HTML changes in BOLD that are having a noticeable impact, but removing them, no badge displays.

{{#if post.author.agent}}
<span title="{{post.author.name}}" class="moderator">
{{else}}
<span title="{{post.author.name}}">
{{/if}}

If I change it to class="support-manager" then it will display the Support Manager badge. But I would like it to do so automagically based on the variable designation in my JS.

(if I had hair, I might be pulling it out a little at the moment)

@jeremy 

I'm trying to see if i can replicate the correct and your issue

Seeing if anyone who has implemented this recently can help out

update: i see the script.js isn't passing the data (moderators) to our template pages

trying to pass the data. pretty new to hbs

Thanks @McCabe Tonna! That would explain why it's not working correctly if it's not passing that data. I appreciate you looking at this to see if we can get it going in the Copenhagen theme as it's such a small change but adds a lot of value to our customers to know who the moderators are if they need to reach out to them.

Okay I got it working. This was for articles (article_page,hbs) where the class is known as "comment-author".

Added this to the script.js file(plain text to add at bottom)

the css

and I didn't change anything to the article_page.hbs or any other page. 

(added to bottom of script.js file)

I have a question similar to @Marcel's a few months ago: We set up SSO for our help center, so anyone with a log-in to our service can participate in the community. I've set up badges for our agents, but I'd like to add a badge or image for any of our employees that participate in the forum.

I've created an organization that includes anyone with our company's email address—Can I set the organization up as a target (like this example does with "agents") to create a specific badge?

Would it be something like:

{{#is post.author.organization 'Grow Employees'}}...

I tried this, but "organization" wasn't something I could reference this way. Is there a way to do this?

Thank you @McCabe Tonna. That makes sense, and so far gets me where I am headed. I only see it working for moderators, but at least I have a starting point to investigate further now. I appreciate your work in looking into this and getting it in a more functional state for me.