Selectively hiding Help Center components using Curlybars

Return to top

62 Comments

  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    Hi @Aaron Wilson,

    I don't think the option to do so is available in Zendesk right now, but maybe you can put the ID or the Class to the particular paragraph of your article content. Then, you can check the user role and article id of the current article and user by using Javascript. If it matches the condition you can show the paragraph.

    Thanks

    1
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Alief Putera :)

     

    Try this:

    Add the given CSS to your new_request_page.hbs file at the top inside the <style> tag.

     

    .logo {
    display: none;
    }



    Screenshot for the same:




    Note: You can change the class name (logo) as per yours.
    If you have something else remove ".logo" and add ".anything".

     

     

     

    If any queries, feel free to ask.

    Thanks

    Team

    1
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi  Bob Garber,

    Add the code at the bottom of your script.js file:

    $(document).ready(function () {
      var _x =  $(".article-attachments .attachment-item > a[href$='.png']").parent("li").hide();
    })

    Screenshot for the same:


     

    Make sure document_head.hbs file must have jQuery CDN:

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


    Screenshot for the same:
    1
  • Dganit Rauchwerger

    Hi community,
    Here's my scenario that I hope you can help me with. I have 1 category that includes 4 sections with articles in each section. I'd like to hide this 1 category/4 sections/all articles in the sections from the Help Center and enable people to reach the articles only by a direct link.
    I used the very helpful guidance and was able to hide the category and (so far) 1 section from the Help Center. I'm still not getting the final result that I need. Here are my questions:
    1. When hiding sections, are the articles in each section automatically hidden or do I need to hide each article separately?
    2. How do I hide multiple sections? I was only able to hide one.
    3. After hiding a section, I then searched for an article in that section. The article came up in the search results and using the result, I was able to navigate back to the hidden section. In the attached screenshot, an article is retrieved from the Builder section, a section that I was able to hide. So what I am finding here, is that even if a section is hidden, searching for an article that is located in a hidden section will bring up the result with the Help Center breadcrumbs and not as a stand-alone article. This in effect negates hiding the section.
    Thanks for any guidance and tips.
    Best wishes, Dganit

    1
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Alief Putera, I never tried to add a custom handlebars helper so I can't suggest you but you can get your solution with the internal CSS or only by JS. I only gave a solution with CSS (The easiest solution) but you can achieve it only with JS, depends on you.

     

    1). Add the below script to your new_request page at the top.

    <script> 
    pageName = 'new_request';
    </script>

     

    2). Check the template name and hide the logo. Add the below code to your script.js file at the bottom.

    if(pageName == 'new_request'){
    document.querySelector('.logo').style.display = 'none'
    }

     

     

    1
  • Christopher Stock
    Community Moderator
    Zendesk Luminary

    Hey Paolo Votta, the community button won't appear if you do not have the community activated on your help center. But you can see it when you're in development mode.

    You can also remove the code from the header.hbs file, you're looking for {{link 'community'}}

    1
  • Abhishek Tiwary

    Hello Zendesk support,

    Can I hide a specific article from all the sections?

    For example, I have articles with the title, "Oxygen Publishing Metadata - do not delete". 
    I need to hide this article from all the sections across all the categories.

    Regards, 

    Abhishek Tiwary

    1
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Aaron Wilson, 

    You have another way to hide the specific paragraph from the public.

    Add the below code on script.js file;

    function hideSpecificParagraph(){
    var specificPara = document.querySelector('.article-body p:nth-child(3)');
    if(HelpCenter.user.role !=="manager") {
    specificPara.style.display="none";
    }
    }
    hideSpecificParagraph();

     

    I used .article-body p:nth-child(3) in the script code because my specific paragraph is on third number.

    After adding the code:

     

    End User-

     

    Agent -

     

    Anonymous -

     

    Admin -

     

    But when you update the article (if you upgrade the article with new content and headings etc) then you will have to update the number of paragraph in the script code : '.article-body p:nth-child(4)' , because the number of paragraph would be change so my suggestion is you should add the class name in your specific paragraph and then hide that and script code would be :

     function hideSpecificParagraph(){
    var specificPara = document.querySelector('.specific-para');
    if(HelpCenter.user.role !=="manager") {
    specificPara.style.display = "none";
    }
    }
    hideSpecificParagraph();

     

     

    Add the class in specific para to hide from the public.

     

     

    Thanks

    Team Diziana

     

     

    1
  • Vlad
    Community Moderator
    The Wise One - 2022

    hey, do you want to hide a particular part of an article based on a visitor's device?
    You can do that with JavaScript. Example:

    var ua = navigator.userAgent.toLowerCase();
    var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
    if(isAndroid) {
      // Do something!
    }
    1
  • Lila Kingsley

    Great article, thank you!  Wondering if it is possible to hide articles by label instead of id?  

    I got the code to working hiding articles by ID but get an error when I try to replace the isnt id statement with syntax I thought was correct for labels (looking at examples in the community/help center).  

    i.e. Using 

    ((#isnt article.labels 'labelnamehere'}}

    Gives Error

    not possible to access `article` in `article.labels`

    I think this is happening b/c labels is an array...the comments in this article seem to indicate that JavaScript needs to be used to pull specific values from an array. 

    Anyone have tips on doing this?  

    1
  • Alief Putera

    Hi Ifra Saqlain

    Thanks! I didn't know we can include internal css (and apparently <script> as well) inside *.hbs. I laughed myself after reading your answer. Also thank you for your quick response. Do we have documentation somewhere about this? (that we can include internal css and js inside hbs)

    Still curious about creating custom handlebars helper though, so is it not possible?

    0
  • Abdelhameed Khaled

    If I have multiple forms how to get the URL of each one of them . I want to include each of them in different articles of categories because I will hide submit a request 

    0
  • 立松貴央 TakaoTatematsu

    Vlad 

    Thank you for your advice the other day. https://support.zendesk.com/hc/en-us/articles/4408845769882/comments/4483557247642

    The way you taught me helped me achieve what I wanted to do!!

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Karolina, can your please share the screenshot of your requirement, what do you wanna hide and what are you hiding from the code?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Abdelhameed Khaled,

    Open your submit a request page and select the first form from the dropdown.

    You will get the URL of that form in the searchbar, copy that, and use it wherever you want.

     

    Again select the second form from the dropdown copy URL and use that.

    If any issues feel free to ask :)

     

    Thanks

     

    0
  • Alief Putera

    Hi everyone, I want to ask about conditional of showing logo in header. So I want to hide logo in 'new_request' page but show in other pages.

    I have 2 thoughts to achieve this:

    1. Check current page url/path then use it as conditional when render the logo block. Something like
    {{#if current_page = new_request}}. Is there any helper available to check that?

    2. Create custom helper/function to check current url then call from template. Something like:
    ## script.js
    Handlebars.registerHelper("check_url", function() {
      return /* check current url logic */;
    });

    ## template
    {{ do check_url check}}

    For number 1 I can't find it in docs. For number 2 it doesn't seem to work (no handlebars.js. If I have to include it first, how?).

    Thank you in advance

    0
  • Dganit Rauchwerger

    Thanks again @.... I will definitely reach out if I need more help.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Let me know if you need more help :)

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Bob Garber, you can check (with if condition) the file type using JS and then hide this (png files only)

     

    Thanks.

    0
  • Dganit Rauchwerger

    Thank you so much @... for this detailed reply! It is very much appreciated.

    0
  • Cheeny Aban
    Zendesk Customer Care

    Hi Aaron,

    Unfortunately, article visibility is available per article. There is no option to take a specific paragraph of an article and make it visible only to admins but not visible to the public.

     

    0
  • Lumi
    Zendesk Luminary

    HI, is there a way to hide articles from Search Results and/or Section page by labels or content tags. Essentially, if an article has the content tag 'abcdef', don't show it in the Search results? Thanks in advance!

    0
  • Aaron Wilson

    Hi @... is it possible to take a specific paragraph of an article and make it visible only to admins but not visible to the public?

    0
  • Kim Nylander

    @... Thank you for the suggestion, but I ended up with the same error message (/isnt is not permitted in this context). Until I figured out that I was missing a # in front of isnt. That helped. 

    I used your suggestions to move the /isn't to line 30 and was able to hide the section title but the article list still shows. Hm... I moved the closing /isnt to line 56 and that seems to have hidden the section and the article list! 

    Hm... Now the section page itself says "oops you don't have access" because the one article in that section had permissions set to required login.

    The instructions I followed were from this comment: https://support.zendesk.com/hc/en-us/articles/115011134947/comments/115001799327

    0
  • Lila Kingsley

    @...:  my category code looks different than yours, and in our HC we're only hiding articles in the category template, but...I think your closing {{/isnt}} may be too far down.  Have you tried closing it earlier on, i.e. AFTER the </h2> on row 29, before the {{if articles}}?  

    0
  • Jason Schaeffer
    Zendesk Customer Care

    Hi Lila!

    This should be possible using the same approach in this doc:

    https://support.zendesk.com/hc/en-us/articles/115011134947-Selectively-hiding-Help-Center-components-using-Curlybars

    While custom code is not directly supported, you could use the Article object (instead of Category) and write some logic on the labels property (instead of the ID).

    Jason Schaeffer | Customer Advocate | Support@zendesk.com

    0
  • Bob Garber

    Thanks Ifra,

    I wrote this code, but it is hiding all file types. Not sure if I have something in the wrong order, or if the code is wrong.

          <section class="article-info">
            <div class="article-content">
              <div class="article-body">{{article.body}}</div>

              <div class="article-attachments">
                <ul class="attachments">
                    {{#each attachments}}
                    <script>
                        var extension = fileString.substring(fileString.lastIndexOf('.') + 1);
                        if (extension == ".png"){
                        } else {
                            <li class="attachment-item">
                              <a href="{{url}}" target="_blank">{{name}}</a>
                              <div class="attachment-meta meta-group">
                                <span class="attachment-meta-item meta-data">{{size}}</span>
                                <a href="{{url}}" target="_blank" class="attachment-meta-item meta-data">Download</a>
                              </div>
                            </li>
                        }
                    </script>
                  {{/each}}
                </ul>
              </div>
            </div>
          </section>
    0
  • Greg Katechis
    Zendesk Developer Advocacy
    Hi Paolo! No need for any custom code for this, you can just disable the community by following the directions here. As an admin, you'll still be able to see it and work on it, which willl give you the same benefit without having to worry about any theme customizations!
    0
  • Jake Bantz
    Zendesk Product Manager

    Lisa Sedlak, Lila is right on with their suggestion.

    There is a limitation that using these workarounds, it is not possible to hide the article from search (this is discussed a little earlier in the comments on this article). A possible workaround would be to instead use a custom page for the 'hidden' documentation, and provide those Beta users with the destination of that page.

    Hope that helps.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Abdelhameed, I'll get back to you soon with your answer.

    Thanks

    0

Please sign in to leave a comment.

Powered by Zendesk