Adding a notification banner to your Help Center v2

290 Comments

  • Stuart Buddrige

    Hi Brett Bowser yes this option is enabled. I'm not 100% sure what it does though to be honest!

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

    Hi all,

    Another question from me - I simply cannot get the text colour to change at all. The original code is below:

    /* change the background color by editing "background"  */
    /* change the text color by editing "color"  */
    .ns-box {
        position: relative;
        background: rgba(0,128,0);
        padding: 10px 20px 20px 20px;
        line-height: 1.4;
        z-index: 1000;
        pointer-events: none;
        color: rgba(250,251,255,0.95);
        font-size: 85%;
      border-bottom: 1px solid #DDD;

    When I amend 'color: rgba(250,251,255,0.95);' and save the style.css, nothing happens to the colour. All I want is white text!!

    I can amend the background colour no problem, it's just the text colour which is causing me issue.

    RE: my other issues, I am fairly content with how I have got things configured currently - I really appreciate everybody's kind help.

    0
  • David Crichlow

    Stuart Buddrige can you post an example of the CSS that you used?

    Mine looked something like this 

    a[href*="/hc/en-us/articles/44166706125-Order-Taker-Order-Payment"] {
        display:none;
    }


    Depending on your other styles you may try !important after none.

    display: none !important;
    0
  • Stuart Buddrige

    Hi David Crichlow could you give me an idea of where your section of code may be in the .CSS? My file is over 6.5k lines and I can't find anything similar to your code at first glance.

    Thanks"

    0
  • David Crichlow

    Stuart Buddrige I'm not sure I fully understand the question, but I manually added the CSS style close to the top of the CSS file.

    0
  • Stuart Buddrige

    David Crichlow I added the below code to my Sandbox instance and I could still view the article (I tried refreshing, using an Incognito window and using a different machine):

    a[href*="/hc/en-us/articles/9613354347924-Service-Outage-"] {
        display:none;
    }

    I also tried:

    a[href*="/hc/en-us/articles/9613354347924-Service-Outage-"] {
      display:none !important;
    }
    0
  • David Crichlow

    Stuart Buddrige my solution doesn't stop you from viewing the article if you have the direct link. It just removes it from the list in the category or section pages. On further thought, a user could still search for the article and find it, so this wouldn't fully solve your problem

    0
  • Stuart Buddrige

    I see David Crichlow - thank you for coming back to me. And that's exactly what I'm looking for - currently I have the articles published to a section on the site there is no navigable way to - but if you search for them, you can access them. This is what I'd like to disable,

    Any ideas anybody else? Thanks in advance.

    0
  • Frank Ippolito

    Newbie here: Forgive my ignorance, but does adding this banner require modifying code on our Zendesk site? On the GitHub page, you refer to opening the “HTML Tab in Zendesk”; how does one actually open the HTML tab? Is it simply using the “View Source” command (in Safari) to view the web page's underlying code and then modifying it?

    0
  • 이상담

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

    1
  • Paolo Votta

    Hello, I am trying to add a banner on my Help centre. So I copy pasted html header on top of the code in the dedicate section. Where should I copy paste the css and js? I tried copy-pasting on top of the code and nothing is coming out in the preview.

    Thanks in advance!

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

    Hi, is this still relevant/functional today? I see that the video that was attached to this post was removed. I'm looking to add a notification banner to inform my customers of any outages.

    0
  • Gaëtan Tobie-Echeverria

    hi, this is still relevant. 

    0
  • Elaine
    Zendesk Customer Care
    Hi Hector,

    Yes, adding a notification banner to inform customers about outages is still relevant and useful today. While the specific video attached to the post might have been removed, the concept of using notification banners remains a valuable and effective way to communicate important information, such as service interruptions or outages, to customers in real-time.
    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    Elaine - thanks for the response and Hector Jimenez - just let me know if you have any follow-up questions but the instructions should be pretty straightforward.

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

    Is there anyway where we can create schedule for these banners like planned system outage or maintenance?

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    Hi Vamshi! We don't have a native way to do that, but you could utilize the Github integration for Guide and then use a trigger in Github to schedule your updates. 

    0

Please sign in to leave a comment.

Powered by Zendesk