Adding a notification banner to your Help Center v2

@Edmund - I believe it should appear even though you are not live.  Try the following:

Make sure your JS is below the $(document.ready) function 

Change your code to:

 $.get( "/api/v2/help_center/articles.json?label_names=bigalert" ).done(function( data ) {

Let me know if that helps.

Hi Wes,

Your recommendation to move the JS code to below the $(document.ready) function worked.  Thank you for your guidance.  The notification banner is gorgeous!

A follow-up question if you don't mind.

After entering one and two notifications, I noticed the notification banner's close button "X' at the upper right corner disappeared (see screenshot).  I saw the "X" when the page/notification first loads, but then disappears.

Tried clearing cache and using Chrome and Firefox on Mac.

Have you seen that before? 

@Edmund - Its not doing that in the demo site so I bet its a CSS issue somewhere with that theme.  When I get some time I'll plug it into the Copenhagen theme and see if I get the same results.

By the way I also have accordions for the Copenhagen theme just haven't had time to post all the code.  You can see it here.

Wes,

When I try to use the alert for a category with a title that is not in English the alert code does not work. When I paste any URL for the place that I want the alert to appear that has something other than English in it I get a bunch of random characters like the link below. How can I tell Zendesk to use the correct characters? I read that I should be able to use the decodeURIComponent but Im not as good at Java as you are. Or how can I change the existing code to only use the part of the link below up to the category number. 

..../hc/ja/categories/201299046--%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AB%E3%81%AF-%E3%82%88%E3%81%8F%E5%AF%84%E3%81%9B%E3%82%89%E3%82%8C%E3%82%8B%E8%B3%AA%E5%95%8F%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F

@Mike - Sorry I haven't tested this with different languages but hopefully I can get around to it just not sure when.  If someone else solves feel free to submit a commit to my github where the code is posted.

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? 

Hi Wes,

 thanks for this it is really helpful, I am using the copenhagen theme and it is not showing the x to close out the alert, I was wondering if you had any ideas on how to fix that.

thanks,

Jason

Hi Wes,

Thanks for the above code, it has been very helpful for our help centres, I have one question, what can I do when there is no alert tag set to any KB articles? At the moment it shows an empty placeholder of where the alert bar should be and looks as attached.

Is this something you have taken into account or would this need a further JS if statement?

Kind regards

Ben Tyler

@Ben - If you don't have a tag then it wouldn't show anything at all, it only shows the alert when a tag is in place.

@Jason - I will have to take a look, copenhagen theme didn't exist when this was created so it may have some CSS that is interfering.  

Really great work on this banner Wes!  It works beautifully.  Thank you!

@Lisa - thanks for the great feedback.

I may have missed it in the comments, but has anyone figured out how to set this up to work for a community post?  We have taken to using the community to update our customers over articles and would love to promote these posts over articles.

@Daniel - You couldn't use this solution in the community as it deals with labels however you could go back and look at the older solution where it was using a key word in the title.  It is possible to use something like this in the community but would need a little code re-work.

This is great! Thank you!

Is there any way to turn the alert off for users who click the "x" ? They are essentially opting out at that point and the alert pops up on every page necessitating that the use keep closing the message.

I am coming back on previous request: how do we make the banner available in different languages? We use the Help Center in 4 different languages. If we create an article localized in 4 languages only the default language is displayed which make for us useless this feature. Any idea?   

Hi Wes,

I'm looking for some help with the older version that works on the Team plan. I have added the JQuery right underneath the $(document).ready function, have the CSS added, the HTML in the Header, fa link in the document head, and an article with the word "Issue" in the title, but nothing shows up. If I change the "display" attribute in the .notification style from "none" to "show," then a banner does appear, so I'm pretty sure it's an issue with the JS, but don't have any ideas at this point. Any thoughts on what to try next?

Hi Wes & everyone else

Thanks for this - it was very helpful :-)

We at ChurchDesk also has the issue with supporting different languages. This is how we solved it:

We modified the JS code to identify the language selected on your Zendesk helpdesk. We find this by inspecting the browser in every language.

We added this: var lang = $('html').attr('lang');
So if you have these languages: Danish, English and German, my tags will be: alert-da, alert-de & alers-en-US which I can add to the respected articles for every country.

To use this method, you can copy and replace the code below. Remember to change the "YOURDOMAIN" part.

// MW-Notification Banner

var lang = $('html').attr('lang');

  $.get( "https://YOURDOMAIN/api/v2/help_center/articles.json?label_names=alert-" + lang ).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();

 });

@Birita - First off thank you so much for contributing and posting your code for others as thats what the community is all about.  Feel free to make a commit on my GitHub Page and I will include it in the main code base so it will be easier to find.  Every time I started to take a look at this something else popped up so thanks for picking up my slack :-)

Yes, Birita, this is awesome. Thanks for sharing your solution!

Hi Wes, Just wanted to say thanks for this. We were looking for this type of solution. It works great!

--James

@James - Glad to hear.  If you run into any issues just let me know.

Now Zendesk release Connect, we can send campaign to user directly.

This, too, is awesome Wes!  I have it up and running.  Thank you so much!

And, I am curious, like @Duke above, and would also like to know if there any way to turn the alert off for users who click the "x" ?

Thanks!

@Keiron - this is where it gets a little complicated.  In order to know this information you would need to send a cookie so the browser knows if you've visited the site before or not.  I've done this in a clients Help Center before so yes it is possible but with more work and coding involved.

You could also use JQuery to only show the alert on the Home Page and not all pages but it would re-appear every time they visited the Home Page unless the cookie solution is implemented.

Ahhh, yes, the marvellous cookie - Thank you very much!

Keep up the great work, Wes!  Next coffees on me :)

My Tip:  

Article must be published for the banner to be visible to end-users.  Otherwise, (in Draft) the banner is visible to admins only.

@Wes My idea for the banner at the moment is to use it to deflect tickets into the forums (i.e. promote the forums), and so made the banner to show only on the ticket submission page - a perfect solution.  Thanks again for another great ideas!

@Wes - this is awesome and worked perfectly! Enjoy your coffee :)