How to show article labels as tags on articles

24 Comments

  • Jennifer Rowe
    Zendesk Documentation Team

    Thanks for writing this up, Jacob! Great tip, Wes!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    Looks good and great job Jacob!

    0
  • Jessie Schutz
    Zendesk Customer Care

    This is fantastic, guys!

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    one of my fav. Thank you!

    0
  • Michael Marcialis

    Hey guys. I've got one question and one comment.

    I was wondering if there's any functionality in Zendesk that allows me to have a link/URL attributed to a given label that can take the user to a page that shows all articles assigned to that label. Is it possible to do something like that currently? I think this would be more useful than just showing the labels on an article and not being able to interact with them.

    As for my comment, I just wanted to note that the GitHub gist referenced above will yield invalid HTML. `<ul>` elements can only have `<li>` elements as their direct descendants. Having the `Tags:` text as a descendant of the `<ul>` will throw an error.

    <ul class="tags">
    Tags: {{#each article.labels}}
    <li class="tag">{{identifier}}<li>
    {{/each}}
    </ul>
    1
  • Maurice Ryder

    This is a great article - thanks for the folks who took the time to add it. I want to echo @michael marcialis comment above - it would be really beneficial to have the ability for the labels to be "linkable" to a page that lists all articles tagged with a particular label. It is becoming more and more expected that this kind of behaviour would be the norm for tagged articles so it would be great if the zendesk product team could factor that in for (near) future iterations of the help center. 

    0
  • Brad Marshall

    It was suggested that I share some work that I had worked on to allow for a label to be displayed and searched for. Below doesn't include all of the CSS, but shows what is possible with some JS.

    The goals are:

    • Allow a user to see related terms
    • Allow a user to easily search by one or more labels
    • Allow the user to add their own text to the label search

    So, this is how it looks and functions to a user.

    Here is a snippet of my html.

    {{#if article.labels}}
    <div class="mdl-card__supporting-text labels">
    {{#each article.labels}}
    <span class="mdl-chip mdl-chip--deletable search-enabled" title="Add to search">
    <span class="mdl-chip__text">{{identifier}}</span>
    <button type="button" class="mdl-chip__action">
    <i class="material-icons">search</i>
    </button>
    </span>
    {{/each}}
    </div>
    {{/if}}

    NOTE: I am using Material Design Lite.

    Here is the snippet of my JS used to populate the search field with value of the label.

    $(".labels .mdl-chip.search-enabled").on("click", function(e) {
    if ($("form[role=search] input[type=search]").val() === "") {
    $("form[role=search] input[type=search]").val($(this).find(".mdl-chip__text").text());
    } else {
    $("form[role=search] input[type=search]").val($("form[role=search] input[type=search]").val() + " " + $(this).find(".mdl-chip__text").text());
    };
    });

     

     

     

     

    2
  • Jennifer Rowe
    Zendesk Documentation Team

    This is awesome, Brad. Thanks so much for sharing the add-on to this tip! 

    (Look for a t-shirt in your inbox!)

    0
  • Maurice Ryder

    Thanks Brad for this! This is very useful indeed! 

    0
  • Jacob the Moderator
    Community Moderator
    Zendesk Luminary

    Very nice Brad! Thanks for sharing!

    0
  • Sandro Alvares

    Nice @Jacob, how to make search tag value "news" to change color?

    Example:


    Not work a search value "news" 🙁

    0
  • Jacob the Moderator
    Community Moderator
    Zendesk Luminary

    Hi Sandro,

    Do you mean change them to another color than the dark gray? 

    I don't unfortunately know, I hope someone else following this post could help you out. Sorry.

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    If you want to change all the tags colors then just change the following in the CSS

    .tag {
    background: #808080;

     

    0
  • Andrew Checkley

    Excellent thank you, Is it possible to turn each tag into a search result. not as per brad's addition. but clicking the tag will then complete the search.

    For example.

    Tags: Software Update

    Clicking the software update tag will then provide search results for software update.

    Thanks

    Andrew

    0
  • Brijesh Bhaskaran

    Is it possible to list labels in the homepage?

    I am creating popular keywords / labels listing, so tried to use the code from the example in this page but got the following error

    -- not possible to access `article` in `article.labels --

    Any help please ..?

    0
  • Thomas (internalnote.com)
    Community Moderator
    Zendesk Luminary

    Hey,

     

    The article object does not include a label-element, so it's not accesible by default:

    https://developer.zendesk.com/apps/docs/help-center-templates/objects#article-object

     

    If you're a bit javascript-savvy you could add some code to the script.js file that gets all articles from your guide, loops through them, grabs the labels and appends those:

    Step 1: add this in your script.js file

    function fetchArticlesFromServer() {
    var props = {
    per_page: 100,
    sort_by: 'position',
    locale: 'en-us'
    };
    $.get('/api/v2/help_center/en-us/articles.json', props, function(data) {
    var obj = data.articles;
    Object.keys(obj).forEach(function(key) {
    var url = obj[key].url;
    var promoted = obj[key].promoted;
    var label_names = obj[key].label_names;
    var id = obj[key].id;
    if (promoted == true){
    var element = document.getElementById(id);
    element.append(label_names);
    }
    });
    }
    );
    }

    fetchArticlesFromServer();

    Step 2: Change the promoted section in home_page.hbs and add the following line:

    <span id="{{id}}" class="labels"></span>

    The end-result with some styling:

     

    See it live at: https://support.verschoren.com/hc/en-us

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    This code will work on the Home Page / Promoted articles

    {{#if labels}}
    {{#each labels}}
    <span>{{identifier}}</span>
    {{/each}}
    {{/if}}

     

     
    0
  • Tom

    Did anyone manage to find a way of giving the labels different colours?

    For example
    Label: Success = green
    Label: Fail = Red

    0
  • Tipene Hughes
    Zendesk Developer Advocacy
    Hi Tom, 
     
    You'd just need to make some small changes to the CSS, and possibly add another class name to the tag list item to differentiate them for the color application e.g:
     
    .tag .success {
    background: #00FF00;
    }

    .tag .fail {
    background: #FF0000;
    }
    0
  • Tom

    Thanks Tipene Hughes , I'm not quite show how that would work. How does the class identify the different tag in this code?

    <ul class="tags">
    Tags: {{#each article.labels}}
    <li class="tag">{{identifier}}<li>
    {{/each}}
    </ul>
    0
  • Tom

    For anyone interested I manage to achieve different coloured tags using some JS.


    <ul>
    {{#each article.labels}}
    <li class="item">{{identifier}}</li>
    {{/each}}
    </ul>


    JS

    $(document).ready(function () {
        $(".item:contains('Released')").addClass("released");
        $(".item:contains('In development')").addClass('indevelopment');
    $(".item:contains('Planned')").addClass('planned');
    });


    CSS style tags as you wish

    .item {
    color: black;
    }

    .released {
    color: green;
    }

    .indevelopment {
    color: orange;
    }

    .planned {
    color: blue;
    }
    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey Tom,

    Good call out on using JS, which is one option I would have suggested for this use case. The other would be using the if and compare helpers to conditionally render the list items in your article template - something like this:


    <ul class="tags">
    Tags: {{#each article.labels}}
          {{#if (compare identifier "==" "your_identifier")}}
                     <li class="tag success">{{identifier}}<li>
                  {{else}}
                     <li class="tag fail">{{identifier}}<li>
              {{/if}}
    {{/each}}
    </ul>
    0
  • Tom

    Ah great stuff I think I prefer that. Thanks Tipene Hughes. Last question I promise. How would you display the the labels on the section page either before or after the article titles?

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    No worries! You've still got access to the article labels in the section page so the code will be similar. In this screenshot from the section template, I've put the code block below the title link, which is within the #each section.articles helper. The only real change I've made is looping over "labels" instead of "article.lables" since we're already in the article object.

    You'll need to make some changes to the CSS to get the labels appearing in the position you want them in, but this should get you moving in the right direction. 

    0

Please sign in to leave a comment.

Powered by Zendesk