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
Kyle Beaulieu
After the good ol' "delete and see what happens" troubleshooting, I found that if I delete the padding for ns-box2, the height matches that of ns-box. Could the padding from ns-box affect ns-box2 somehow? That's very strange to me.
0
Kyle Beaulieu
I have a strange issue that I can't figure out for the life of me. I'll post the code at the end of this.
I have 2 alerts, one red for outages and one green for when the outage is resolved. I copied the code from the OP and made some minor tweaks to get it as desired. They both function properly, but the green alert is bigger (taller) than the red one.
At first, I thought I tweaked the wrong thing, and maybe it was my margins or something. So I started from scratch. I coped the code from the OP again, made some changes to the sizing, and removed the megaphone kind of thing, and when I liked it, I copied that and made it my green alert, only changing the background color. So everything should be the same, yet it isn't.
Here are some examples of what I mean. For this test, I used the same article without modifying it. I only modified the "label_names=alert" part to the .js to use style1 or style2. Here is the red alert:
And here is the green alert:
The red alert is 53 pixels tall and the green is 84 pixels tall. No idea how there is a difference.
Here is the code from my .css:
And here is the code from my .js:
0
Alejandro Colon
Chris Horroll
Glad I could help. :)
Have a great rest of your day!
0
Chris Horroll
Worked a treat, and it made sense as to why too! Thanks for all your help Alejandro!
0
Alejandro Colon
Chris Horroll
I had an inkling that was what you were looking for but I was not quite sure.
There are probably a couple of issues you are experiencing. The first 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. The second is that you are most likely utilizing the same div class for each Notification Bar, this is also probably causing some issues as well.
CSS Issue
To fix the first issue, go through your CSS code and where the ".ns-box" is included in those will also have to be duplicated.
Use Multiple Notifications on the Same Page
To add multiple notification bars to the same page, you will need to create a separate HTML div and class.
Duplicate HTML code provided for the Notification Bar
<!--This should be added at the very top -->
<div class="alertbox"></div>
I would suggest something like the following:
<!--This should be added at the very top --><div class="tipbox"></div>
The new code should look something like this:
<!--This should be added at the very top -->
<div class="alertbox"></div>
<!--This should be added at the very top -->
<div class="tipbox"></div>
Then you will need to update your js code from this:
The updated code should look like this:
That should allow you to have 2 completely separate Notification Bars.
0
Chris Horroll
366249934668
Thanks for your reply, really helpful. I was actually hoping to be able to use multiple labels at the same time, it's been a bit hit and miss but I've managed to get it to a point.
(Essentially I want to be able to have the announcements up, but also, have one below it for weekly tips. They won't always be both on display at the same time but i'm sure it will occur at some point)
So far:
the js
// MW-Notification Banner
if (window.location.href == "https://support.zoopla.co.uk/hc/en-gb") {
$.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=announcement" ).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-bullhorn"></i></i><p><strong>Announcement</strong></p><p><a href="'+ item.html_url + '">' + item.title + '</a>' + '</p></div><span class="ns-close"></span></div>'
$('.alertbox').append(style1);
});
$('.ns-close').on('click',function(){
$(".alertbox").remove();
});
});
$.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=toptip" ).done(function( data ) {
$.each(data.articles, function(index,item) {
var styletip = '<div class="ns-boxtip ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><i class="far fa-comment-dots"></i></i><p><strong>Top Tip!</strong></p><p><a href="'+ item.html_url + '">' + item.title + '</a>' + '</p></div><span class="ns-close"></span></div>'
$('.alertbox').append(styletip);
});
$('.ns-close').on('click',function(){
$(".alertbox").remove();
});
});
}
the css
/*MW-Notificaiton Banner CSS */
/* Common, default styles for the notification box */
/* change the background color by editing "background" */
/* change the text color by editing "color" */
.ns-box {
background: rgba(255,87,34,100);
padding: 10px 20px 20px 20px;
line-height: 1.5;
z-index: 1000;
pointer-events: none;
color: rgba(255, 255, 255, 1);
font-size: 85%;
border-bottom: 1px solid #DDD;
}
.ns-boxtip {
background: rgba(26,155,224,1);
padding: 10px 20px 20px 20px;
line-height: 1.5;
z-index: 1000;
pointer-events: none;
color: rgba(255, 255, 255, 1);
font-size: 85%;
border-bottom: 1px solid #DDD;
}
.ns-box.ns-show {
pointer-events: auto;
}
.ns-box a {
color: rgba(255, 255, 255, 1);
opacity: 0.7;
font-weight: 700;
}
The Announcement bar is fine and has worked well, but the tip one:
Do you have any suggestions? Much appreciated
0
Alejandro Colon
Just glad I could be helpful.
To be honest, I am a little surprised.
Have a great rest of your day!
0
Kyle Beaulieu
Thanks, Alejandro! That worked! For a little more detail on what Alejandro explained, here is what I did:
In the .js file, I changed this:
to this:
Then went into the .css file and changed this:
to this:
Now I get a red banner when there is an "alert" and a green banner when there is a "alertresolved".
Thanks again!
0
Alejandro Colon
Chris Horroll
Wes would be the best person to ask but taking a quick look at the code you should be able to modify it to have multiple announcements types or variations by using different trigger labels.
The following instructions should get you most of the way there. Let me know if something does not work as expected. I can try and help.
-------------------------------------------------------------
Assumptions:
Caveats:
Allow multiple labels to be used:
That should allow you to have different labels that you can use.
Change the CSS for the new trigger label:
That should allow for different colors and versions
Adjust the code for the new trigger label:
That should allow you to change the label and different CSS code will be used to generate the notification. i.e. whatever change you want shows up
----------------------------------------------------------
0
Kyle Beaulieu
Chris Horroll I just logged on to post this exact question. Looks like you beat me by 6 hours.
I tried to duplicate the script but change the label that it looks for, but that didn't work. Following to see if we can find the answer.
0
Sign in to leave a comment.