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 @Bee Hive,
Zendesk has updated its theming template since the time this post is created. You will not find the HTML or CSS tab anymore in the Guide instance now.
However, in response to your question, when you are editing the code, you can paste the code mentioned for the style.css file as it is in the style.css file under the left sidebar when clicking on edit code.
For the header.html file, paste the code in the header.hbs file and instead of zendesk.js paste the code in the script.js file.
Let us know if this helps you.
Thanks
-
The link to "Live Demo" is broken.
-
Hi Itay,
Thanks for the heads-up – I've removed that link as the help center it pointed to is no longer active.
-
Hi ModeratorWes - great work, I love it!
A small question:
How can I make the closing of the banner persistent for that session?
If the user clicked on the "X" of the banner, I don't want it to pop up again whenever the user moves around pages in the Help Center as it can be annoying.
Thank you!
Please sign in to leave a comment.
244 Comments