Adding a notification banner to your Help Center v2

202 Comments

  • Russur
    Comment actions Permalink

    Hi Wes,

     

    I have copied everything to the correct place, as per your instructions, but nothing is displaying.

     

    I double checked the url that is accesed in the .js file, and that url does indeed get the correct article. But nothing is showing. Any ideas?

     

    Thanks,

     

     

    Russ

    0
  • Wes Drury
    Comment actions Permalink

    Russ,

    Can you provide a link to your Help Center and which solution are you trying to implement.  Are you on Pro Plan or higher.

    0
  • Russur
    Comment actions Permalink

    Hi Wes,

     

    Here is the link to our Help Center. 

    https://support.brainspace.com/hc/en-us

    We have an Enterprise plan, and i was trying to use the solution you detailed in your github site.

    Thanks, 

     

    Russ

     

    0
  • Wes Drury
    Comment actions Permalink

    @Russ - Your page is behind a sign-in so I can see it to take a look at the code.  Did you add the label to the article and also did you make sure it wan't in a locked down section.

     

    Also make sure your JS is below the $(document.ready) function and you change the first line to your subdomain

    0
  • Russur
    Comment actions Permalink

    Sorry about that. Here is the article, in edit mode, and you can see the alert setting.

    Here is a screen cap of my Header page.

    I put your .css source at the bottom of the css file. 

    I put the .js, at the bottom of my .js file, here is the screen cap of that:

    The article that has the alert setting, is just another article, but you have to be  a logged in user to access them. Even so, shouldn't I be able to see them?

    Thanks for your help!

     

     

    Russ

    0
  • Russur
    Comment actions Permalink

    Let me change the .js, and see if that works.

    0
  • Russur
    Comment actions Permalink

    I just moved that, to after the location you mentioned, but didn't seem to make any change.

    0
  • Wes Drury
    Comment actions Permalink

    @Russ - Everything looks correct but I would have to see your site in order to troubleshoot further.  Copy and paste this in your browser and let me know if you are returning the article.

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

    0
  • Russur
    Comment actions Permalink

    Hi Wes,

     

    I had tried this earlier, and got the same resutl. I tried it with your link ,and again got the article i expected:

     

    {"articles":[{"id":210383583,"url":"https://brainspace.zendesk.com/api/v2/help_center/en-us/articles/210383583-NOTICE-Brainspace-Support-offices-closed-for-Memorial-Day.json","html_url":"https://support.brainspace.com/hc/en-us/articles/210383583-NOTICE-Brainspace-Support-offices-closed-for-Memorial-Day","author_id":1531017245,"comments_disabled":false,"label_names":["alert"],"draft":false,"promoted":false,"position":0,"vote_sum":0,"vote_count":0,"section_id":201237369,"created_at":"2016-05-17T16:25:56Z","updated_at":"2016-05-17T16:25:56Z","name":"NOTICE: Brainspace Support offices closed for Memorial Day","title":"NOTICE: Brainspace Support offices closed for Memorial Day","body":"\u003cp\u003eIn observance of Memorial Day, (May 30th, 2016) Brainspace Support office will be closed. Regular Brainspace Support services will resume May 31, 2016.\u003c/p\u003e","source_locale":"en-us","locale":"en-us","outdated":false}],"page":1,"previous_page":null,"next_page":null,"per_page":30,"page_count":1,"count":1,"sort_by":"position","sort_order":"asc"}
    0
  • Wes Drury
    Comment actions Permalink

    Do you have any other customization that my be interfering with the script.  What theme are you currently using.

    0
  • Russur
    Comment actions Permalink

    We are using a customized theme. Would it help if i sent you the .css for that, or any of the other files? 

    0
  • Wes Drury
    Comment actions Permalink

    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.

    0
  • Wes Drury
    Comment actions Permalink

    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.

    0
  • Russur
    Comment actions Permalink

    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?

    0
  • Wes Drury
    Comment actions Permalink

    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?

    0
  • Russur
    Comment actions Permalink

    Here is a screen cap of that:

    0
  • Wes Drury
    Comment actions Permalink

    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.

    0
  • Russur
    Comment actions Permalink

    Hi Wes,

     

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

     

     

    Russ

    0
  • Wes Drury
    Comment actions Permalink

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

    0
  • Russur
    Comment actions Permalink

    Hi Wes,

     

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

    Thanks,

     

     

    Russ

    0
  • Wes Drury
    Comment actions Permalink

    @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.

    0
  • Luke Barrett
    Comment actions Permalink

    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.

     

     

    0
  • Wes Drury
    Comment actions Permalink

    @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"

     

    0
  • Luke Barrett
    Comment actions Permalink

    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! 

    0
  • Wes Drury
    Comment actions Permalink

    @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.

    0
  • Antonio Naddeo
    Comment actions Permalink

    Have we been able to find a solution, for Help Centers in muliple language to display an alert message localazied in the language and/or not display the alert if the article is not translated in that language?

    1
  • Hugo Villalobos
    Comment actions Permalink

    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.

    0
  • Marissa Frizzell
    Comment actions Permalink

    Thanks for this, worked like a charm!

    0
  • Wes Drury
    Comment actions Permalink

    @Marissa - Glad to hear.  Best of luck

    0
  • Edmund Eng
    Comment actions Permalink

    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"?

     

    0

Please sign in to leave a comment.

Powered by Zendesk