Recent searches
No recent searches
Adding a notification banner to your Help Center v2
Posted Feb 08, 2016
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.
4
293 comments
ModeratorWes
@Deb - I've approved Trapta's code within my github. Please let us know if this solves your issue.
Thanks for the help @Trapta
0
Petri Lehtinen
Looks really useful, thank you! One question, does this work in mobile? At least on the demo site, it didn't.
0
ModeratorWes
@Petri - I can confirm this will work fine on mobile devices. The issue with the demo is because I'm not using the Copenhagen theme. This was an older theme that users can no longer use I just haven't had the time to move it over to the Copenhagen theme. I've used this on quite a few Copenhagen themes and I can confirm that it works on the Copenhagen theme and it is responsive so it will work across all devices.
0
Petri Lehtinen
Excellent! Thank you for the quick response. We'll try it out soon!
0
Christen Bejar
Thank you for this! So far it's running ok, but I had a couple of questions.
In my testing, I noticed the alignment is off. Does anyone know which CSS item is this affecting? I'm having a bit of a time narrowing it down. EDIT: Nevermind, I realized it was because the alert article was a tad long and pushing the text weirdly.
Also, I noticed that regardless of the article being published or not, the label will still generate an alert. I just wanted to confirm if this was as designed. Removing a label vs. unpublishing an article is about the same effort for me, just helps to know I installed it correctly.
Thank you again for maintaining this wonderful addition!
0
Nicole Saunders
Glad to hear you got it sorted, Christen!
0
Deb Chatigny
Hi @Wes and all,
Sorry it took me a bit to get back to you. It's 95% working for me, and here's why.
I'm trying to use a combo of several of the awesome code samples here, as I'm trying to:
1. Have a notification banner in multiple languages, and
2. Have the banner only display on the home page.
I can do one or the other, but not both. Here's the code that I have in place at the moment; with this, I can restrict the banner to the home page, but I'm pretty sure the domain info in the first line of code is not allowing the Spanish banner to load (using the lang attribute and a custom label, as Birita suggested).
If I take the top line of code and bottom bracket out, I can get it to work great on both supported languages, but the banner appears (and is dismissable) on every site page.
Also, I ran into the X/dismiss button in the top right disappearing for me, but once it was published and live on our help center, the X was visible and persisted.
Thank you all for any/all help!
Deb
0
Trapta Singh
Hi @Deb Chatigny,
Try using the below code and let us know if you face any issue -
Team Diziana
0
Petri Lehtinen
We got our notification bar working and looks good! One question, is it possible that the alert is only shown once? Now that you dismiss the alert and come back to the homepage, you are presented the alert again.
0
Vlad
Hi Petri, good idea and that is doable with a help of JavaScript.
One of the ways, on close btn click, set localStorage eg bannerClosed = true.
Then, if localStorage bannerCosed !== true, show the banner.
Hope this helps.
0
Massimo DiDio
not sure it has been asked already, but looks like the banner is not working for mobile site.
Any ideas?
0
G D
This is great thank you. I’m using it to give our customers the cookie opt-in notification (gdpr compliance). I have it set to show on any page (because users often go right to articles) and set a local storage key (instead of a cookie) upon close to ensure it is only shown once or at least until the key is deleted.
It’s not working for the mobile site but I haven’t looked into it yet.
UPDATE
I am not able to get this working with the adaptive mobile layout option enabled (the option in the screen shot below):
The banner works fine on a mobile with this option disabled, but of course the format is for a desktop not a mobile. Likewise it works with this option enabled if I request the desktop version of the site via my mobile browser.
I'm using a custom theme that was built years ago, so perhaps the issue is that this is not a version of the copenhagen theme? I've seen the comment about it working on mobile with a copenhagen theme but not the live demo (older theme).
Does anyone know how to get this working with the built in mobile layout option enabled with a custom (likely non-copenhagen) them?
Thanks!
0
Jessie Schutz
Hi GD and Massimo!
GD is exactly right. The older Help Center themes (pre-Copenhagen) are not a responsive design, which means that the mobile layout option has to be enabled for it to render in a mobile-friends way on smaller devices.
However, if you're on Copenhagen, this theme is responsive design out of the box, which means that the mobile layout isn't necessary and should be disabled. Mossimo, my educated guess is that this is what you're running into.
GD, it's possible to convert an existing old theme to a responsive design but it'll require some pretty extensive custom coding. If you don't want to do a redesign, or move over to the Copenhagen theme, I'd recommend that you disable the mobile layout option to ensure your mobile customers see your banners.
0
Cyrup
Hi all,
I've seen a similar thing done on another help center:
I heard on the grape vine that this is done by simply adding a tag such as "KB_pin" or similar to the article labels. I'm on a really old custom theme, not Copenhagen, so I am not sure if it will work, but does anyone happen to know the method?
0
ModeratorWes
@Cyrup - Adding a tag will not work unless you put the custom code in place. You will have to write some custom code or if you are using the tutorial above then you can copy and paste the code. The code will work no matter what theme you are using, even the older themes. The code above uses the label "alert" to trigger the alert to appear. If you have any questions along the way just let me know. Best of luck.
0
Brian Kopacz
Thanks for this feature Wes. It's really cool.
I have one issue I cannot seem to figure out. The banner loads fine however the "x" to close the banner is missing from the right. Oddly, when I refresh the page, it appears briefly, then goes away. I cannot seem to get it to stay in place.
I am using the js code exactly, and playing with the css to try and make it appear. Ugh.
0
ModeratorWes
Hi Brain - Sorry for the delay but in order to troubleshoot further I would need to see your Help Center. If you HC is open to the public please post the URL here and I can take a look at the code. Its probably a simple update to the CSS.
0
Lynn Beighley
Thanks for this! I've got the banner showing up, but it appears on all pages, not just the ones with the label. I must be close, but I don't know how to fix this. I changed the label to search for to "lh4alert". Here's the code (I've hacked the content for testing). Any suggestions?
0
Cathy Grim
THANK YOU WES!
Sent you a couple of coffee's!
You are a LIFE SAVER.
Worked right the first time. no issues. Your instructions were PERFECT.
0
ModeratorWes
@Cathy - Glad to hear everything worked well for you and thank you so much for the coffee. I really appreciate the kind gesture. If you run into any other issues just let me know. Have a great day!!
0
Jeff Callahan
This is great!
I see the banner in Preview and when I login as an Agent, but not when I login as an End User. I clicked publish. I assume there is something very obvious I am missing.
0
Jeff Callahan
I figured it out - the Article was not Public. This is Awesome!
0
ModeratorWes
@Jeff - Glad to hear you got it all sorted out. Best of luck to you and if you run into any other issues just post back here.
0
Emma
Apologies if someone has asked this before, but will this cause the banner to show all the time? If we don't currently have an outage we want to alert people about, do we need to comment out all the code, and then un-do it when we want it to show up again?
0
Nicole Saunders
Hey Emma -
It looks like you would need to manually add or remove the banner; I'm not seeing a time delimiter on the code. Wes, correct me if I'm wrong on that point!
0
ModeratorWes
Hi Emma. The code is based upon a label on the article. If you want an alert to show then add the correct label and when you don't want an alert then just remove the label from the article. Hope this helps.
0
Emma
Oh that's perfect! Thanks Wes!
0
Thomas Anderson
Hi,
It looks like the addition of this code has somehow affected the functionality of our Help Centre.
I'd pasted all code into our Copenhagen help centre as instructed, however, once in place the "add to conversation" button no longer works.
Once the code is deleted the button now works.
Could this be an effect of the recent Zendesk updates to Help Centre design?
0
ModeratorWes
@Thomas. I’m pretty sure you are pasting the code in the wrong spot. Make sure the code is after the $document.ready function. It can’t be pasted at the very beginning or very end of the JS file. Please read the instructions carefully.
0
Mary Haberle
This is great and easy to implement, thanks! One question: how can I change the header in the banner to link to a page other than the source of the banner content. For example, I plan to keep the page used to update banner text only visible to managers and agents, so would like to link out to a different page in the help center when the end user clicks the link in the banner. Any help would be appreciated! Thank you.
0