Adding a notification banner to your Help Center v2

211 Comments

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

    @Scott - I just took a look and seeing the same issue.  It looks like Zendesk is having an issue with their jquery, I'll submit a ticket to them.

    2
  • Scott Patterson

    After pasting the CSS code at the bottom of the CSS tab, Zendesk will not allow me to SAVE.

    I had no trouble copy/paste/save with the HTML or JS

     

    1
  • Antonio Naddeo

    Have we been able to find a solution, for Help Centers in muliple language to display an alert message localazied in the language and/or not display the alert if the article is not translated in that language?

    1
  • Antonio Naddeo

    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? 

    1
  • Wes Drury

    @Scott & @Mike - Looks like this was an issue on Zendesk end as everything started working again on my demo site.  Can you confirm this on your end?

    1
  • Wes Drury

    @Gaetan - Thanks for the update and glad you were able to get everything resolved.  Best of luck and you know where to find us if you run into any other issues.

    1
  • 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
  • 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
  • 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 S.
    Zendesk Community Team

    Glad to hear you got it sorted, Christen!

    1
  • 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
    Community Moderator

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

    Very cool Wes! Thanks for the post.

    0
  • Wes Drury

    @Scott - On your CSS tab just click anyway and hit your spacebar and then the SAVE button will be available.

    0
  • Scott Patterson

    Never mind...missed a bracket.

    0
  • Scott Patterson

    I believe copy and pasted correctly....but not working as your.

    0
  • Wes Drury

    @Scott - Did you copy the HTML to the top of the "header".  From your screenshot it looks like its on top of the "Home Page.  

    0
  • Scott Patterson

    Yup...just figured it out...I put it in the 'Home Page'

    Works great!! Thanks so much!

    0
  • OT

    This looks amazing, adding it to my help centre 'to do' list!

    0
  • Brian Taniyama

    Any way to just show the article name and not the content?

    EDIT: Figured it in two seconds...should've looked at the code.

     

    Just remove ' + item.body + ' from line 6 in the js file.

    0
  • Wes Drury

    @Brian - I put some Q&A at the bottom of my GitHub page.  I figured someone would be asking your exact question.

    https://github.com/moderatorwes/Notification-Banner#customizations

    If you are just display the title you may want to play around with the CSS and center the title and icon but thats up to you.  Thanks for using my solution.

    0
  • Liz

    Hi Wes,

    I am trying to add the notification banner,  but we are not using the Pro plan.  I am trying the alternate version, but I am missing something.  I have taken the promoted articles out of the home page html,  and added the other bits of code to the header and js sections and still don't get the alert.  What am I missing?   Thanks in advance for your help. 

    0
  • Wes Drury

    Hi Liz - With that version you can keep the promoted article section on your Home Page.  Add that code back to your HomePage and make sure the JQuery is right below the $(.document.ready) function.  Go to one of your articles and in the title add the word - Issue - Title

    0
  • Liz

    Thanks Wes,  I got that fixed,  but I still can't get the alert to format.  Sorry I am not versed in html and css,  so I am sure I am just missing something obvious.  This is what the notification looks like in our HC right now.   I get the alert in the header but it is missing all the formatting,  and isn't very noticeable. 

     

    0
  • Wes Drury

    @Liz - I've updated the GitHub to include CSS styling.  Please recopy ALL the code as I made changes to all of it.

    0
  • Liz

    Thanks Wes!

    0
  • Wes Drury

    @Liz - Your welcome.  Glad to hear everything worked out.

    0

Please sign in to leave a comment.

Powered by Zendesk