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 is great and useful, thanks for posting Wes. I'm curious why Zendesk doesn't have a function that easily allows us to turn on/off banners for outages/notifications/ect.
I suspect this is a common occurrence for support, and would be much easier if we can configure within Zendesk, versus needing to have some level of coding knowledge. Does anyone else feel the same?
-
@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.
-
After pasting the CSS code at the bottom of the CSS tab, Zendesk will not allow me to SAVE.
I had no trouble copy/paste/save with the HTML or JS
-
Have we been able to find a solution, for Help Centers in muliple language to display an alert message localazied in the language and/or not display the alert if the article is not translated in that language?
-
Hello Wes, for Help Center in different languages, any update on how can we make the alert to show in the respective language? or even not showing at all, if the corresponding translation in the alert tagged article is not created?
-
@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?
-
@Gaetan - Thanks for the update and glad you were able to get everything resolved. Best of luck and you know where to find us if you run into any other issues.
-
@Deb - I've approved Trapta's code within my github. Please let us know if this solves your issue.
Thanks for the help @Trapta
-
@Petri - I can confirm this will work fine on mobile devices. The issue with the demo is because I'm not using the Copenhagen theme. This was an older theme that users can no longer use I just haven't had the time to move it over to the Copenhagen theme. I've used this on quite a few Copenhagen themes and I can confirm that it works on the Copenhagen theme and it is responsive so it will work across all devices.
-
Thank you for this! So far it's running ok, but I had a couple of questions.
In my testing, I noticed the alignment is off. Does anyone know which CSS item is this affecting? I'm having a bit of a time narrowing it down. EDIT: Nevermind, I realized it was because the alert article was a tad long and pushing the text weirdly.
Also, I noticed that regardless of the article being published or not, the label will still generate an alert. I just wanted to confirm if this was as designed. Removing a label vs. unpublishing an article is about the same effort for me, just helps to know I installed it correctly.
Thank you again for maintaining this wonderful addition!
-
Glad to hear you got it sorted, Christen!
-
We got our notification bar working and looks good! One question, is it possible that the alert is only shown once? Now that you dismiss the alert and come back to the homepage, you are presented the alert again.
-
Hi Petri, good idea and that is doable with a help of JavaScript.
One of the ways, on close btn click, set localStorage eg bannerClosed = true.
Then, if localStorage bannerCosed !== true, show the banner.
Hope this helps.
-
not sure it has been asked already, but looks like the banner is not working for mobile site.
Any ideas?
-
Hey Wes Drury
I recently implemented your awesome banner but experienced that the banner was not showing to anonymous end-users - it showed however when in preview and with the role set as anonymous.
The only way I could get it working was adjusting how the locale was being added to the URL getting the article info.
I simply added the following and adjusted your GET request:
function getLocale() {
return window.location.href
.split('/hc/')[1]
.split('/')[0];
}
var locale = getLocale();
// MW-Notification Banner
$.get( "/api/v2/help_center/"+locale+"/articles.json?label_names=alert" ).done(function( data ) {I just thought I wanted to share this in case anyone else was stumbling into a case like mine.
#helpsome regards,
Simon Blouner
Zendesk Consultant @ helphouse.io -
Glad I could help. :)
Have a great rest of your day!
-
There might be a couple of issues you are experiencing. The first thing I see is that the separation of the CSS for each notification is not complete, this is what is most likely partly causing your issue with it not looking correct.
CSS Issue
To fix the CSS issue, go through your CSS code and where the ".ns-box" is included in those will also have to be duplicated.
- For example, I see that you created ".ns-box2" but I also can see that ".ns-box.ns-show" and ".ns-box a" have not been duplicated. Anywhere where the original ".ns-box" was it will need to be duplicated and replaced with the ".ns-box2"
-
Harriet Klymchuk Thank you for that. And glad I could give you a new phrase. :)
It turns out that this code did NOT work on our sandbox. When I added it to a test version of our actual (non-Sandbox) site, it worked fine. I've been tweaking it to make it look the way we want. I still have some work to do to make it look good on mobile. And I'll probably be tweaking the code a little so we can have multiple alerts with different colors and icons.
Thanks for all your help!
-
Hey Kyle, I'll try and help from my experience with this piece :)
- Yes, the article needs to be published in order for it to appear to whichever users have permission to view the article. However it should show in the preview for you, regardless of whether it is published (at least it does for me :) )
- I'm not 100% on the second point I've only tested this in preview, but if it's published, the banner shows for all users, but the article that the banner is populated from only shows for the user segment it is aimed at. (e.g. I have an article set to be for Agents and admins, it doesn't come up in searches or in the section, but the banner is visible).
- I sometimes see a delay in promoted articles and other Guide changes going live in general, so I think sometimes the theme needs time to update. Normally I use an incognito window on Chrome to check any public facing changes.
Hope that helps!
-
Hey, Kyle B - I can confirm what Harriet has told you.
-
Very cool Wes! Thanks for the post.
-
@Scott - On your CSS tab just click anyway and hit your spacebar and then the SAVE button will be available.
-
Never mind...missed a bracket.
-
I believe copy and pasted correctly....but not working as your.
-
@Scott - Did you copy the HTML to the top of the "header". From your screenshot it looks like its on top of the "Home Page.
-
Yup...just figured it out...I put it in the 'Home Page'
Works great!! Thanks so much!
-
This looks amazing, adding it to my help centre 'to do' list!
-
Any way to just show the article name and not the content?
EDIT: Figured it in two seconds...should've looked at the code.
Just remove ' + item.body + ' from line 6 in the js file.
-
@Brian - I put some Q&A at the bottom of my GitHub page. I figured someone would be asking your exact question.
https://github.com/moderatorwes/Notification-Banner#customizations
If you are just display the title you may want to play around with the CSS and center the title and icon but thats up to you. Thanks for using my solution.
-
Hi Wes,
I am trying to add the notification banner, but we are not using the Pro plan. I am trying the alternate version, but I am missing something. I have taken the promoted articles out of the home page html, and added the other bits of code to the header and js sections and still don't get the alert. What am I missing? Thanks in advance for your help.
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.
226 Kommentare