Adding a notification banner to your Help Center v2

191 Comments

  • Wes Drury
    Comment actions Permalink

    @Keiron & Sharon - Enjoy and thanks so much for the coffee donations.  I really appreciate it :-)

    0
  • Xenfall
    Comment actions Permalink

    Hi @Wes, thanksf or sharing this! We installed this on our help center and it works perfectly. We would like to modify the banner so that it's not as tall. Would you be able to suggest how to make the banner not at thick? Thanks!

    0
  • Wes Drury
    Comment actions Permalink

    @Scott - You can adjust the padding in your CSS.  Find the below code:

    .ns-box {
    background: rgba(192, 57, 43,0.85);
    padding: 10px 20px 20px 20px;    <----EDIT THIS LINE
    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;
    0
  • Xenfall
    Comment actions Permalink

    @Wes - Thank you so much! Brilliant!

    0
  • Xenfall
    Comment actions Permalink

    Is anyone experiencing issues with this lately? Our Alerts seems to have stopped working and I even redid the instructions, but the alert banner isn't showing anywhere.

    0
  • Wes Drury
    Comment actions Permalink

    @Scott - I just took a look and seeing the same issue.  It looks like Zendesk is having an issue with their jquery, I'll submit a ticket to them.

    2
  • Mike Tamosaitis
    Comment actions Permalink

    @Wes -  Please let me know what you find. Because I am also having this issue. 

    0
  • Wes Drury
    Comment actions Permalink

    @Scott & @Mike - Looks like this was an issue on Zendesk end as everything started working again on my demo site.  Can you confirm this on your end?

    1
  • Xenfall
    Comment actions Permalink

    Yessir! It's working again. Thanks for jumping on this Wes. 

    0
  • Mike Tamosaitis
    Comment actions Permalink

    Yes it is working again thanks. 

    0
  • David
    Comment actions Permalink

    This is truly brilliant. 

    I may have missed it, but did someone relate to how (practically) I can limit the banner to appearing on the home page?

    I would need an actual example of how to adjust the JS because I don't have any experience at all....

     Also, the x only appears when i checked this as another user, but I (as the admin) don't see it, and I can't close the notification box.....

    Thank you!

    0
  • Emiliano
    Comment actions Permalink

    Ciao Wes,

    How are you? We are a very demanding community and you are too generous!

    Drink some healthy tea instead of coffe ;-)

    We have some problems with the Notification-banner too.

    All of the code is installed but nothing is showing up as some other users described before. I believe it must be something in JS. 

    We did quite some testing on the JS so i hope we did not end up breaking something important. I hope this is not the case.

    Here is a screenshot

    As you can see there are two $(.document.ready) functions. Could this be the problem?

    I tried already to change the url to "http" from "https" and also "suport.myname.com" to "myname.zendesk.com" but it did not do the trick.

    The console shows a couple of errors but they do not seem to be relevant.

    Anything you can think of?

    0
  • Wes Drury
    Comment actions Permalink

    @David - Look at the very bottom of the readme on the GitHub link.  You will find out how to limit it to just the home page.

    0
  • Wes Drury
    Comment actions Permalink

    @Emiliano - Thanks for the healthy tea.  I've verified the code is correct and is working on my demo site as its supposed to.  Without looking at your code, I would think there is some custom code that is interfering with the notification code.  If you need for me to take a look at your code you can find me hanging out on my SLACK channel.

    0
  • Andrew Halsell
    Comment actions Permalink

    Hi Wes - I'm having some trouble getting the notifcation banner to display with the Copenhagen theme.  I've checked the JS to make sure that looks correct, and have an article setup, unprotected with the proper label - just can't get the banner to display in the header. 

    I saw you mentioned the Copenhagen theme came after you provided the original code - any updates on what needs to be done specifically for the Copenhagen themed ZD sites?

     

    Thanks!

    0
  • Wes Drury
    Comment actions Permalink

    @Andrew - I have verified the notification does work with the Copenhagen theme.  

    0
  • Stoddard, Scott
    Comment actions Permalink

    Wes - This works great. However, I want to make the transition animation the reverse of the entry animation. Right now when you close it's too quick and want it smoother. What's the CSS I can add to the animation to make that work? Thanks

     

    0
  • Mikaël Janssens
    Comment actions Permalink

    Any other user experiencing problems since the latest Zendesk "Guide" release with the Notification Bar? 

    0
  • Kieran O'Sullivan
    Comment actions Permalink

    Hi Wes,

    I have added the code to the Copenhagen theme and it works great. Is it possible to create a second banner with a different label and colour?

    Thanks

    Kieran

    0
  • Wes Drury
    Comment actions Permalink

    @Kieran - Anything is possible just have to modify the code.

    0
  • Ruth Anne Dilig
    Comment actions Permalink

    Hi Wes, thank you for this tutorial. I have tried it but I found out that labels can no longer be accessed by end-users. Do you have any suggestions or workaround regarding this? Thanks

    0
  • Wes Drury
    Comment actions Permalink

    @Ruth Anne - Where did you hear that from?  Labels are part of the articles and really have nothing to do with end users.  You can actually show the labels on your articles so I'm afraid the information you got may have been wrong.  Can you give me the details on where you got that information and I'll see what I can find out?

    I've verified the code still works without any issues.

    0
  • Marick
    Comment actions Permalink

    No help needed anymore. Somehow it showed after some time again. Not sure if it was some hickup in loading somewhere. 

    -----

    Hi, I am very new to all types of editing in html/css/js and Zendesk itself. I tried to do some adjustments like adding the notification bar. At first it worked. But I think after trying adding another feature something went wrong and I haven't seen an undo button in the editor. Maybe it's something small as a {  not right. I noticed also an other features showing only 3 articles isn't working anymore. Anyone who can help me?

    0
  • Vladan Jovic
    Comment actions Permalink

    Hi Marick, any chance you could provide us with the link to your help center? It's pretty hard to catch the issue from this point. 

     

     

    0
  • Marick
    Comment actions Permalink

    Hi Vladan, I understand. It's still behind the scenes at this moment. The banner is back, the 3 articles are back. Just don't get a tag like your 'community moderator' working in the copenhagen theme. But that's a question for another topic.

    Can I share my not yet published help center already with you by the way?

    0
  • Vladan Jovic
    Comment actions Permalink

    Hmm, could you create a sandbox and share it with us? 

    0
  • Marick
    Comment actions Permalink

    Not sure how to do this since I found sandboxing can only be done with Enterprise? Sorry, you see my beginner level shining through here. 

    0
  • Vladan Jovic
    Comment actions Permalink

    You're right, SB option is just on the enterprise plan. I'm not sure if there is any other solution for me to have a look into :/

    0
  • Marick
    Comment actions Permalink

    No problem, magically the basic things I've set are working now. Thanks for helping so far!

    0
  • Daniel Chesney
    Comment actions Permalink

    This is brilliant ty so much, I'm wondering though how would I got about adding a second style that if we put another tag on the article to say "complete" in then changed the colour of the Bar to be a nice green to indicate all is right with the world again :)

    Thanks

    Daniel

    0

Please sign in to leave a comment.

Powered by Zendesk