Automatically Adding Colored Notes in Articles Based on Article Keyword

Awesome, Daniel, thanks for posting!

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

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.

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

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.  

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?

Hey Rob,

try just to add

display: none;

under "p.internal_note {"

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

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.

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.