Adding a notification banner to your Help Center v2

Thanks for the reply Harriet Klymchuk!

My goal is to actually not have the article published. I only want it to be seen as a banner and nothing else. Not in searches or anything. I even removed a lot of the stuff that would allow the user to click on it and bring them to the article. When you say "preview," are you referring to the notification banner itself? 

I think a way around the delay would be to have multiple themes. One with no banner, one with a banner (and repeat for however many banners you have). Then if you need a banner to display, switch to the theme with that banner. That should work quicker (in my mind, at least). Does anyone have any thoughts on this theory? 

Hey Kyle, I'll try and help from my experience with this piece :)

- Yes, the article needs to be published in order for it to appear to whichever users have permission to view the article.  However it should show in the preview for you, regardless of whether it is published (at least it does for me :) )

- I'm not 100% on the second point I've only tested this in preview, but if it's published, the banner shows for all users, but the article that the banner is populated from only shows for the user segment it is aimed at.  (e.g. I have an article set to be for Agents and admins, it doesn't come up in searches or in the section, but the banner is visible).

- I sometimes see a delay in promoted articles and other Guide changes going live in general, so I think sometimes the theme needs time to update.  Normally I use an incognito window on Chrome to check any public facing changes.

Hope that helps!

I am a little confused about the proper way to make this happen. I can't really do testing since it can only be done live and when there is a notification needed (such as an outage). Here are a few questions I have:

- The article with the tag/info, does that have to be published in order to see the notification banner or can it be a draft? 

- Does the article have to be visible to everyone or can I leave it only visible to Admins/Agents? 

- There is sometimes a delay in seeing the banner, even if I clear cache. Is there something I need to change? 

That's it for me, for now at least. Thanks in advance. 

Harriet Klymchuk Thank you for that. And glad I could give you a new phrase. :)

It turns out that this code did NOT work on our sandbox. When I added it to a test version of our actual (non-Sandbox) site, it worked fine. I've been tweaking it to make it look the way we want. I still have some work to do to make it look good on mobile. And I'll probably be tweaking the code a little so we can have multiple alerts with different colors and icons.

Thanks for all your help!

424615257913 Your summary of "I'm not a coder - I just know enough to be dangerous" is very much applicable to me as well (I love that description though and I'll be using that myself more often :D), so I'm not able to answer your question unfortunately! My js has dollar signs in though, so it the directions in the GitHub from Wes should work for you.

If it helps, I put the CSS and script at the very bottom of both respective files, after everything else (rows 331-344 below).  If I recall, I think the issues I had the first time around were trying to fit this in before the widget customisation, as I thought it would have to be higher up the script to be in order, but it can just go at the end no problem :)

Harriet Klymchuk In the JS code, there are dollar signs and when I run the code through a javascript checker it says the $ is undefined. I checked the remainder of the JS code and there are no other $ occurring. Is that something that's defined in the CSS?

Harriet Klymchuk - thanks for the response. No, it's not showing at all. I'm not a coder - I just know enough to be dangerous. I'll comb through it and see if I'm missing a bracket or comma somewhere. A lot of the text is red in the js code and I assumed it was just part of the syntax coloring. XD

I'll have a look and see if I can figure it out. If not, you know I'll be back. :)

Thanks again!

Hey Joshua,

It should work in a sandbox. When you preview the changes as an Admin, does your banner show regardless of the publication state of the alert banner article? For example, this is the preview on one of ours - neither of the articles are published to be visible to end-users, but both banners (we have two articles set as templates for banners) are visible in the preview.

If it's not showing on Admin preview, that suggests something's not quite working for you in the html, js or css (for me it was something like a missing comma or bracket in script.js).  If it is showing in Admin preview, then check your visibility permissions and published state of your article with the alert label :)

Hope that helps!

Is there any reason why this wouldn't work on the Sandbox? I've followed the instructions from Wes, and I think I've done it right, but the banner is not displaying. URL: https://medbridge1603833747.zendesk.com/

What would be most helpful for me to provide here?

Kyle B

There might be a couple of issues you are experiencing. The first thing I see is that the separation of the CSS for each notification is not complete, this is what is most likely partly causing your issue with it not looking correct.

CSS Issue

To fix the CSS issue, go through your CSS code and where the ".ns-box" is included in those will also have to be duplicated.

• For example, I see that you created ".ns-box2" but I also can see that ".ns-box.ns-show" and ".ns-box a" have not been duplicated. Anywhere where the original ".ns-box" was it will need to be duplicated and replaced with the ".ns-box2"