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!
-
This is great. One question though, the color seems to get lighter L to R. Is there a way to make it just one solid color?
-
Hi Ruth PCL,
What do you have listed in your script.css in the 'background' line of your .ns-box?
For example, mine is setup like this:
.ns-box {
background: #e84325;
(with more padding and other settings)which gives me a solid red bar. I did have to remove the megaphone by changing the display to none (I can elaborate if interested), but it's just a solid line for me.
-
Kyle B Thank you! We had an RGBA value in there. I switched it to hex and it's one color now.
-
I copied the codes as steps in the instructions. I created an article with label as "alert". Since every article need to publish in a section, I see the alert in FAQ of the section. But I don't see any banner showed up. I put the url, /api/v2/help_center/${locale}/articles.json?label_names="alert" to the site. I got the result as
{"error":"InvalidEndpoint","description":"Not found"}My artilce URL is https://teastudentassessments1555347296.zendesk.com/knowledge/articles/8576598013460/en-us?brand_id=360002376392.
Does any one know how I should query the URL for the alert data?
-
f
-
Maybe I need to change my API setting. Brett, Brett Bowser I saw your smiling face here. Do you have any suggestions?
Thanks,
-
Hi Suhan,
Based on the context shared, the locale value provided tourlmay be invalid. Though the script should be retrieving it directly from the document. Can you double check your code to define url ? Keep in mind that it is a template string so it should be wrapped in backtick (`) characters, rather than single quote characters (').
-
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 Stuart Buddrige,
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 Singh - Thanks for helping out!!
Brett Bowser & Christopher Kennedy - 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 Singh - 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!
-
Stuart Buddrige 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 Kyle B - 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?
-
Stuart Buddrige 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!
-
Stuart Buddrige - 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 Singh who is a coding guru.
-
Hi ModeratorWes - thank you for the reply.
Trapta Singh - 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 Stuart Buddrige,
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 David Crichlow - 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!
-
Pierre Lazarus - 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 David Crichlow 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!
-
Hey Stuart,
Can you confirm that you've enabled the "Display unsafe content" option in the Help Center?
More information in this article: Allowing unsafe HTML in help center articles
I hope this helps!
Please sign in to leave a comment.
280 Comments