Tip: How to add cool agent badges in Communities

54 Comments

  • Andrea Saez
    Comment actions Permalink

    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

    1
  • Andrea Saez
    Comment actions Permalink

    Also.. I FREAKING LOVE THIS xD

    0
  • Christian Colding
    Comment actions Permalink

    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.

    0
  • Jennifer Rowe
    Comment actions Permalink

    Love it. Thanks so much for posting this, Sam! :)

    0
  • Jessie Schutz
    Comment actions Permalink

    Thanks, Sam! :D

    0
  • Samantha Flaherty
    Comment actions Permalink

    No problem at all :)

    1
  • Deepa Daniels
    Comment actions Permalink

    Coming across this for the first time, nice. Thank you for sharing Samantha! 

    0
  • Josh Greenwald
    Comment actions Permalink

    Does anyone have a live working example of this working in an external community?

    0
  • Jennifer Rowe
    Comment actions Permalink

    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.

    0
  • Josh Greenwald
    Comment actions Permalink

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

    0
  • Jennifer Rowe
    Comment actions Permalink

    Sorry, I don't know of any examples.

    0
  • Jessie Schutz
    Comment actions Permalink

    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.

    0
  • Samantha Flaherty
    Comment actions Permalink

    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. 

    0
  • Matt Searle
    Comment actions Permalink

    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.

    0
  • Laura
    Comment actions Permalink

    I'm having trouble getting this to work w/ the Copenhagen theme. Is there something that's different? 

    0
  • Harold
    Comment actions Permalink

    Same here, trouble with getting it to work in Copenhagen theme. Did you find a solution, Laura?

    0
  • Laura Hippert
    Comment actions Permalink

    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.

    0
  • Harold
    Comment actions Permalink

    Thanks Laura H, this worked for me. Awesome!

    0
  • Eric
    Comment actions Permalink

    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.

     

    0
  • Harold
    Comment actions Permalink

    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.

    2
  • Jennifer Rowe
    Comment actions Permalink

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

    0
  • Eric
    Comment actions Permalink

    Hello Harold 

    Thank you for your share. Your sample code work for me. 

    Thank you very much. 

     

    0
  • Nathaniel Erlandson
    Comment actions Permalink

    Just wanted to tack onto @SupportEngineer's post for anyone using the Copenhagen theme. The class needs to be added to two separate spans in the HTML Community Post Page. Once where he mentions for the article author, then again for the comment author:

    <span class="add-badge" title="{{author.name}}">
          {{#link 'user_profile' id=author.id}}
          {{author.name}}
          {{/link}}
    </span>

    If you can't find it, just search for {{author.name}}

    0
  • Vladan Jovic
    Comment actions Permalink

    Thank you Samantha for sharing!

    Just one thing, if you have two users with the same Name&Surname, they both will have badge.
    Cause of this I think it's better to use {{author.id}} as reference.

    I see that Matt Searle had a right question, is there a way to get user tags/roles on this page?

    Thanks again!

     

     

    0
  • Nicholas Mauro
    Comment actions Permalink

    Hi all,

    Just posted this support request. Was wondering if someone could please take a look at it and help me if possible. 

    https://support.zendesk.com/hc/en-us/community/posts/115006330367-How-to-add-a-Verification-badge-next-to-an-agents-name

    Thanks! 

    0
  • Morgan King
    Comment actions Permalink

    I have tried the above and it was working but now is not, could someone lend a hand?

    In Java:

      $(document).ready(function() {

    var moderators = ["Morgan King", "Katrina Lewison", "Amy Frank", "Ryan Strait", "Jessica LaFever-Smith", "Robin Genschorck", "Don Torrez", "Morgan King"];

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

    }

    });

     

     

     

    In CSS:

    .moderator:after, .support-manager:after {

    content: "Community Moderator";

    background-color: #af282e;

    border-radius: 3px;

    color: white;

    margin-left: 8px;

    padding: 5px 5px 5px 5px;

    font-size: 10px;

    }

    .support-manager:after {

    content: "Support Manager";

    }

    .add-badge {
    /* empty class for badges; For reference only */  
    }

     

    On the Post Page:

    Posted By: <span class="add-badge" title="{{post.author.name}}">
      {{#link 'user_profile' id=post.author.id}}
      {{post.author.name}}
      {{/link}}

    0
  • Vladan Jovic
    Comment actions Permalink

    Hi Morgan, It's really hard to catch where is the bug from this point. The code seems fine.
    Any chance to get url to your community? Thanks

    0
  • Morgan King
    Comment actions Permalink

    Yes, you can access it here, You will need to create an account: 

    https://www.civicplus.help/hc/en-us/community/posts/115000934148-Document-Center-Organization-Categorization

    0
  • Vladan Jovic
    Comment actions Permalink

    Hi Morgan, please try to put this code at the end of your footer (tested on this page):

    <script>

    $(document).ready(function() {

    var moderators = ["Melanie Benzel", "Katrina Lewison", "Amy Frank", "Ryan Strait", "Jessica LaFever-Smith", "Robin Genschorck", "Don Torrez", "Morgan King"];

    $('.add-badge').each(function(index) {

    if ($.inArray($.trim($(this).attr('title')), moderators) > -1) {

    $(this).addClass('moderator');

    }


    });

    if ($.inArray($.trim($('.post-author').text()), moderators) > -1 ) {

    $('.post-author').addClass('moderator');

    }

    });

    </script>
    0
  • Morgan King
    Comment actions Permalink

    This works!!! Thank you!

    0

Please sign in to leave a comment.

Powered by Zendesk