[Gather] Adding agent badge in Communities

54 Commentaires

  • Jessie Schutz
    Zendesk Customer Care

    Thanks for sharing, Brian!

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    Thanks posting this updated version, Brian!

    0
  • FTB Support

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

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

    0
  • Christen Bejar

    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! 

    0
  • FTB Support

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

    - Brian

    0
  • Pawel Nowak

    Thanks for the post Brian!
    Best regards,
    Pawel

    0
  • FTB Support

    You're welcome @Pawel!
    Glad to help!

    0
  • Stephane Dussart

    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-

    0
  • Dan Ross
    Community Moderator

    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.

    0
  • Stephane Dussart

    Hi Dan,

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

    CSS:

    0
  • Dan Ross
    Community Moderator

    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....

    0
  • Nicole Saunders
    Zendesk Community Manager

    Thanks for helping out, Dan!

    0
  • Marcel

    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

    0
  • Stephane Dussart

    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.

    0
  • Nicole Saunders
    Zendesk Community Manager

    @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. 

    0
  • Dan Ross
    Community Moderator

    @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.

    0
  • Marcel

    @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

    0
  • Nicole Saunders
    Zendesk Community Manager

    Hey Marcel -

    I checked with our team and they said we basically use the code from Brian's tip.

    0
  • 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

    0
  • Nicole Saunders
    Zendesk Community Manager

    Glad to hear you got it working, Marcel!

    0
  • Jeremy Robinson

    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>

    0
  • McCabe Tonna

    @Jeremy Robinson 

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

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

     

    0
  • Jeremy Robinson

    @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.

     

    0
  • McCabe Tonna

    @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? 

    0
  • Jeremy Robinson

    @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)

    0
  • McCabe Tonna

    @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

    0
  • Jeremy Robinson

    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.

    0
  • McCabe Tonna

    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)

     $(document).ready(function() {
     
      var moderators = ["McCabe", "McCabe T", "Adam Pepper", "Another Person"];
     
    var supportManagers = ["Samantha Flaherty", "Christian Colding", "Jesper Petersson"];
      $('.comment-author').each(function(index) {
        
        var name = ($.trim($(this).text()).split('\n')[0]) //select name, stop at new line
        
    if ($.inArray(name, moderators) > -1) {
    $(this).addClass('moderator');
    }
      })
     
     
    });
     
     
    /////******** CSS 
    /***** USER CUSTOM ****/
    .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";
     
    }
     
     
    --- FWIW using this method, if someone mirrored another users' name, they too could be a community moderator
    0
  • Scott Bowen

    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?

    0
  • Jeremy Robinson

    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.

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk