Adding a notification banner to your Help Center v2

280 Comments

  • Trapta Singh
    Community Moderator

    Hi @Bee Hive,

    Zendesk has updated its theming template since the time this post is created. You will not find the HTML or CSS tab anymore in the Guide instance now.

    However, in response to your question, when you are editing the code, you can paste the code mentioned for the style.css file as it is in the style.css file under the left sidebar when clicking on edit code.

    For the header.html file, paste the code in the header.hbs file and instead of zendesk.js paste the code in the script.js file.

    Let us know if this helps you.

    Thanks

    0
  • Itay Taragano

    The link to "Live Demo" is broken.

    0
  • Dave Dyson
    Zendesk Community Manager

    Hi Itay,

    Thanks for the heads-up – I've removed that link as the help center it pointed to is no longer active.

    0
  • Nadav Shamgar

    Hi ModeratorWes - great work, I love it!

    A small question:

    How can I make the closing of the banner persistent for that session?

    If the user clicked on the "X" of the banner, I don't want it to pop up again whenever the user moves around pages in the Help Center as it can be annoying.

    Thank you!

    0
  • Ruth PCL

    This is great. One question though, the color seems to get lighter L to R. Is there a way to make it just one solid color? 

    0
  • Kyle B
    Community Moderator

    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
  • Ruth PCL

    Kyle B Thank you! We had an RGBA value in there. I switched it to hex and it's one color now. 

    0
  • Suhan Li

    I copied the codes as steps in the instructions. I created an article with label as "alert". Since every article need to publish in a section, I see the alert in FAQ of the section. But I don't see any banner showed up. I put the url,  /api/v2/help_center/${locale}/articles.json?label_names="alert" to the site. I got the result as 

    {"error":"InvalidEndpoint","description":"Not found"}

    My artilce URL is https://teastudentassessments1555347296.zendesk.com/knowledge/articles/8576598013460/en-us?brand_id=360002376392.

    Does any one know how I should query the URL for the alert data?



    0
  • Brett Bowser
    Zendesk Community Manager
    f
    0
  • Suhan Li

    Maybe I need to change my API setting. Brett, Brett Bowser I saw your smiling face here. Do you have any suggestions?

    Thanks,

    0
  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Suhan,
     
    Based on the context shared, the locale value provided to url may be invalid.  Though the script should be retrieving it directly from the document.  Can you double check your code to define url ?  Keep in mind that it is a template string so it should be wrapped in backtick (`) characters, rather than single quote characters (').
    0
  • Suhan Li

    Change it back and it works now.

    Thanks!

    0
  • Stuart Buddrige

    Can anybody confirm if this solution still works? I'm looking to implement an announcement banner on my Help Centre and the Zendesk advisor sent me here. I'm no developer so need the easiest instructions possible!

    Thanks in advance.

    0
  • Trapta Singh
    Community Moderator

    Hi Stuart Buddrige,

    Yes, the above solution still works. The only change should be with the file's name. You can refer to my comment above for the same.

    Thanks

    Trapta

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    WOW six years and it still works :-)

    Trapta Singh - Thanks for helping out!!

    Brett Bowser & Christopher Kennedy - I created this solution 6 years ago when the Help Center was just a baby to fill a need.  Now the Help Center is all grown up so let's get this solution baked into the actual product!!!

    0
  • Stuart Buddrige

    Hi Trapta Singh

    I got this working - thank you for your response. Much appreciated.

    0
  • Stuart Buddrige

    Hi Trapta Singh - I wonder if I can ask your help again on this. 

    As the text that is in the banner is linked to an actual article and triggered via the 'alert' label, how can I keep that specific article from being visible on the site itself as an article in its own right, whilst keeping the banner that it produces visible?

    When you publish an article it asks you to publish it to a certain category/section - but if I do this, users will then just be able to see the banner as an article which would be odd. Is there a way to invisibly publish an article so users cannot see it as an article, but the content from it can still be used in a banner?

    Many thanks in advance!

    0
  • Kyle B
    Community Moderator

    Stuart Buddrige This is how I have mine setup:

    I actually have mutliple Guide templates, one for no banner, one for a red banner (hard down), and one for an orange banner (possible issue kind of thing). I also have two outage articles that will match the banner color. That way I can keep the text the same (or change a few words to make it accurate) and just publish when needed. 

    That being said, when I have a banner in place, the article is visible to everyone. That's the only way I was able to get the banner to work properly. Maybe others have a better way, but I have created a section for these notification articles, put that section at the bottom of the list, and only have those two articles in there. That way, when there is no notification banner, the articles are set to Draft and that section is not visible. When there is a banner in place, someone could scroll down and see that section, which shows the article, but I have it 'clean' enough to be ok with that. 

    So, in short, the way I have it setup is to burry the article as much as I can as it will be visible. If you restrict people from seeing the actual article, they also won't see the banner. The only way around this is to manually add the text in the banner instead of tying it to an article. It's more work but definitely diable. 

    0
  • Stuart Buddrige

    Thank you for your reply Kyle B - much appreciated.

    Yes, similarly I have 2 themes at present, one normal theme and then one with a banner so when there is an incident, we can just set the live theme to be the one with the banner.

    Your approach makes sense, but I would be interested to hear if there is a way to keep the content as an article but make it invisible. I guess you could possibly set the 'Visible to' option in an article to Agents and Admins only?

    0
  • Kyle B
    Community Moderator

    Stuart Buddrige Yup, same process I have. I have tested the visibility permissions and found that if someone can't see the article, they also can't see the banner. I hope there is a way around this, as it would clean up my knowledge base a little bit, I just haven't found a way in my fiddling with it. 

    Here's hoping someone else has a better answer! 

    0
  • Stuart Buddrige

    Good to know - that will save me some time on testing! And yes, fingers crossed for an answer from somebody else.

    Thank you again for your reply and help.

    0
  • Stuart Buddrige

    ModeratorWes do you have any insight into my recent comments about making an article invisible, yet still being able to display the banner on the site?

    Many thanks in advance!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    Stuart Buddrige - Sorry but I can no longer assist as I don't have access to Zendesk anymore as my organization moved to a different product that was built for K12.  The best person to ask would be Trapta Singh who is a coding guru.

    0
  • Stuart Buddrige

    Hi ModeratorWes - thank you for the reply.

    Trapta Singh - if you have any insight on if there is a way to invisibly publish an article so users cannot see it as an article, but the content from it can still be used in a banner, please let me know. 

    Many thanks!

    0
  • David Crichlow

    Hi Stuart Buddrige,

    I did something like the following using CSS to hide the article from the list of articles.


    a[href*="/hc/en-us/articles/ArticleID-Name-of-Document"]
    {
        display:none
    }

    I used Chrome developer tools to get the exact URL of the link. The article is still published, and if you enter the URL into the browser, you can access it. However, the link is not available for your customer to click.

    Of course, you would need to do this for every article. Though if you created a section for these articles, you could probably just hide the entire section using a similar method.

    0
  • Stuart Buddrige

    Thank you David Crichlow - greatly appreciated. I will give this a go.

    0
  • Pierre Lazarus

    Thank you ModeratorWes! This was deployed in a matter of minutes with super easy steps. You saved me so much time and trouble and even cost!

    0
  • ModeratorWes
    Most Engaged Member of All Time - 2021

    Pierre Lazarus - Glad to hear this not only saved you time but some money as well.  That's what this community is all about sharing ideas and enhancing the system for our end users.  Best of luck to you!!!  

    0
  • Stuart Buddrige

    Hi David Crichlow could I trouble you for some further help on making these pages invisible please?

    I tried adding the code you provided to my .css file with the exact URL of the article and I can still see them when I refresh the site and view the section the article is published to.

    Any help is much appreciated - thanks!

    0
  • Brett Bowser
    Zendesk Community Manager
    Hey Stuart, 

    Can you confirm that you've enabled the "Display unsafe content" option in the Help Center? 
     
    More information in this article: Allowing unsafe HTML in help center articles
     
    I hope this helps!

     

    0

Please sign in to leave a comment.

Powered by Zendesk