With the addition of our Help Center templating language Curlybars, the ability to add conditional statements was exposed which allows for dynamically impacting the rendering of your Help Center pages. By using conditional statements, we can target the unique id number of a category, section, article, topic, or post and hide that item while displaying others.
If you need to find the id of the item you would like to hide, just navigate to the page for that item and look to the URL. You should find something like /hc/en-us/categories/200420805-General
. The 200420805
is the id of my category.
Here's a little animation to highlight what I'm trying to achieve when I hide a category on the home page of the Help Center (watch 'Category 1'):
The code
I will cover a few scenarios here to elaborate on how these can be used. In these examples, I will be using the default code found in the Copenhagen Help Center theme. I will primarily be using the isnt helper, as the basic idea with it is that if the value does not match, then render the displayed code - effectively hiding (or not rendering) the identified item. You can see here I want to exclude a specific category on the home page, so I've passed it through the isnt
statement:
I have attached the entire code of my homepage template from this example here. You can change my category id for your own, and then you will be able to hide your categories.
Hiding multiple items
Hiding multiple items adds a couple more lines of code as we cannot pass multiple id numbers into a single conditional statement. Instead, we will want to nest the conditional statements so they can be analyzed appropriately. Here's an example:
If you would like to download the code for hiding multiple categories, you can find that code here.
Another example with articles
I know I've been talking about categories quite a bit, so I wanted to show how to implement this in another space. My scenario is I want to reduce the exposure of a certain article, but make it accessible via Search or a direct link to my customers. I've chosen the article page in the Copenhagen theme where other articles in the same section as the current article appear in a sidebar like this:
You may have hidden your article already at the section level, but we also will want to target the article here:
And again, here is the code if you would like to try it in your article template.
Some tech notes about this functionality
You may have noticed a pattern here that the code was being implemented in the {{#each}}
helper which iterates through the array of the specific items being requested. The each helper is native to handlebars.js, and you can read more on it in their documentation here. In the last image above, you can see the {{#each section.articles}}
in the code which renders the articles for the current section, but when the article is encountered with the id 219527708
, that code is instead skipped and the rendering moves onto the next article.
There may be some other ways to achieve a similar behavior, so feel free to try your hand at some other conditional helpers, but this should be a good start.
62 Comments
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
Hi Alief Putera :)
Try this:
Add the given CSS to your new_request_page.hbs file at the top inside the <style> tag.
If any queries, feel free to ask.
Thanks
Team
Hi Bob Garber,
Add the code at the bottom of your script.js file:
Make sure document_head.hbs file must have jQuery CDN:
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
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.
2). Check the template name and hide the logo. Add the below code to your script.js file at the bottom.
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'}}
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
Hey Aaron Wilson,
You have another way to hide the specific paragraph from the public.
Add the below code on script.js file;
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 :
Add the class in specific para to hide from the public.
Thanks
Team Diziana
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:
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
Gives Error
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?
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?
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
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!!
Hi Karolina, can your please share the screenshot of your requirement, what do you wanna hide and what are you hiding from the code?
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
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
Thanks again @.... I will definitely reach out if I need more help.
Let me know if you need more help :)
Hi Bob Garber, you can check (with if condition) the file type using JS and then hide this (png files only)
Thanks.
Thank you so much @... for this detailed reply! It is very much appreciated.
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.
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!
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?
@... 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
@...: 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}}?
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
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.
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.
@Abdelhameed, I'll get back to you soon with your answer.
Thanks
Please sign in to leave a comment.