Adding a notification banner to your Help Center v2

214 Comments

  • Liz

    Thanks Wes!

    0
  • Wes Drury

    @Liz - Your welcome.  Glad to hear everything worked out.

    0
  • Chris Stock
    Community Moderator

    Hey Wes, really useful thanks!

    0
  • Wes Drury

    @christopher - You're welcome.  Enjoy

    0
  • Rim Hamdi

    Hello Wes - This tip is very useful, many thanks for sharing!

    One quick question: will the text always be displayed in your default language, even if you created language versions of the article containing the label?

    I made a test with default content in English and created a version in French, but my Help center in French would still display the text in English.

    Thanks!

     

    0
  • Wes Drury

    @Rim - I've never tested with different languages so I'm not sure how it reacts.  Its pulling from the API but not probably from the locale.  When I get some free time I'll see what I can figure out.  If you resolve it yourself just let me know.

    0
  • Antonio Naddeo

    Very useful indeed, awesome! However it does not react to the different languages. If you create an article and add the translation for each language (like in my case ES/FR/DE/IT) the alert message only display source language. For our support team an issue/alert might be either of all the languages or for only one of them. In the latter case we would still need to ability to display an alert only for one language. So ideally if you have a language, where you don't have that issue, by don't adding the translation you don't display the alert. That would be really terrific!

     

    Thanks

    0
  • Antonio Naddeo

     

     

     

     

     

     

    The other issue I have is that the alert message seems to be displayed only if I am logged in as an agent. The alert message is not displayed to final user without login. How can I make the alert message to be displayed also publicly? 


    0
  • Wes Drury

    @Antonioaddeo - If you look at my test site the notification is showing without you being logged int.  Looks like you may have something else going on there as the code I gave it doesn't matter if your logged in our not.  Is your HC open for anonymous access.  Make sure you don't have my code interlaced with some of your other custom JS code.

    0
  • OT

    For our site it only shows after you log in - but that's because the section we have the article in is locked to logged in users only.  Worked perfectly straight away for us :)

    0
  • Wes Drury

    @Ola - Great point as the article will follow the rules from the section.

    @Antonioaddeo - Can you see if this is the case with your HC.  Is the article in section that has been locked or only allow certain users to se.

    0
  • Antonio Naddeo

    Thank you for the answers! The section where the article has been places is available to "anyone" and our HC is open for anonymous access, yet the alert is displayed only after sign-in. 

    0
  • Rob Davis

    Hi Wes.  This is FANTASTIC!  Thanks for doing this.

    I just added the code to my Help Center sandbox and it isn't fully working.  I double checked that I copied in the correct code from your instructions. The announcement bar is white and I can't seem to change it. Suggestions?

    Thanks!

    0
  • Antonio Naddeo

    Since for our support this feature is vital, I have 2 comments:

    1. I have installed again the code but  I am unable to make the alert banner visible to logged out users (anonymous users). I have the HC visible to anonymous users and the section of the article is also public. Anybody else having this issue?
    2. Say that I manage 4 languages, and the alert is only related to one of the languages. It is very important then to know if we can manage the alert depending on the language by adding the appropriate translation.
    0
  • OT

    @antonionaddeo - for the multiple languages could you use a different label for each language, and then display results for the appropriate label depending on the user's language?

    0
  • Antonio Naddeo

    I guess I could use a different label for each language, but how do I add the input about the alert label in different languages?

    0
  • Russur

    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

    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

    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

    @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

    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

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

    0
  • Russur

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

    0
  • Wes Drury

    @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

    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

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

    0
  • Russur

    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

    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

    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

    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

Please sign in to leave a comment.

Powered by Zendesk