Adding a notification banner to your Help Center v2

192 Comments

  • Clay Miner
    Comment actions Permalink

    Very cool Wes! Thanks for the post.

    0
  • 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
  • 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
  • Chris Stock
    Comment actions Permalink

    Hey Wes, really useful thanks!

    0
  • Wes Drury
    Comment actions Permalink

    @christopher - You're welcome.  Enjoy

    0
  • Rim Hamdi
    Comment actions Permalink

    Hello Wes - This tip is very useful, many thanks for sharing!

    One quick question: will the text always be displayed in your default language, even if you created language versions of the article containing the label?

    I made a test with default content in English and created a version in French, but my Help center in French would still display the text in English.

    Thanks!

     

    0
  • Wes Drury
    Comment actions Permalink

    @Rim - I've never tested with different languages so I'm not sure how it reacts.  Its pulling from the API but not probably from the locale.  When I get some free time I'll see what I can figure out.  If you resolve it yourself just let me know.

    0
  • Antonio Naddeo
    Comment actions Permalink

    Very useful indeed, awesome! However it does not react to the different languages. If you create an article and add the translation for each language (like in my case ES/FR/DE/IT) the alert message only display source language. For our support team an issue/alert might be either of all the languages or for only one of them. In the latter case we would still need to ability to display an alert only for one language. So ideally if you have a language, where you don't have that issue, by don't adding the translation you don't display the alert. That would be really terrific!

     

    Thanks

    0
  • Antonio Naddeo
    Comment actions Permalink

     

     

     

     

     

     

    The other issue I have is that the alert message seems to be displayed only if I am logged in as an agent. The alert message is not displayed to final user without login. How can I make the alert message to be displayed also publicly? 


    0
  • Wes Drury
    Comment actions Permalink

    @Antonioaddeo - If you look at my test site the notification is showing without you being logged int.  Looks like you may have something else going on there as the code I gave it doesn't matter if your logged in our not.  Is your HC open for anonymous access.  Make sure you don't have my code interlaced with some of your other custom JS code.

    0
  • OT
    Comment actions Permalink

    For our site it only shows after you log in - but that's because the section we have the article in is locked to logged in users only.  Worked perfectly straight away for us :)

    0
  • Wes Drury
    Comment actions Permalink

    @Ola - Great point as the article will follow the rules from the section.

    @Antonioaddeo - Can you see if this is the case with your HC.  Is the article in section that has been locked or only allow certain users to se.

    0
  • Antonio Naddeo
    Comment actions Permalink

    Thank you for the answers! The section where the article has been places is available to "anyone" and our HC is open for anonymous access, yet the alert is displayed only after sign-in. 

    0
  • Rob Davis
    Comment actions Permalink

    Hi Wes.  This is FANTASTIC!  Thanks for doing this.

    I just added the code to my Help Center sandbox and it isn't fully working.  I double checked that I copied in the correct code from your instructions. The announcement bar is white and I can't seem to change it. Suggestions?

    Thanks!

    0
  • Antonio Naddeo
    Comment actions Permalink

    Since for our support this feature is vital, I have 2 comments:

    1. I have installed again the code but  I am unable to make the alert banner visible to logged out users (anonymous users). I have the HC visible to anonymous users and the section of the article is also public. Anybody else having this issue?
    2. Say that I manage 4 languages, and the alert is only related to one of the languages. It is very important then to know if we can manage the alert depending on the language by adding the appropriate translation.
    0
  • OT
    Comment actions Permalink

    @antonionaddeo - for the multiple languages could you use a different label for each language, and then display results for the appropriate label depending on the user's language?

    0
  • Antonio Naddeo
    Comment actions Permalink

    I guess I could use a different label for each language, but how do I add the input about the alert label in different languages?

    0

Please sign in to leave a comment.

Powered by Zendesk