Recent searches
No recent searches
Adding a notification banner to your Help Center v2
Posted Feb 08, 2016
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.
4
293 comments
JR Lausin
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,
1
Paolo Votta
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!
0
이상담
I want similar, but in a pop up window format rather than a banner. Is this also possible by modifying codes provided here?
1
Frank Ippolito
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?
0
Stuart Buddrige
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.
0
David Crichlow
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
0
Stuart Buddrige
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;
}
0
David Crichlow
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.
0
Stuart Buddrige
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"
0
David Crichlow
Stuart Buddrige 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.
0
Sign in to leave a comment.