Forums/Community/Community tips & tricks

Show custom notification banner like Zendesk's notification (Web portal)

Mikhail Zakharov
posted this on August 03, 2012 02:35

Have you ever seen the yellow Zendesk's notifications banner at the bottom of menu? Like "Service will be unavailable between....".

Do you want to have your own? I'll show how. For example you want to notice your customers about your webinar.

Create Global Javascript widget and place next code:

function HideBanner()
{
    // set cookie  
    $j.cookie('hide_banner', 'yes', { expires: 3 }); 
    $j("div#ubanner").hide();
}

var banner = "<br/><div id='ubanner' style='border: 1px solid orange;padding: 5px; font-size: 10pt; background-color: yellow; color:#333333'>Please join to our awesome webinar. <a href='https://yourdomain.zendesk.com/entries/21786162' onclick='HideBanner();'>Details</a> about webinar.&nbsp; <a href='#' onclick='HideBanner();'>(Hide banner)</a></div>";
 
if ($j.cookie('hide_banner')!='yes')
{  
    $j("div#page div#top").append(banner);
}

 

 

In variable "banner" I placed a sample link to forum entry with details. If you do not need inserting such link you can delete it.

<a href='https://yourdomain.zendesk.com/entries/21786162' onclick='HideBanner();'>Details</a> about webinar.

 

You can set up cookie time to live in next line.

$j.cookie('hide_banner', 'yes', { expires: 3 }); 

In this example it'll be 3 days.

 

Comments

User photo
Mikhail Zakharov
Портал технической поддержки

More comfortable script with settings section

http://pastebin.com/5Qm1tMie

August 15, 2012 00:57
User photo
Jack Bremer
3B Digital

Brilliant, thanks Mikhail

August 30, 2012 02:47
User photo
Matt Frowe
Cambridge ESOL

Very useful, thanks!

July 12, 2013 00:47
User photo
Jennifer Rowe
Zendesk

Glad you like it Matt! Mikhail has a bunch of great tips in this forum, so be sure to check them all out! Just search for "mikhail" and they should come up.

July 12, 2013 09:15
User photo
Sue Armstrong
keystone

Can this be done in Help Center?

March 18, 2014 07:47
User photo
Wes Drury
muscogee

@Sue yes this can be done in Help Center although the code is a little different.  We currently have this in our Help Center if an article is Promoted and the Title starts with "Issue:" then a yellow bar pops up at the top of Help Center which will give that title and link back to the article.  Let me see if this will fit into a default ZenDesk theme as our Help Center has been heavily modified.  I'll try and write up a tip on this and post the link back here.

March 18, 2014 08:17
User photo
Wes Drury
muscogee

@Sue attached is a screenshot of how it looks.  Is this what you are needing?

March 18, 2014 08:23
User photo
Sue Armstrong
keystone

Wow, that's great. I was initially looking for a scrolling banner, but this would be good too. I want to highlight what's new or any issues.

Thanks.

March 18, 2014 08:28
User photo
Wes Drury
muscogee

@Sue give me a couple of days to test and write everything up.  I'll post a link back here once I'm done.

March 18, 2014 09:46
User photo
Sue Armstrong
keystone

That would be really great, thanks.

March 18, 2014 09:49
User photo
Jennifer Rowe
Zendesk

@Wes, that'd be awesome! 

Mikhail (who wrote this article) wrote some of our most popular community tips--but most of them are for Web portal. It'll be nice to start getting the HC version of some of his tips! Thanks for helping with that!

March 18, 2014 09:50
User photo
Wes Drury
muscogee

Good news, got everything setup and tested on a default theme so I'll be working on writing everything up and posting a tip soon.

March 18, 2014 19:11