Tip: How to add cool agent badges in Communities (Gather)

58 Comments

  • Nathaniel Erlandson

    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
    Community Moderator

    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
  • Morgan King

    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
    Community Moderator

    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

    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
    Community Moderator

    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

    This works!!! Thank you!

    0
  • Vladan Jovic
    Community Moderator

    Glad that it works now! You are welcome!

    0
  • Joanna van Beuzekom

    Any plans on adding this as part of the Community code? seems like a pretty reasonable feature to want in a forum. 

    0
  • Jessie Schutz
    Zendesk Team Member

    Hey Joanna!

    This isn't currently on the roadmap for our Community product, but it's a great suggestion! I did some poking around in our Product Feedback and found several threads with suggestions for Community product improvements, but nothing specific to just badges.

    If you're willing, I'd encourage to you head over there and share your idea and detailed use case!

    0
  • Dave Kavalsky

    I've tried following these steps and can't get it to work. I feel like everything is in the right place. I changed some of the class names but it should still work. I also tried testing without changing the class names at one point but that didn't work either. Would someone be able to check out my support site and advise what I'm missing?

    https://support.ioninteractive.com/hc/en-us

    Thanks!

    0
  • Dave Kavalsky

    Please disregard my last comment. I figured it out.

    Thanks

    0
  • Katie Ginsburg

    Hi everyone! 

    Is it possible to substitute email address for name in the code snippets? Has anyone tried any had some success? Let me know!

    0
  • Oxana Noa Umansky

    @Dave, any chance you can share how did you fix the issue? 

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    Thanks for helping out with solution ideas, Luke! So helpful.

    0
  • Mike Cannon

    What do I need to modify in the .js  if I want to have more then 2 moderator classes?

    0
  • Toby Metcalf

    Thanks @Samantha Flaherty 

    Have you ever tried adding an icon?

    Best,

    Toby

    0
  • Joel Taylor

    HI Zendesk,

     

    This is a great addition to the community area and I have tried implementing this with a few changes, however in the new layout of the config I cant seem to get this working. My config is below, can you see anywhere I may have made an error please?

     

    1. In the 'Script.js' ...

     

    2. In the 'Style.css' ...

    From what i have seen (although changing a few naming areas) I think I have added all sections correctly?

    However the result is still:

    Any help would be amazing!

     

    Kind regards,

    Joel

    0
  • Vladan Jovic
    Community Moderator

    Hey Joel, from this perspective for me it seems that you need to make a change in your CSS file (to lowercase),

    .support-Moderator -> .support-moderator

    the same for .support-Manager 

    If this doesn't help, can you share your HC link so I can check directly?

     

     

    0
  • Joel Taylor

    HI Vladan,

    Thank you for the very quick reply! I have tried this and it didn't seem to resolve this issue, although great spot on the caps, I can't believe I missed that (sorry).

    Is it the URL to the help centre you would need?

    Kind regards,

    Joel

    0
  • Vladan Jovic
    Community Moderator

    Hey Joel, Yes.

    Also, please edit:

    https://cl.ly/63a7fe5a81d1

    red arrow -> should be supportModerators

    blue arrow -> support-moderator

    0
  • Joel Taylor

    Hi Vladan,

    I have tried that also and unfortunately no change to the community forum.

    The URL to our Help Centre is below:

    https://gladstonesoftware.zendesk.com/hc/en-gb

    Thanks again for the help on this!

    Kind regards,

    Joel

    0
  • Vladan Jovic
    Community Moderator

    Hey Joel, your HC is not publicly visible: 

    https://cl.ly/072838fde94c 

     

    0
  • Joel Taylor

    Hi Vladan,

    I have managed to get this working, I needed to add in some sections to the Community_post_page.hbs also which I found on another thread below:

    https://support.zendesk.com/hc/en-us/community/posts/360000552248-Adding-agent-badge-in-Communities

    Final result (I moved myself into the moderator group, not the manager group to test):

     

    Thanks for all of the help, it would never have worked without the areas you pointed out working too!

    Kind regards,

    Joel

    0
  • Vladan Jovic
    Community Moderator

    Glad to hear that, Joel! Thanks for keeping me posted!

    0
  • Ellen Hong

    Katie Ginsburg Did you ever get an answer to using email address vs names?  They would work better for my scenario as well.

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Ellen,

    I wasn't able to track down any code that would use the agent ID instead, however, if you do figure out a way to code that, you can find the agent ID when viewing the agent's profile in Support.

    The ID can be found in the URL when viewing the agent's profile. Otherwise, you can use the Support API to pull a list of users by role.

    I hope this points you in the right direction!

    0
  • Oleg Gulevskyy

    Hey @Ellen and anyone else interested in this.

    If you wish to use IDs instead of strings, here is something that I use to extract the IDs:

    $('.comment-author').each(function(index) {
    userId = parseInt($(this).children(".comment-meta").children("span[title]").children("a").attr("href").replace(/[^0-9]/g,''))

    if ($.inArray(userId, developers) > -1) {

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

    }

    This way you can compose your array with IDs.

    Hope this helps.

    0

Please sign in to leave a comment.

Powered by Zendesk