• Wes Drury

  • May 17, 2016 21:05

  Not really I would have to inspect your home page with the dev tools to make sure the alert is showing and see if anything is overlapping it.

• Wes Drury

  • May 17, 2016 21:10

  You can create me a temp end user account, you can use support@wesdrury.zendesk.com so I can log in as a end user.

• Russur

  • May 17, 2016 21:12

  fwiw, I did a screen cap from dev tools, when i had selected teh alertbox div. It appears that its size is inheriting from somewhere else?

  

• Wes Drury

  • May 17, 2016 21:15

  The alertbox won't inherit until there is data in there as the JS will insert it the data.  I see you have two console errors what are they?

• Russur

  • May 17, 2016 21:17

  Here is a screen cap of that:

  

• Wes Drury

  • May 17, 2016 21:24

  K there is our issue I believe.  

  Lets change your domain to support.brainspace.com/api/v2.... and if that doesn't work let change to /api/v2....  remove all the https.

  Also do you have a SSL certificate or anything installed.

• Russur

  • May 17, 2016 23:10

  Hi Wes,

   

  Changing the Domain Name, seemed to do the trick! Looks great! Thanks for your help!

   

   

  Russ

• Wes Drury

  • May 17, 2016 23:12

  @Russ - Glad to hear the domain name did the trick.  Best of luck!

• Russur

  • May 18, 2016 15:32

  Hi Wes,

   

  One other question, is there a way to click and toggle that Notification box off and on?

  Thanks,

   

   

  Russ

• Wes Drury

  • May 18, 2016 17:24

  @Russ - If you look at the Live Demo then you will see a white X in the top right corner that users can click on to close however it would come back if they navigate to another page.  Since you have a custom theme you may need to adjust where the X is showing via CSS.

• Luke Barrett

  • May 25, 2016 07:37
  • Edited

  Hi Wes

  This looks like a great feature which we'd get a oot of use out of. Sadly I'm having difficiulty getting it to work. I'm trying it in our Sandbox. Will this make a difference?

  *****************************************

  Screenshots of how I've copied the HTML and JS are below. I've created an article labelled with alert too.

  Any advice would be much appreciated.

  Thanks - Luke

  

   

  Edit: removing certain data from post.

   

   

• Wes Drury

  • May 24, 2016 15:10

  @Luke - I just installed it on my Sandbox without any issues so it should work.  From  your screenshot the domain name has too many slashes so make sure your domain name is correct, it should be:

  "https://transversal1442412232.zendesk.com//api/v2/help_center/articles.json?label_names=alert"

  You can also try: 

  "/api/v2/help_center/articles.json?label_names=alert"

   

• Luke Barrett

  • May 24, 2016 15:35

  Wes - you're a star - thank you so much for the quick and helpful response.

  I changed it to "/api/v2/help_center/articles.json?label_names=alert" and it's worked a treat. Very exciting! 

• Wes Drury

  • May 24, 2016 17:34

  @Luke - Glad to hear it worked, you can now move that code straight over to production without changing a thing.  If you run into any other issues just let me know.

• Hugo Villalobos

  • July 03, 2016 19:12

  Hello guys, I have the banner like this:

  Is there any way I can modify the code to have the title in the middle and centered?

   

  Thank you.

• Marissa Frizzell

  • August 08, 2016 20:15

  Thanks for this, worked like a charm!

• Wes Drury

  • August 10, 2016 19:59

  @Marissa - Glad to hear.  Best of luck

• Edmund Eng

  • August 25, 2016 13:48

  Hi Wes,

  Great work on this notification banner and your very clear instructions.  It's exactly what I was looking for!

  Need some assistance though.  I added the notification code to my Help Center Professional Plan, and notifications doesn't seem to be working.  The notification banner does not appear after creating an article with the tag "bigalert" (I changed the label)

     $.get( "https://helpcentral.zendesk.com/api/v2/help_center/articles.json?label_names=bigalert" ).done(function( data ) {

   

  I'm currently in the process of preparing for the migration from Web Portal to Help Center (I know, I'm late to the party).

  Is the notification banner not appearing because my Help Center instance is still in "Setup Mode"?

   

• Wes Drury

  • August 25, 2016 14:08

  @Edmund - I believe it should appear even though you are not live.  Try the following:

  Make sure your JS is below the $(document.ready) function 

  Change your code to:

   $.get( "/api/v2/help_center/articles.json?label_names=bigalert" ).done(function( data ) {

  Let me know if that helps.

• Edmund Eng

  • August 25, 2016 18:29

  Hi Wes,

  Your recommendation to move the JS code to below the $(document.ready) function worked.  Thank you for your guidance.  The notification banner is gorgeous!

  A follow-up question if you don't mind.

  After entering one and two notifications, I noticed the notification banner's close button "X' at the upper right corner disappeared (see screenshot).  I saw the "X" when the page/notification first loads, but then disappears.

  Tried clearing cache and using Chrome and Firefox on Mac.

  Have you seen that before? 

  

   

   

   

   

   

• Wes Drury

  • August 25, 2016 20:36

  @Edmund - Its not doing that in the demo site so I bet its a CSS issue somewhere with that theme.  When I get some time I'll plug it into the Copenhagen theme and see if I get the same results.

• Wes Drury

  • August 25, 2016 20:38

  By the way I also have accordions for the Copenhagen theme just haven't had time to post all the code.  You can see it here.

• Mike Tamosaitis

  • September 07, 2016 21:01

  Wes,

  When I try to use the alert for a category with a title that is not in English the alert code does not work. When I paste any URL for the place that I want the alert to appear that has something other than English in it I get a bunch of random characters like the link below. How can I tell Zendesk to use the correct characters? I read that I should be able to use the decodeURIComponent but Im not as good at Java as you are. Or how can I change the existing code to only use the part of the link below up to the category number. 

   

  ..../hc/ja/categories/201299046--%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AB%E3%81%AF-%E3%82%88%E3%81%8F%E5%AF%84%E3%81%9B%E3%82%89%E3%82%8C%E3%82%8B%E8%B3%AA%E5%95%8F%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F

• Wes Drury

  • September 08, 2016 14:48

  @Mike - Sorry I haven't tested this with different languages but hopefully I can get around to it just not sure when.  If someone else solves feel free to submit a commit to my github where the code is posted.

• Jason Shangold

  • October 26, 2016 10:05

  Hi Wes,

   thanks for this it is really helpful, I am using the copenhagen theme and it is not showing the x to close out the alert, I was wondering if you had any ideas on how to fix that.

  thanks,

  Jason

   

• Ben Tyler

  • November 09, 2016 10:50

  Hi Wes,

  Thanks for the above code, it has been very helpful for our help centres, I have one question, what can I do when there is no alert tag set to any KB articles? At the moment it shows an empty placeholder of where the alert bar should be and looks as attached.

  

  Is this something you have taken into account or would this need a further JS if statement?

   

  Kind regards

   

  Ben Tyler

• Wes Drury

  • November 09, 2016 16:20

  @Ben - If you don't have a tag then it wouldn't show anything at all, it only shows the alert when a tag is in place.

• Wes Drury

  • November 09, 2016 16:25

  @Jason - I will have to take a look, copenhagen theme didn't exist when this was created so it may have some CSS that is interfering.  

• Lisa Davis

  • November 12, 2016 00:47

  Really great work on this banner Wes!  It works beautifully.  Thank you!

• Wes Drury

  • November 14, 2016 21:54

  @Lisa - thanks for the great feedback.

Please sign in to leave a comment.