Adding a notification banner to your Help Center v2

Thanks! I actually managed to figure it out...

I changed the opening <a> tag of the js file to include the URL that I wanted the banner header to open, as in the following example:

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="https://yourURLhere.com">' + item.title + '</a>' + item.body + '</p></div><span class="ns-close"></span></div>'

Hi Zendesk Support,
Is this the correct location of the codes that you have provided?

Hi,

Have people managed to get the banner to only display the first time a user accesses the Help Center (i.e. check for a certain cookie on loading, if the cookie is not present display the banner, when user closes the banner create the cookie so it isn't displayed next time)?

I know a few people  mentioned it - Wes said he'd done it for a customer site at one point.

Hello,

We set up a notification banner, which work fine for us and most of our users. However, one of our end user using edge reported that she was disconnected from the Help Center after a few minutes (3-5 min). browser's console shows authentication denied (401) on the following API calls that we've added in script.js

Have they already been reports of such bahevior on Microsoft Edge?

Hi Thibault,

Microsoft Edge isn't a supported browser by Zendesk.  I suspect this may change in the near future as Microsoft has been rebuilding Edge to use the same backend as Google Chrome.  Are you seeing these errors with any other browser of just Edge? 

It has never been reported before so to my knowledge, only on Edge indeed. End user has now migrated back to IE and it seems to work fine for now... Irony?

Hi Wes,

I followed what you did exactly and this is what is outputting. What could the problem be?

Thanks

Hey Krista

That $(document).ready(function() { (and the closing brace you need at the end) may be the culprit.

Can you open your browser console (right click->inspect-.Console) and put any errors that come up when the banner should load here? Or if you have the theme live, a link to a page that should have a banner?

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?

This is so awesome, although I do wish that it was a native part of Zendesk and/or the Copenhagen theme.  The only problem I'm having is with color, for some reason, no matter what I do, I can't get the color of the banner or text to change to anything other than the default.  Anyone have the same issue or can explain what I need to change to make this?  I attempted to change the CSS as Wes mentioned but it didn't appear to work. 

Hey @...

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

Hey @..., take a look at this: https://github.com/moderatorwes/Notification-Banner/blob/master/zendesk.js

You can simply use $('html').attr('lang').toLowerCase() too in place of locale to prevent any further issues.

Cheers

Team Diziana

Hey @...

This was actually what I was using - the weird thing is I just tried reverting back to this, and it still works. 

Don't know if some mad cache is going on or something, but I tried everything to get it working as an anonymous end-user, but to no avail.

@... @...

I've had the same thing, whereas we can see the banner when signed in but anon/external users aren't seeing it. I tried Simon's suggestion but didn't find that it helped. I'll keep digging.

Hi @...

We've had your notification banner functioning in our Help Center for quite some time now. It has suddenly stopped working consistently. Doesn't load at all on mobile anymore it appears and is inconsistent on appearing when accessing our Help Center through web. 

We haven't made any recent changes, so I'm not sure why the sudden change. Any assistance to why this may have occurred would be appreciated! Thanks.

Active Feature Request (please vote):

Feature Request: Add a notification banner to Help Center

@...

I know you saw the Feature Request I just posted for this at the link below. But, this is for everyone else, If you would like to see this feature please head over there and show your support. Please make sure to add an upvote and comment even if it is simply a "+1"

Also, you may consider adding it to your post to get the feature request more visible.

https://support.zendesk.com/hc/en-us/community/posts/360046767274-Feature-Request-Add-a-notification-banner-to-Help-Center

This super useful, thanks! If you don't have access to a developer or you don't know how to code yourself, you can check out newclick.io. It's a great little SaaS app to design and display announcement banners. I created it and use it quite a bit with some of my clients that need notification messaging for outages and feature updates! 

Out of interest, and apologies if i'm in the wrong place, I've been using the banner for some time now on the homepage of a help centre using the label of 'announcement'. Is it possible to use multiple labels and have each banner coded differently - ie an announcement banner in an orange, and a hints and tips one in blue for example?

Thanks

@... 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.

@...

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:

• You do not want multiple announcements on the same page. 
• You know how to change the CSS code to get your expected outcome

Caveats:

• You are ok with duplicating code
• This will be inefficient
• This will most likely break if you tried to use multiple labels at the same time and that is ok.
• There will be some trial and error since I have not implemented this code on my site.

Allow multiple labels to be used:

1. Duplicate the Zendesk.js code from the repo
2. In the duplicated code change the "label_names=alert" to whatever the new label you want
3. Test that the new trigger label will also trigger the notification banner.

That should allow you to have different labels that you can use.

Change the CSS for the new trigger label:

1. Identify the CSS that needs to be adjusted for the change you want to make
2. Duplicate the specific class or classes in the same place and suffix the class name with something (a number or the label) Example: .ns-box-hint or .ns-box-1
3. Keep track of all of the classes that were changed

That should allow for different colors and versions

Adjust the code for the new trigger label:

1. Find the zendesk.js duplicated code with the different trigger label
2. On the line with "var style1=" change any of the classes you created previously for the new 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

----------------------------------------------------------

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:

  // MW-Notification Banner
   $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/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();
  });
    
  });

to this:

  // MW-Notification Banner
   $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/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();
  });
    
  });
   $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=alertresolved" ).done(function( data ) {
     
   $.each(data.articles, function(index,item) {
     
     var style2 = '<div class="ns-box2 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(style2);
   });
   $('.ns-close').on('click',function(){
    $(".alertbox").remove();
  });
    
  }); 

Then went into the .css file and changed this:

/* change the text color by editing "color"  */
.ns-box {
	background: #e84325;
  position: center;
	line-height: 1.4;
	pointer-events: none;
	color: #e7e7e0;
	font-size: 84%;
  border-bottom: 1px solid #e7e7e0;
}

to this:

/* change the text color by editing "color"  */
.ns-box {
	background: #e84325;
	padding: 10px 10px 10px 10px;
	line-height: 1.4;
	pointer-events: none;
	color: #e7e7e0;
	font-size: 84%;
  border-bottom: 1px solid #e7e7e0;
}
.ns-box2 {
	background: #008E13;
	padding: 10px 10px 10px 10px;
	line-height: 1.4;
	pointer-events: none;
	color: #e7e7e0;
	font-size: 84%;
  border-bottom: 1px solid #e7e7e0;
}

Now I get a red banner when there is an "alert" and a green banner when there is a "alertresolved". 

Thanks again!

Just glad I could be helpful.

To be honest, I am a little surprised.

Have a great rest of your day!

@...

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:

• Doubled in size
• Not centred
• Text colour doesn't follow suit as per the code

Do you have any suggestions? Much appreciated

@...

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.

• For example, I see that you created ".ns-boxtip" 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-boxtip"

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>

<!--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>

// 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();
});

});
}

// 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>'

$('.tipbox').append(styletip);
});
$('.ns-close').on('click',function(){
$(".tipbox").remove();
});

});
}

That should allow you to have 2 completely separate Notification Bars.

Worked a treat, and it made sense as to why too! Thanks for all your help Alejandro!