Adding a notification banner to your Help Center v2

179 Comments

  • Wes Drury

    @Deb - I've approved Trapta's code within my github.  Please let us know if this solves your issue. 

    Thanks for the help @Trapta

    1
  • Petri Lehtinen

    Looks really useful, thank you! One question, does this work in mobile? At least on the demo site, it didn't.

    0
  • Wes Drury

    @Petri - I can confirm this will work fine on mobile devices.  The issue with the demo is because I'm not using the Copenhagen theme.  This was an older theme that users can no longer use I just haven't had the time to move it over to the Copenhagen theme.  I've used this on quite a few Copenhagen themes and I can confirm that it works on the Copenhagen theme and it is responsive so it will work across all devices.

    1
  • Petri Lehtinen

    Excellent! Thank you for the quick response. We'll try it out soon!

    0
  • Christen Bejar Sandbox

    Thank you for this! So far it's running ok, but I had a couple of questions. 

    In my testing, I noticed the alignment is off. Does anyone know which CSS item is this affecting? I'm having a bit of a time narrowing it down. EDIT: Nevermind, I realized it was because the alert article was a tad long and pushing the text weirdly. 

    Also, I noticed that regardless of the article being published or not, the label will still generate an alert. I just wanted to confirm if this was as designed. Removing a label vs. unpublishing an article is about the same effort for me, just helps to know I installed it correctly.

    Thank you again for maintaining this wonderful addition!

    1
  • Nicole - Community Manager

    Glad to hear you got it sorted, Christen!

    1
  • Deb Chatigny

    Hi @Wes and all,

    Sorry it took me a bit to get back to you. It's 95% working for me, and here's why.

    I'm trying to use a combo of several of the awesome code samples here, as I'm trying to:

    1. Have a notification banner in multiple languages, and

    2. Have the banner only display on the home page.

    I can do one or the other, but not both. Here's the code that I have in place at the moment; with this, I can restrict the banner to the home page, but I'm pretty sure the domain info in the first line of code is not allowing the Spanish banner to load (using the lang attribute and a custom label, as Birita suggested). 

    If I take the top line of code and bottom bracket out, I can get it to work great on both supported languages, but the banner appears (and is dismissable) on every site page

    Also, I ran into the X/dismiss button in the top right disappearing for me, but once it was published and live on our help center, the X was visible and persisted.

    Thank you all for any/all help!

    Deb

     

    0
  • Trapta

    Hi @Deb Chatigny,

    Try using the below code and let us know if you face any issue -

    var lang = $('html').attr('lang').toLowerCase();
    if (window.location.href == "https://yoururl.zendesk.com/hc/" + lang) {

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

    Team Diziana

    0
  • Petri Lehtinen

    We got our notification bar working and looks good! One question, is it possible that the alert is only shown once? Now that you dismiss the alert and come back to the homepage, you are presented the alert again.

    1
  • Vladan Jovic

    Hi Petri, good idea and that is doable with a help of JavaScript.

    One of the ways, on close btn click, set localStorage eg bannerClosed = true.

    Then, if localStorage bannerCosed !== true, show the banner.

    Hope this helps.

     

     

    1
  • Massimo DiDio

    not sure it has been asked already, but looks like the banner is not working for mobile site. 

    Any ideas?

    1
  • G D

    This is great thank you. I’m using it to give our customers the cookie opt-in notification (gdpr compliance). I have it set to show on any page (because users often go right to articles) and set a local storage key (instead of a cookie) upon close to ensure it is only shown once or at least until the key is deleted.

    It’s not working for the mobile site but I haven’t looked into it yet.


    UPDATE

    I am not able to get this working with the adaptive mobile layout option enabled (the option in the screen shot below):

     

    The banner works fine on a mobile with this option disabled, but of course the format is for a desktop not a mobile.  Likewise it works with this option enabled if I request the desktop version of the site via my mobile browser.

     

    I'm using a custom theme that was built years ago, so perhaps the issue is that this is not a version of the copenhagen theme?  I've seen the comment about it working on mobile with a copenhagen theme but not the live demo (older theme).


    Does anyone know how to get this working with the built in mobile layout option enabled with a custom (likely non-copenhagen) them?

     

    Thanks!

    0
  • Jessie - Community Manager

    Hi GD and Massimo!

    GD is exactly right. The older Help Center themes (pre-Copenhagen) are not a responsive design, which means that the mobile layout option has to be enabled for it to render in a mobile-friends way on smaller devices.

    However, if you're on Copenhagen, this theme is responsive design out of the box, which means that the mobile layout isn't necessary and should be disabled. Mossimo, my educated guess is that this is what you're running into.

    GD, it's possible to convert an existing old theme to a responsive design but it'll require some pretty extensive custom coding. If you don't want to do a redesign, or move over to the Copenhagen theme, I'd recommend that you disable the mobile layout option to ensure your mobile customers see your banners.

    0
  • Cyrup

    Hi all, 

     

    I've seen a similar thing done on another help center:

    I heard on the grape vine that this is done by simply adding a tag such as "KB_pin" or similar to the article labels. I'm on a really old custom theme, not Copenhagen, so I am not sure if it will work, but does anyone happen to know the method?

    0
  • Wes Drury

    @Cyrup - Adding a tag will not work unless you put the custom code in place.  You will have to write some custom code or if you are using the tutorial above then you can copy and paste the code.  The code will work no matter what theme you are using, even the older themes.  The code above uses the  label "alert" to trigger the alert to appear.  If you have any questions along the way just let me know.  Best of luck.

    0
  • Brian Kopacz

    Thanks for this feature Wes.  It's really cool.

    I have one issue I cannot seem to figure out.  The banner loads fine however the "x" to close the banner is missing from the right.  Oddly, when I refresh the page, it appears briefly, then goes away.  I cannot seem to get it to stay in place.

    I am using the js code exactly, and playing with the css to try and make it appear.  Ugh.

     

     

    0
  • Wes Drury

    Hi Brain - Sorry for the delay but in order to troubleshoot further I would need to see your Help Center.  If you HC is open to the public please post the URL here and I can take a look at the code.  Its probably a simple update to the CSS.

    0
  • Lynn Beighley

    Thanks for this! I've got the banner showing up, but it appears on all pages, not just the ones with the label.  I must be close, but I don't know how to fix this. I changed the label to search for to "lh4alert". Here's the code (I've hacked the content for testing). Any suggestions?

     // MW-Notification Banner
       $.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=lh4alert" ).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>test</p></div><span class="ns-close"></span></div>'
               
         $('.alertbox').append(style1);
       });
       $('.ns-close').on('click',function(){
        $(".alertbox").remove();
      });
        
    });

     

    0
  • Cathy Grim

    THANK YOU WES!

    Sent you a couple of coffee's!

    You are a LIFE SAVER. 

    Worked right the first time.  no issues.  Your instructions were PERFECT.

    0
  • Wes Drury

    @Cathy - Glad to hear everything worked well for you and thank you so much for the coffee. I really appreciate the kind gesture.  If you run into any other issues just let me know.  Have a great day!!

    0
  • Jeff Callahan

    This is great!  

    I see the banner in Preview and when I login as an Agent, but not when I login as an End User.  I clicked publish.  I assume there is something very obvious I am missing.

    0
  • Jeff Callahan

    I figured it out - the Article was not Public.  This is Awesome!

    0
  • Wes Drury

    @Jeff - Glad to hear you got it all sorted out.  Best of luck to you and if you run into any other issues just post back here.

    0
  • Emma MacDonald

    Apologies if someone has asked this before, but will this cause the banner to show all the time? If we don't currently have an outage we want to alert people about, do we need to comment out all the code, and then un-do it when we want it to show up again? 

    0
  • Nicole - Community Manager

    Hey Emma -

    It looks like you would need to manually add or remove the banner; I'm not seeing a time delimiter on the code. Wes, correct me if I'm wrong on that point!

    0
  • Wes Drury

    Hi Emma. The code is based upon a label on the article. If you want an alert to show then add the correct label and when you don't want an alert then just remove the label from the article. Hope this helps.

    0
  • Emma MacDonald

    Oh that's perfect! Thanks Wes!

    0
  • Thomas Anderson-Offer

    Hi,

    It looks like the addition of this code has somehow affected the functionality of our Help Centre.

    I'd pasted all code into our Copenhagen help centre as instructed, however, once in place the "add to conversation" button no longer works.

    Once the code is deleted the button now works.

    Could this be an effect of the recent Zendesk updates to Help Centre design?

    0
  • Wes Drury

    @Thomas. I’m pretty sure you are pasting the code in the wrong spot. Make sure the code is after the $document.ready function. It can’t be pasted at the very beginning or very end of the JS file. Please read the instructions carefully.

    0

Please sign in to leave a comment.

Powered by Zendesk