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.
-
Hey Wes,
Not sure im able to add the banner only in the home page like it says in you github instructions, is there an example that you can show?
-
This is perfect! Thanks a lot!
-
@Roteml - You can take a look at the live demo. I used the code on the GitHub page to just show the alert on the Home Page only.
@Catherine - Your welcome and best of luck.
-
This works like a charm! I love that I can just put the Article title and skip the body portion. Thanks so much!
-
@Heather - glad you like it, enjoy!
-
@Wes
I have had this in place for some time now for outage notifications and works great love it!
I want to put a second one in place for announcements (I want to keep it separate as announcements we do allot so don't want to detract away from outage notifications that we use to drive call volume down during these periods. If we have a banner up regular we run the risk of it being ignored when its important.
My view is we keep the alert box for outages. big red banner and then second one that is green for an announcement.
I assume i just enter all sets of code in the appropriate places but rename css classes so they are different and use a different tag? and the webkit items just need a single reference at the end as these would be the same. I'm only looking to change the background/font colors and the icon between the two.
But in some instances we would want the outage notification as well as the announcement to appear.
Hope that makes sense
Thanks
Andrew
-
@Andrew
I recently finished this for my company and we now have red and green banners that work of two different tags. All I had to do was add the style sheet code a second time and change the ns-box to ns-box2 and amend the colour. Then on JS add function code again changing the tag and the ns-box to read nsbox2.
There might be an easier method but I feel satisfied seeing as I have no coding experience.
Dan
-
@Dan,
Thanks for that.
I'll give it a go, I think from a keeping code tidy point of view though pretty sure the webkit items would only need one entry in the stylesheet. I'll try and let you know..
Thanks
Andrew
-
Great work as always Wes, I've just installed this and it works great.
Also, to ensure that these little notification posts aren't visible to customers other than in the banner, I've made the section where I post these alerts to only visible to Agents & Managers.
Craig
-
I used this notification banner before Christmas to update our end users, however, a few days ago it disappeared - no coding changed, we only created a new article but the label is in place correctly.
I removed the banner code from JS/CSS/Header but when I put it back in place just like before, the banner still does not appear. I also removed and recreated the label but still nothing.I've attached some screenshots below:
I tried putting our domain in place as well, helpdesk.yoonla.com or yoonla.zendesk.com, but nothing changed.
The CSS code is at the bottom of the Style tab -
Hi @Jo Saunders,
That's because you missed the closing brackets of function. Simply add }); on line no.19 in your existing code and it will work for you.
Let us know if you still face any issue.
Thanks
-
Hi @Trapta,
Thanks for getting back to me :) It has that on line 18? Either way, I've put it on line no.19 like you said but nothing has changed.
Is this right?
-
@Jo hard to tell without being able to see your site. I just installed this on a clients Help Center and it worked for me so there's got to be an issue somewhere. Is your HC open and if so please provide a link.
-
@Jo - also make sure there is not a space in your label, its hard to tell from your screenshot but there should not be any spaces.
-
Hi @Wes,
Thanks for your message!
Yeah, I'm new at coding so there could definitely be something wrong with what I've typed, but I've copied and pasted pretty much everything so not sure what the issue could be.
My helpdesk is open yes, the link is https://helpdesk.yoonla.com/ (let me know if that's the wrong link?)
Here I've copied the exact code on JS for you, I took out a space between the ("/api/ but nothign has changed:
// MW-Notification Banner
$.get("/api/v2/help_center/articles.json?label_names=alert").done(function( data ) {
$.each(data.articles, function(index,item) {
var style1 = '<div class="ns-box ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><span class="megaphone"></span></i><p><a href="'+ item.html_url + '">' + item.title + '</a>' + item.body + '</p></div><span class="ns-close"></span></div>'
$('.alertbox').append(style1);
});
$('.ns-close').on('click',function(){
$(".alertbox").remove();
}); -
Are you sure its the script that's incorrect?
I have compared to my own and they match other than + item.body + which I removed as I did not require it.
Thanks
Andrew
-
Yes, that's right. Also, on line no.5 add { after function()
Let us know if you still face any issue.
Thanks
-
Hi @Trapta and @Andrew Checkley
Thanks so much!! That was it, that one small bracket haha - they should update the code on that website.
Thanks again :)
-
hello,
Is it working for everybody ( for agent and admin and also for end-user)?
I've follow the procedure and install each file so I get the notification banner when I do the preview from Guide in my custom theme.
But when I logged as end user with a different adress email, I have no notification banner
PS : not a developper but here is the error I see in the dev tools of chrome. related ?
thank you in advance
-
Hi Gaëtan!
The changes won't show up to the public in your Help Center until you've actually published the new code. You mentioned that it showed up in Preview mode...have you actually published the new code yet?
-
hello Jessie,
the code is saved and published. This is my live theme :-(
No change made on the CSS, I copy paste it at the bottom of the existing css file. Here is the JS piece if it can help.
and the header.
-
@Gaetan - I just installed this on two clients Help Centers so I know all the code is still working. A couple of things to take a look at. Make sure the code is below the $document.ready {function and also make sure your article is visible to anyone. If the article is behind a section only open to agents and managers then it will not be view-able. Other than that the code may not be running due to other issues so move the code to the very top right below the $document.ready function.
Let me know how it goes.
-
If the article is behind a section only open to agents and managers then it will not be view-able.
=> that's it ! thank you it solve my issue
-
Thanks for jumping in, Wes!
Gaëtan, let us know if you need anything else!
-
@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.
-
Hi Wes/All,
Great tips and supremely helpful! I was able to set up the notification banner and begin styling it.
I don't understand where I'm supposed to add the code to only show the banner on the Home page (using the instructions at the bottom of the Github page). I've added it to the MS Notification code section, and at the beginning and end of the entire page code, but it's not working and just hides the banner. Can you please provide more specifics on exactly where to add it into the JS file?
Thanks!
Deb
-
Shout out to Birita's post on how to show alerts in different languages!
This worked if I made discrete, standalone articles in each language, but didn't work using translated articles that were associated with a parent article. Our help center is only in English and Spanish at the moment, and I would normally have just created one parent English article, then added the associated Spanish article (this is assuming you have the same alert that you need to show in multiple languages).
Using the labels alert-en-US for English articles, and alert-es-419 for Spanish articles, worked - but again, only if they were completely separate from each other, which makes article management a bit more work.
Has anyone else tried this and found a way to post alerts in different languages, using variants, labels, or another way?
Thanks!
Deb
-
Hey Deb! I've pinged Wes to see if he can jump in here wen he has a second. Stand by!
-
Hi @Deb - To answer your first post the code will look like this:
// MW-Notification Banner - make sure the name below matches your helpcenter url
if (window.location.href == "https://moderatorwes.com/hc/en-us") {
$.get( "/api/v2/help_center/articles.json?label_names=alert" ).done(function( data ) {
$.each(data.articles, function(index,item) {
var style1 = '<div class="ns-box ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><i class="fas fa-exclamation-square fa-3x" style="color:#17B7FF"></i><p><a href="'+ item.html_url + '">' + item.title + '</a>' + item.body + '</p></div><span class="ns-close"></span></div>'
$('.alertbox').append(style1);
});
$('.ns-close').on('click',function(){
$(".alertbox").remove();
});
});
}For your second question I haven't played around with the languages for the alert system so this is something I will have to take a look at or hopefully someone else in the community will have a solution. I agree that haveing multiple articles is not the ideal solution as you should be able to make it work by plugging in a language selector built into the alert system. If no one else comes along then I'll take a look and see if I can figure out a solution for you.
-
Hi @Deb,
In order to answer your second question, just update the third line of Wes's code to the below line -
From:
$.get( "/api/v2/help_center/articles.json?label_names=alert" ).done(function( data ) {To:
$.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=alert" ).done(function( data ) {Let us know how it goes for you.
Thanks
Trapta
Por favor, entrar para comentar.
287 Comentários