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
ModeratorWes
@Keiron & Sharon - Enjoy and thanks so much for the coffee donations. I really appreciate it :-)
0
Scott Haugsjaa
Hi @Wes, thanksf or sharing this! We installed this on our help center and it works perfectly. We would like to modify the banner so that it's not as tall. Would you be able to suggest how to make the banner not at thick? Thanks!
0
ModeratorWes
@Scott - You can adjust the padding in your CSS. Find the below code:
padding: 10px 20px 20px 20px; <----EDIT THIS LINE
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;
0
Scott Haugsjaa
@Wes - Thank you so much! Brilliant!
0
Scott Haugsjaa
Is anyone experiencing issues with this lately? Our Alerts seems to have stopped working and I even redid the instructions, but the alert banner isn't showing anywhere.
0
ModeratorWes
@Scott - I just took a look and seeing the same issue. It looks like Zendesk is having an issue with their jquery, I'll submit a ticket to them.
0
Mike Tamosaitis
@Wes - Please let me know what you find. Because I am also having this issue.
0
ModeratorWes
@Scott & @Mike - Looks like this was an issue on Zendesk end as everything started working again on my demo site. Can you confirm this on your end?
0
Scott Haugsjaa
Yessir! It's working again. Thanks for jumping on this Wes.
0
Mike Tamosaitis
Yes it is working again thanks.
0
David
This is truly brilliant.
I may have missed it, but did someone relate to how (practically) I can limit the banner to appearing on the home page?
I would need an actual example of how to adjust the JS because I don't have any experience at all....
Also, the x only appears when i checked this as another user, but I (as the admin) don't see it, and I can't close the notification box.....
Thank you!
0
Emiliano
Ciao Wes,
How are you? We are a very demanding community and you are too generous!
Drink some healthy tea instead of coffe ;-)
We have some problems with the Notification-banner too.
All of the code is installed but nothing is showing up as some other users described before. I believe it must be something in JS.
We did quite some testing on the JS so i hope we did not end up breaking something important. I hope this is not the case.
Here is a screenshot
As you can see there are two $(.document.ready) functions. Could this be the problem?
I tried already to change the url to "http" from "https" and also "suport.myname.com" to "myname.zendesk.com" but it did not do the trick.
The console shows a couple of errors but they do not seem to be relevant.
Anything you can think of?
0
ModeratorWes
@David - Look at the very bottom of the readme on the GitHub link. You will find out how to limit it to just the home page.
0
ModeratorWes
@Emiliano - Thanks for the healthy tea. I've verified the code is correct and is working on my demo site as its supposed to. Without looking at your code, I would think there is some custom code that is interfering with the notification code. If you need for me to take a look at your code you can find me hanging out on my SLACK channel.
0
Andrew Halsell
Hi Wes - I'm having some trouble getting the notifcation banner to display with the Copenhagen theme. I've checked the JS to make sure that looks correct, and have an article setup, unprotected with the proper label - just can't get the banner to display in the header.
I saw you mentioned the Copenhagen theme came after you provided the original code - any updates on what needs to be done specifically for the Copenhagen themed ZD sites?
Thanks!
0
ModeratorWes
@Andrew - I have verified the notification does work with the Copenhagen theme.
0
Stoddard, Scott
Wes - This works great. However, I want to make the transition animation the reverse of the entry animation. Right now when you close it's too quick and want it smoother. What's the CSS I can add to the animation to make that work? Thanks
0
Mikaël Janssens
Any other user experiencing problems since the latest Zendesk "Guide" release with the Notification Bar?
0
Kieran O'Sullivan
Hi Wes,
I have added the code to the Copenhagen theme and it works great. Is it possible to create a second banner with a different label and colour?
Thanks
Kieran
0
ModeratorWes
@Kieran - Anything is possible just have to modify the code.
0
Ruth Dilig
Hi Wes, thank you for this tutorial. I have tried it but I found out that labels can no longer be accessed by end-users. Do you have any suggestions or workaround regarding this? Thanks
0
ModeratorWes
@Ruth Anne - Where did you hear that from? Labels are part of the articles and really have nothing to do with end users. You can actually show the labels on your articles so I'm afraid the information you got may have been wrong. Can you give me the details on where you got that information and I'll see what I can find out?
I've verified the code still works without any issues.
0
Marick
No help needed anymore. Somehow it showed after some time again. Not sure if it was some hickup in loading somewhere.
-----
Hi, I am very new to all types of editing in html/css/js and Zendesk itself. I tried to do some adjustments like adding the notification bar. At first it worked. But I think after trying adding another feature something went wrong and I haven't seen an undo button in the editor. Maybe it's something small as a { not right. I noticed also an other features showing only 3 articles isn't working anymore. Anyone who can help me?
0
Vlad
Hi Marick, any chance you could provide us with the link to your help center? It's pretty hard to catch the issue from this point.
0
Marick
Hi Vladan, I understand. It's still behind the scenes at this moment. The banner is back, the 3 articles are back. Just don't get a tag like your 'community moderator' working in the copenhagen theme. But that's a question for another topic.
Can I share my not yet published help center already with you by the way?
0
Vlad
Hmm, could you create a sandbox and share it with us?
0
Marick
Not sure how to do this since I found sandboxing can only be done with Enterprise? Sorry, you see my beginner level shining through here.
0
Vlad
You're right, SB option is just on the enterprise plan. I'm not sure if there is any other solution for me to have a look into :/
0
Marick
No problem, magically the basic things I've set are working now. Thanks for helping so far!
0
Daniel Chesney
This is brilliant ty so much, I'm wondering though how would I got about adding a second style that if we put another tag on the article to say "complete" in then changed the colour of the Bar to be a nice green to indicate all is right with the world again :)
Thanks
Daniel
0