Adding a notification banner to your Help Center v2

Change it back and it works now.

Thanks!

Can anybody confirm if this solution still works? I'm looking to implement an announcement banner on my Help Centre and the Zendesk advisor sent me here. I'm no developer so need the easiest instructions possible!

Thanks in advance.

Hi @stuart23,

Yes, the above solution still works. The only change should be with the file's name. You can refer to my comment above for the same.

Thanks

Trapta

WOW six years and it still works :-)

@trapta - Thanks for helping out!!

@brett13 & @christopher53 - I created this solution 6 years ago when the Help Center was just a baby to fill a need.  Now the Help Center is all grown up so let's get this solution baked into the actual product!!!

Hi @trapta singh

I got this working - thank you for your response. Much appreciated.

Hi @trapta - I wonder if I can ask your help again on this. 

As the text that is in the banner is linked to an actual article and triggered via the 'alert' label, how can I keep that specific article from being visible on the site itself as an article in its own right, whilst keeping the banner that it produces visible?

When you publish an article it asks you to publish it to a certain category/section - but if I do this, users will then just be able to see the banner as an article which would be odd. Is there a way to invisibly publish an article so users cannot see it as an article, but the content from it can still be used in a banner?

Many thanks in advance!

@stuart23 This is how I have mine setup:

I actually have mutliple Guide templates, one for no banner, one for a red banner (hard down), and one for an orange banner (possible issue kind of thing). I also have two outage articles that will match the banner color. That way I can keep the text the same (or change a few words to make it accurate) and just publish when needed. 

That being said, when I have a banner in place, the article is visible to everyone. That's the only way I was able to get the banner to work properly. Maybe others have a better way, but I have created a section for these notification articles, put that section at the bottom of the list, and only have those two articles in there. That way, when there is no notification banner, the articles are set to Draft and that section is not visible. When there is a banner in place, someone could scroll down and see that section, which shows the article, but I have it 'clean' enough to be ok with that. 

So, in short, the way I have it setup is to burry the article as much as I can as it will be visible. If you restrict people from seeing the actual article, they also won't see the banner. The only way around this is to manually add the text in the banner instead of tying it to an article. It's more work but definitely diable. 

Thank you for your reply @kyle25 - much appreciated.

Yes, similarly I have 2 themes at present, one normal theme and then one with a banner so when there is an incident, we can just set the live theme to be the one with the banner.

Your approach makes sense, but I would be interested to hear if there is a way to keep the content as an article but make it invisible. I guess you could possibly set the 'Visible to' option in an article to Agents and Admins only?

@stuart23 Yup, same process I have. I have tested the visibility permissions and found that if someone can't see the article, they also can't see the banner. I hope there is a way around this, as it would clean up my knowledge base a little bit, I just haven't found a way in my fiddling with it. 

Here's hoping someone else has a better answer! 

Good to know - that will save me some time on testing! And yes, fingers crossed for an answer from somebody else.

Thank you again for your reply and help.

@moderatorwes do you have any insight into my recent comments about making an article invisible, yet still being able to display the banner on the site?

Many thanks in advance!

@stuart23 - Sorry but I can no longer assist as I don't have access to Zendesk anymore as my organization moved to a different product that was built for K12.  The best person to ask would be @trapta who is a coding guru.

Hi @moderatorwes - thank you for the reply.

@trapta - if you have any insight on if there is a way to invisibly publish an article so users cannot see it as an article, but the content from it can still be used in a banner, please let me know. 

Many thanks!

Hi @stuart23,

I did something like the following using CSS to hide the article from the list of articles.

a[href*="/hc/en-us/articles/ArticleID-Name-of-Document"] 
{
    display:none
}

I used Chrome developer tools to get the exact URL of the link. The article is still published, and if you enter the URL into the browser, you can access it. However, the link is not available for your customer to click.

Of course, you would need to do this for every article. Though if you created a section for these articles, you could probably just hide the entire section using a similar method.

Thank you @david204 - greatly appreciated. I will give this a go.

Thank you @moderatorwes! This was deployed in a matter of minutes with super easy steps. You saved me so much time and trouble and even cost!

@pierre25 - Glad to hear this not only saved you time but some money as well.  That's what this community is all about sharing ideas and enhancing the system for our end users.  Best of luck to you!!!  

Hi @david204 could I trouble you for some further help on making these pages invisible please?

I tried adding the code you provided to my .css file with the exact URL of the article and I can still see them when I refresh the site and view the section the article is published to.

Any help is much appreciated - thanks!

Hi @brett13 yes this option is enabled. I'm not 100% sure what it does though to be honest!

Hi all,

Another question from me - I simply cannot get the text colour to change at all. The original code is below:

/* change the background color by editing "background"  */
/* change the text color by editing "color"  */
.ns-box {
    position: relative;
    background: rgba(0,128,0);
    padding: 10px 20px 20px 20px;
    line-height: 1.4;
    z-index: 1000;
    pointer-events: none;
    color: rgba(250,251,255,0.95);
    font-size: 85%;
  border-bottom: 1px solid #DDD;

When I amend 'color: rgba(250,251,255,0.95);' and save the style.css, nothing happens to the colour. All I want is white text!!

I can amend the background colour no problem, it's just the text colour which is causing me issue.

RE: my other issues, I am fairly content with how I have got things configured currently - I really appreciate everybody's kind help.

@stuart23 can you post an example of the CSS that you used?

Mine looked something like this 

a[href*="/hc/en-us/articles/44166706125-Order-Taker-Order-Payment"] {
    display:none;
}

Depending on your other styles you may try !important after none.

display: none !important;

Hi @david204 could you give me an idea of where your section of code may be in the .CSS? My file is over 6.5k lines and I can't find anything similar to your code at first glance.

Thanks"