Adding a notification banner to your Help Center v2

202 Comments

  • Kelly Ngo
    Comment actions Permalink

    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
    Comment actions Permalink

    @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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    @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
    Comment actions Permalink

    @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
    Comment actions Permalink

    @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
    Comment actions Permalink

    @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
    Comment actions Permalink

    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
    Comment actions Permalink

    Glad to hear you got it sorted, Christen!

    1
  • Petri Lehtinen
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

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

    Any ideas?

    1
  • Simon Blouner
    Comment actions Permalink

    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
    Comment actions Permalink

    Very cool Wes! Thanks for the post.

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Scott Patterson
    Comment actions Permalink

    Never mind...missed a bracket.

    0
  • Scott Patterson
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

    @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
    Comment actions Permalink

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

    Works great!! Thanks so much!

    0
  • OT
    Comment actions Permalink

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

    0
  • Brian Taniyama
    Comment actions Permalink

    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
    Comment actions Permalink

    @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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    @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
    Comment actions Permalink

    Thanks Wes!

    0
  • Wes Drury
    Comment actions Permalink

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

    0

Please sign in to leave a comment.

Powered by Zendesk