How to show article labels as tags on articles

17 Comments

  • Jennifer Rowe
    Comment actions Permalink

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

    1
  • Wes Drury
    Comment actions Permalink

    Looks good and great job Jacob!

    0
  • Jessie Schutz
    Comment actions Permalink

    This is fantastic, guys!

    0
  • Vladan Jovic
    Comment actions Permalink

    one of my fav. Thank you!

    0
  • Michael Marcialis
    Comment actions Permalink

    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>
    2
  • Maurice Ryder
    Comment actions Permalink

    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. 

    3
  • Brad Marshall
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    Thanks Brad for this! This is very useful indeed! 

    0
  • Jacob J Christensen
    Comment actions Permalink

    Very nice Brad! Thanks for sharing!

    0
  • Sandro Alvares
    Comment actions Permalink

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

    Example:


    Not work a search value "news" 🙁

    0
  • Jacob J Christensen
    Comment actions Permalink

    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
  • Wes Drury
    Comment actions Permalink

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

    .tag {
    background: #808080;

     

    0
  • Andrew Checkley
    Comment actions Permalink

    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

    2
  • Brijesh Bhaskaran
    Comment actions Permalink

    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 Verschoren
    Comment actions Permalink

    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
  • Vladan Jovic
    Comment actions Permalink

    This code will work on the Home Page / Promoted articles

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

     

     
    0

Please sign in to leave a comment.

Powered by Zendesk