Adding a notification banner to your Help Center v2
Data ultimo post: 08 feb 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 commenti
Haris Matthaiou
Anyone has a smart way to display this across all brands and languages?
0
Haris Matthaiou
With Guide Templating V2, you'll need to import a jQuery library if you want to use jQuery statements in a theme in place of vanilla JavaScript . So
So you need to add something like this to your document_head.hbs
0
Ji-Sung (John) Kim
how do you make the banner centered and all items next to it has a line break to go below?
0
Greg Katechis
Hi Vamshi! We don't have a native way to do that, but you could utilize the Github integration for Guide and then use a trigger in Github to schedule your updates.
0
Vamshi
Is there anyway where we can create schedule for these banners like planned system outage or maintenance?
0
Gabe Seals
This is an incredibly helpful and relevant article! I just implemented it for my company. Thank you, 1263169216950 for creating such a useful guide!
I would like to suggest one change because I am from the software development side and not a Zendesk Admin: label/article/alert are HTML/JS keywords while also being Zendesk terms. Luckily, someone in the comments referenced creating a Zendesk article - including screenshots - and everything clicked.
Would someone please consider updating the README with the below?
Article Labels
To create an article in Zendesk, click Add then Article
In this new window, place the word alert here:
Now, whatever you write in the Title and Body of the article will appear in your alertbox. For example, this:
yields this:
*** this link covers how to create articles in greater detail: https://support.zendesk.com/hc/en-us/articles/4408839258778-Creating-and-editing-articles-in-the-knowledge-base
Of note:
- In this example, only the Title appears because I switched this Boolean value from true to false. If you leave this value as true, then the contents of your Title and Body will display:
- As noted in other comments and FAQs, the Label(s) you apply to your article should coincide with the const label value in your .js file. For example, I left mine as this so that the screenshot above of the Labels value allowed my Title to appear.:
- You can update this line with the Domain Name that is relevant to your company's Zendesk page:
For example, if your company's Zendesk url is something like https://support.sandwich.zendesk.com/hc/en-us then the url value would be https://support.sandwich.zendesk.com/api/v2/help_center/${locale}/articles.json?label_names=${label}`
1
ModeratorWes
1263082127589 - thanks for the response and 5452197942554 - just let me know if you have any follow-up questions but the instructions should be pretty straightforward.
0
Elaine
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.
0
Gaëtan Tobie-Echeverria
hi, this is still relevant.
0
Hector Jimenez
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.
0
Accedi per aggiungere un commento.