Adding a notification banner to your Help Center v2

290 コメント

  • Kyle Beaulieu

    Hi Ruth PCL,

    What do you have listed in your script.css in the 'background' line of your .ns-box? 

    For example, mine is setup like this:

    .ns-box {
        background: #e84325;
    (with more padding and other settings)

     

    which gives me a solid red bar. I did have to remove the megaphone by changing the display to none (I can elaborate if interested), but it's just a solid line for me.

    1
  • Brett Bowser
    Zendesk Community Manager
    Hey Stuart, can you share the exact code you're using on your site so we can take a look?
    1
  • 이상담

    I want similar, but in a pop up window format rather than a banner. Is this also possible by modifying codes provided here?

    1
  • JR Lausin
    Zendesk Customer Care
    Hi Paolo,

    In order for you to perform this action, it will involve editing the code theme of your Help Center. Zendesk leaves the door open for any type of customization, however, since this will involve coding and customization, this falls out of the scope of our support.

    However I was able to find  an article that might help you in achieving this.
    https://github.com/moderatorwes/Notification-Banner

    Best,
    1
  • Gabe Seals

    This is an incredibly helpful and relevant article! I just implemented it for my company. Thank you, ModeratorWes for creating such a useful guide!

    I would like to suggest one change because I am from the software development side and not a Zendesk Admin: label/article/alert are HTML/JS keywords while also being Zendesk terms. Luckily, someone in the comments referenced creating a Zendesk article - including screenshots - and everything clicked.

    Would someone please consider updating the README with the below?

    Article Labels

    •  Create or edit one of your articles

    To create an article in Zendesk, click Add then Article

    In this new window, place the word alert here:

    Now, whatever you write in the Title and Body of the article will appear in your alertbox. For example, this:

    yields this:

    *** this link covers how to create articles in greater detail: https://support.zendesk.com/hc/en-us/articles/4408839258778-Creating-and-editing-articles-in-the-knowledge-base

    Of note:

    - In this example, only the Title appears because I switched this Boolean value from true to false. If you leave this value as true, then the contents of your Title and Body will display:

    - As noted in other comments and FAQs, the Label(s) you apply to your article should coincide with the const label value in your .js file. For example, I left mine as this so that the screenshot above of the Labels value allowed my Title to appear.:

    - You can update this line with the Domain Name that is relevant to your company's Zendesk page:

    For example, if your company's Zendesk url is something like https://support.sandwich.zendesk.com/hc/en-us then the url value would be https://support.sandwich.zendesk.com/api/v2/help_center/${locale}/articles.json?label_names=${label}`

    1
  • Clay

    Very cool Wes! Thanks for the post.

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

     

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @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
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @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
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @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
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    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
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @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
  • ModeratorWes
    Most Engaged Member of All Time - 2021

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

    0
  • Christopher Stock
    Community Moderator
    Zendesk Luminary

    Hey Wes, really useful thanks!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @christopher - You're welcome.  Enjoy

    0
  • Rim HAMDI

    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
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @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

    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

    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
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @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

    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
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    @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

サインインしてコメントを残してください。

Powered by Zendesk