Adding a notification banner to your Help Center v2
Plan Requirement: Pro Plan and up (if on lower plan see this version)
Zendesk level: Intermediate
Knowledge: HTML, CSS, JS, API
Time Required: 15 minutes
Have you ever wanted an easy way to notify your end users of System Outages, Important Announcements, or Releases. If so, then the Notification Banner v2 is exaclty what you are looking for. In my previous versions we had to add a word like "Issue" in the title of your article in order for the notification to show. With the new version we are going to leverage the Zendesk API and use Article labels to display our alerts.
In order to shorten this article, you can find all the code and instructions on my GitHub Page.
Screenshot
---
This post has been edited by the Zendesk Community Team to remove a "Live Demo" link that no longer works.
-
Hi Brett Bowser yes this option is enabled. I'm not 100% sure what it does though to be honest!
-
Hey Stuart, can you share the exact code you're using on your site so we can take a look?
-
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.
-
Stuart Buddrige can you post an example of the CSS that you used?
Mine looked something like thisa[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 David Crichlow 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"
-
Stuart Buddrige I'm not sure I fully understand the question, but I manually added the CSS style close to the top of the CSS file.
-
David Crichlow I added the below code to my Sandbox instance and I could still view the article (I tried refreshing, using an Incognito window and using a different machine):
a[href*="/hc/en-us/articles/9613354347924-Service-Outage-"] {
display:none;
}I also tried:
a[href*="/hc/en-us/articles/9613354347924-Service-Outage-"] {
display:none !important;
} -
Stuart Buddrige my solution doesn't stop you from viewing the article if you have the direct link. It just removes it from the list in the category or section pages. On further thought, a user could still search for the article and find it, so this wouldn't fully solve your problem
-
I see David Crichlow - thank you for coming back to me. And that's exactly what I'm looking for - currently I have the articles published to a section on the site there is no navigable way to - but if you search for them, you can access them. This is what I'd like to disable,
Any ideas anybody else? Thanks in advance.
-
Newbie here: Forgive my ignorance, but does adding this banner require modifying code on our Zendesk site? On the GitHub page, you refer to opening the “HTML Tab in Zendesk”; how does one actually open the HTML tab? Is it simply using the “View Source” command (in Safari) to view the web page's underlying code and then modifying it?
-
I want similar, but in a pop up window format rather than a banner. Is this also possible by modifying codes provided here?
-
Hello, I am trying to add a banner on my Help centre. So I copy pasted html header on top of the code in the dedicate section. Where should I copy paste the css and js? I tried copy-pasting on top of the code and nothing is coming out in the preview.
Thanks in advance!
-
Hi Paolo,
In order for you to perform this action, it will involve editing the code theme of your Help Center. Zendesk leaves the door open for any type of customization, however, since this will involve coding and customization, this falls out of the scope of our support.
However I was able to find an article that might help you in achieving this.
https://github.com/moderatorwes/Notification-Banner
Best,
-
Hi, is this still relevant/functional today? I see that the video that was attached to this post was removed. I'm looking to add a notification banner to inform my customers of any outages.
-
hi, this is still relevant.
-
Hi Hector,
Yes, adding a notification banner to inform customers about outages is still relevant and useful today. While the specific video attached to the post might have been removed, the concept of using notification banners remains a valuable and effective way to communicate important information, such as service interruptions or outages, to customers in real-time.
-
Elaine - thanks for the response and Hector Jimenez - just let me know if you have any follow-up questions but the instructions should be pretty straightforward.
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
287 Kommentare