Automatically Adding Colored Notes in Articles Based on Article Keyword

12 Comments

  • Jessie Schutz
    Zendesk Customer Care

    Awesome, Daniel, thanks for posting!

    0
  • Edwin Schukking

    Hi Daniel,

    this would indeed be helpful for our end-users!

    Since we have a multi-language setup, would it also be possible to add more than one trigger word per class?

    Kind regards,
    Edwin

     

    0
  • Dan Cooper
    Community Moderator

    Hi Edwin, 

    My example shows multiple keywords applying the same class. If you look at my last screenshot you can see that lines 131-133 are all setting keywords to have the same class applied to them.

    0
  • Rebecca McMurry

    I love this idea. I tried this but I still have to go to the source and add the class. Any ideas why it might not be working? Here is what I added to CSS

    and JS

    0
  • Dan Cooper
    Community Moderator

    Hi Rebecca, 

    There are a few things that might be working against you.  If you already have custom CSS setup it may conflict with what you've setup.  I ran mine on a mostly clear Copenhagen theme with minor changes. 

    Also, under your Guide Admin Settings you may need to enable the Display unsafe content checkbox to run scripts.  

    0
  • Rob Hearn

    Hello Daniel,

    Following your example, I was only interested in using the "internal_note" so that I can use as a quick way of doing an internal tag for certain articles.

    I do not have any custom users set up just the default and so commenced to enter the settings for only "internal_note" into my .css and .js sections, as shown below:


    and

    After publishing both and whilst logged in as a manager I can see the internal notes on my kb article and the styling is working fine. However, if I sign out and view the same article I can still see the internal_note. I do not have any user or groups set up other than the default ones. Do you have any thoughts on why this is displaying regardless of whether I am logged in or not?

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hey Rob,

    try just to add

    display: none;

    under "p.internal_note {"

    0
  • Martin

    Hi!

    I cannot find the $(document).ready(function() { in the JS. 

    I do not seem to manage to get the coloured notes right. 

    In CSS I did this: 

    p.fyi {
     background-color:lightblue;
     border: blue solid 1px;
     padding: 10px;
     margin:10px;
     color:black;
     font-style:italic;
     text-align:left;
    }
    p.important {
     background-color:pink;
     border: red solid 1px;
     padding: 10px;
     margin: 10px;
     color:black;
     font-style:italic;
     text-align:left;
    }
    p.internal_note {
     background-color:khaki;
     border: goldenrod solid 1px;
     padding: 10px;
     margin: 10px;
     color:black;
     font-style:italic;
     text-align:left;
    }

    In JS I did this:

    $(document).ready(function(){
    $("p:contains('Disclaimer:')").adaClass(* important');
    $("p:contains('Important:')").addClass(important');
    $("p:contains('Note:')").addClass('fyi');
    $("p:contains('FYI:')").addClass('fyi');
    §("p:contains('Tip:')").addClass('fyi'):
    §("p:contains('Internal Note:')").addClass('internal_note');
                                         
    if(HelpCenter.user.role=="agent"){
     $(".internal_note").show();}
    if(HelpCenter.user.role=="manager"){
     $(".internal note").show();}

    Added the $(document).ready(function(){ myself at the bottom of JS.. 

    0
  • Tipene Hughes
    Zendesk Developer Advocacy
    Hey, Martin!
     
    I noticed there's a couple of syntax errors in the JavaScript section of your code. Can you try fixing those and see if it resolves the issue? If not, let me know and we can take a look in a bit more detail.
     
    Thanks!
     
    Tipene
    0
  • Eva Ž.

    Dan Cooper, would you mind posting the codes instead of the screenshots? I don't have a developer background and the code won't run for me. Also I'm having troubles finding the $(document).ready(function() { to run the script. I'm using the Copenhagen theme.

    0
  • Brett Bowser
    Zendesk Community Manager
    Hey Eva,
     
    I think you can use Martin's code from his comment here: https://support.zendesk.com/hc/en-us/community/posts/4409515200026/comments/4512981674394
     
    I would also recommend taking a look at this article for customizing your guide them: Customizing your help center theme
     
    I hope this helps!
     
    0
  • Dan Cooper
    Community Moderator

    Hi Eva, 

    I wrote this solution up several years ago.  It likely would still work in some cases, but newer versions of the Copenhagen theme removed jQuery which was assumed for the code I shared initially. If you are still looking to proceed, you may need to look into adding jQuery back into the theme or adapt the code to work without it. 

    0

Please sign in to leave a comment.

Powered by Zendesk