Adding a notification banner to your Help Center v2

211 Comments

  • Jessie Schutz
    Zendesk team member

    Hi Mary!

    I've checked with our Community Moderators to see if they can help you out with this. Hopefully one of them will have some insight to share!

    0
  • Mary Haberle

    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>'
    0
  • Nicole S.
    Zendesk Community Team

    Glad to hear that you got things working, Mary! Thanks for letting us know.

    0
  • Clarence Mendiola

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

    0
  • Brett Bowser
    Zendesk Community Team

    Hi Clarence,

    I do want to set the expectation that the code you're referencing was posted by one of our community members and is actually unsupported by us at Zendesk.

    Judging from your screenshot I'd say the code is in the correct location. If you're experiencing issues you'll want to get your developers involved or you can post back here and one of our other community members may jump in :)

    Cheers!

    0
  • Thomas Crowley

    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.

    0
  • Thibault AMMAR

    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?

     

    0
  • Dan Cooper
    Community Moderator

    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? 

    0
  • Thibault AMMAR

    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?

    0
  • Carl Cassar

    Hi Wes,

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

    Thanks

    0
  • Dan Ross
    Community Moderator

    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?

    0
  • Kelly Ngo

    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?

    3
  • Eddie Sawyers

    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. 

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Eddie,

    Any chance you could provide us with the CSS that you're using to change the color of the text? It's possible that this CSS is being overwritten by another in your theme.

    Let me know!

    0
  • Simon Blouner
    Community Moderator

    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

    1
  • Trapta
    Community Moderator

    Hey Simon Blouner, 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

    0
  • Simon Blouner
    Community Moderator

    Hey Trapta

    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.

    0
  • Matt Taylor

    Trapta Simon Blouner

    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.

    0
  • Radele Rose

    Hi Wes Drury

    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.

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Radele,

    It looks like you received your answer on the following post: Help Center Banner Help.

    Hope this helps!

    0
  • Alejandro Colon

    Active Feature Request (please vote):

    Feature Request: Add a notification banner to Help Center

    Wes Drury

    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

    0
  • Alex Daro

    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! 

    0
  • Chris Horroll

    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

    0
  • Kyle B

    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
  • 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:

    • 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

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

    0
  • Kyle B

    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!

    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
  • Chris Horroll

    Alejandro Colon

    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

    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.

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

    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:

    // 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 updated code should look like this:

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

    0
  • Chris Horroll

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

    0

Please sign in to leave a comment.

Powered by Zendesk