Adding a notification banner to your Help Center v2

ModeratorWes

• 8 février 2016 16:19

Plan Requirement:  Pro Plan and up (if on lower plan see this version)

Zendesk level: Intermediate
Knowledge: HTML, CSS, JS, API
Time Required: 15 minutes

Have you ever wanted an easy way to notify your end users of System Outages, Important Announcements, or Releases. If so, then the Notification Banner v2 is exaclty what you are looking for. In my previous versions we had to add a word like "Issue" in the title of your article in order for the notification to show. With the new version we are going to leverage the Zendesk API and use Article labels to display our alerts.

In order to shorten this article, you can find all the code and instructions on my GitHub Page.

Screenshot

---

This post has been edited by the Zendesk Community Team to remove a "Live Demo" link that no longer works. 

• Stuart Buddrige

  • 6 octobre 2022 15:06

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

• Brett Bowser

  • 10 octobre 2022 16:11

  Zendesk Community Manager

  Hey Stuart, can you share the exact code you're using on your site so we can take a look?
  
• Stuart Buddrige

  • 11 octobre 2022 10:53
  • Modifié

  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.

• David Crichlow

  • 11 octobre 2022 16:39

  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;

• Stuart Buddrige

  • 12 octobre 2022 08:23

  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"

• David Crichlow

  • 12 octobre 2022 17:41

  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.

• Stuart Buddrige

  • 13 octobre 2022 08:56

  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;
  }

• David Crichlow

  • 13 octobre 2022 14:57

  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

• Stuart Buddrige

  • 13 octobre 2022 16:36
  • Modifié

  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.

• Frank Ippolito

  • 9 novembre 2022 16:51

  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?

• 이상담

  • 17 août 2023 16:51

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

Vous devez vous connecter pour laisser un commentaire.