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.
-
@Keiron & Sharon - Enjoy and thanks so much for the coffee donations. I really appreciate it :-)
-
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!
-
@Scott - You can adjust the padding in your CSS. Find the below code:
.ns-box {background: rgba(192, 57, 43,0.85);
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;}You can change the first and third like so:padding: 5px 20px 5px 20px; -
@Wes - Thank you so much! Brilliant!
-
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.
-
@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.
-
@Wes - Please let me know what you find. Because I am also having this issue.
-
@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?
-
Yessir! It's working again. Thanks for jumping on this Wes.
-
Yes it is working again thanks.
-
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!
-
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?
-
@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.
-
@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.
-
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!
-
@Andrew - I have verified the notification does work with the Copenhagen theme.
-
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
-
Any other user experiencing problems since the latest Zendesk "Guide" release with the Notification Bar?
-
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
-
@Kieran - Anything is possible just have to modify the code.
-
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
-
@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.
-
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?
-
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.
-
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?
-
Hmm, could you create a sandbox and share it with us?
-
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.
-
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 :/
-
No problem, magically the basic things I've set are working now. Thanks for helping so far!
-
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
Vous devez vous connecter pour laisser un commentaire.
280 Commentaires