Recent searches

No recent searches

Workflow: Selectively hide help center components using Curlybars

Zendesk Product Manager

Edited Sep 06, 2024

Curlybars lets you hide components in your help center, such as the article, section, category, community topic, or community post. To do this, add conditional statements in your theme code that target the unique ID number of the component you want to hide.

This customization is available for the Guide Professional and Enterprise plans, and the Suite Growth plan or higher. The workflow includes the steps below.

Step 1: Find the component's ID number
Step 2: Edit the theme code
What's next

Step 1: Find the component's ID number

Each component has a unique ID. The ID number appears in the URL when you navigate to the component's page.

To find the unique ID number

In your help center, navigate to the component. For example, click a category if you want to hide the category from your help center.
Find the URL in your browser's address bar and get the unique ID number. The URL has the sample format /hc/en-us/categories/200420805-General. In this example, the number 200420805 is the unique ID of the component. Take note of this number.
Repeat the steps to get other unique ID numbers if you need to hide multiple components.

Step 2: Edit the theme code

Access your theme code and add the isnt helper expression. When you use the isnt statement on a component's ID number, your theme won't render the targeted component and hide it from your help center pages.

To access your theme code

In Guide, click Guide admin.
Click the Customize design icon () in the sidebar.
Find your live theme and click Customize. Then, click Edit Code.
Find the page you want to edit in the templates folder.

To add the isnt statement

In this example, the Copenhagen theme is edited to hide the Announcements and Unlisted categories from the home page. They're still accessible to users with a link to the categories and their articles.

Home page components to hide.png

In the templates folder, click home_page.hbs to access the home page template.
Add the isnt statement with the unique ID number of the component. Repeat the code if you need to target multiple components.
Click Publish. To check that the components disappeared, click Preview.

Home page with hidden components.png

What's next

Use the isnt statement to hide other components from your help center and community pages. Select a template file in your theme and target the component's ID. In this example, an article is removed from the sections list in the sidebar, but is still accessible through search or direct link.

Hide an article from the section sidebar.png

To achieve this, add the isnt statement with the article ID to the article_page.hbs template file.

Isnt statement in article page template.png

For more information, see the article: Customizing your help center theme.

65 comments

Date

Lila Kingsley

Mar 18, 2021

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?

Trapta Singh

Zendesk LuminaryCommunity Moderator

Jul 19, 2021

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

Dganit Rauchwerger

Jul 25, 2021

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

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Jul 27, 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

Vlad

The Wise One - 2022Community Moderator

Mar 22, 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!
}

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Apr 22, 2022

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

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Apr 23, 2022

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'
}

Bob Garber

Sep 15, 2022

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>

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Sep 16, 2022

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:

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Sep 28, 2022

Hi Maximilian Kreisler, yes you can hide using JS or CSS.

Add CSS at top of the homepage like below. I add this code at home_page.hbs because I'm hiding it only for homepage not other pages.

Lumi

Zendesk Luminary

Dec 13, 2022

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!

Vlad

The Wise One - 2022Community Moderator

Dec 14, 2022

 if an article has the content tag 'abcdef', don't show it in the Search results

- as far as I know, this is not supported by ZD, so it's not doable.

Lisa Sedlak

Jan 05, 2023

Jake Bantz

We are going to do a Beta test of a product. We want to link to articles in our help center, but don't want those showing up in a list or category, however. we DO want the direct link the the article show up.

For example:
Let's say we have an iOS app for our product and we need to Beta test it. We have links in the iOS app that lead to how to use the app, but since the app is not available for use yet, we want to hide the articles, but have those testing to be able to see the articles (without having a Zendesk account).

Is this possible?

Lila Kingsley

Jan 09, 2023

Lisa Sedlak we did something similar in our public help center. We hid specific articles from displaying in Category, Section and Article sidebar navigation cribbing Jake's code from his article_hide_in_sidebar.txt attachment. Basically as he says you follow the convention of adding the isn't helper after the #each helper for articles in conjunction with the article id i.e. {{#isnt id 1234}}

For category_page.hbs: insert the isnt helper after {{#each articles}}
For section_page.hbs & article_page.hbs: insert the isnt helper after {{#each section.articles}}

For more than one article you add multiple {{isnt}} and close each with {{/isnt}}. I wanted/preferred to use labels instead of individual article ids but wasn't able to get that working.

Here's what our category_page.hbs code snippet looked like as an example (I just added the stuff surrounded by comments.

{{#each articles}}

    {{!-- Special logic to hide Articles in navigation via isnt helper--}}
    {{#isnt id 111111}}
        {{#isnt id 222222}}
            {{#isnt id 333333}}
    {{!-- --}}

<li class="article-list-item {{#if promoted}}article-list-item--is-promoted{{/if}}" >
{{#if promoted}}
    <span class="fa fa-star" title="{{t 'promoted'}}"></span>
{{/if}}
<a class="article-list-item__link" href="{{url}}">{{title}}</a>
</li>

    {{!-- Special logic to hide Articles in navigation via isnt helper--}}
            {{/isnt}}
        {{/isnt}}
    {{/isnt}}
    {{!-- --}}

{{/each}

Jake Bantz

Zendesk Product Manager

Jan 10, 2023

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.

Ari

Mar 20, 2023

I’m using Zenplates’ Ruby theme and want to selectively hide about 12 articles from a category page and some of its sections.

I’m still trying to figure out where to put the {{isnt id… codes for the theme templates, but my question is whether I need to include any html elements between the opening and closing {{/isnt}} since the intention is that those list items do not render.

Lila Kingsley

Mar 20, 2023

Ari the isn't helpers surround the code block that lists articles. So essentially it's saying list the articles which are not the article id specified in the helpers. You shouldn't need additional html.

As far as location, you put the isn't helpers after the each articles helper on the category, section and article templates (see my comment above for full code snippet I used):

For category_page.hbs: insert the isnt helper after {{#each articles}}
For section_page.hbs & article_page.hbs: insert the isnt helper after {{#each section.articles}}

NOTE: I hid articles in ALL categories/sections/articles which is a bit different than what you want to do...but I would think you could possibly use if/else + the isn't helpers for that.

https://developer.zendesk.com/documentation/help_center/help-center-templates/introduction/#conditional-helpers

Alyssa

May 02, 2023

Is there a workaround to hide an article from search as well? Ifra Saqlain perhaps you've cracked this?

Please Zendesk, let us publish unlisted articles 🙏🏼

Abhishek Tiwary

Jun 09, 2023

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

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Jun 10, 2023

Hi Abhishek Tiwary,

Solution 1

Check the article id on section page and category page using

 {{#isnt id 360038927131}}

All code 

{{/isnt}}


Note: 360038927131 it's my article ID.

Category Page:

Section Page:

Solution 2

Make your article set as draft in your help center.

If any confusion feel free to ask.

Thanks

Abhishek Tiwary

Jun 10, 2023

Thank you Ifra Saqlain,

My help center has many articles with the same title. I was thinking if it was possible to hide all of them at once using the article title?

Regards,

Abhishek Tiwary

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Jun 11, 2023

Abhishek Karn,

copy the given code and paste it at the bottom of your script.js file,

 let tag = document.getElementsByTagName('a');
   for (let i = 0; i < tag.length; i++) {
      let anchorTag = tag[i];
      let value = anchorTag.innerHTML.trim();
      if (value == 'Oxygen Publishing Metadata - do not delete.') {
         anchorTag.parentElement.style.display = 'none';
      }
   }


Screenshot for same:

Now, your article would be hidden from all pages if exists.

Make sure article title is correct which I mentioned in the above code

Oxygen Publishing Metadata - do not delete.

Abhishek Tiwary

Jun 12, 2023

Thank you Ifra Saqlain,

This was a great help.

Regards,

Abhishek Tiwary

Niraj Makwana

Jun 13, 2023

So I have used this article to hide sections and it works, but the problem I'm having is, that an an agent the section and articles also become hidden for me. How do I do it so that the normal users can not see the hidden sections but and an admins/agent I see can. I think the only option can be is making each articles set to "Visible to Agents". but there are so many I'd have to set up in that way, any ideas?

Christopher Kennedy

Zendesk Developer Advocacy

Jun 16, 2023

Hi Niraj,

To make articles visible to agents only, the simplest approach would be to change the article permissions as you suspected. This is also possible to do in a bulk update.

Paolo Votta

Jul 05, 2023

Hi everyone,

Is it possible to hide the community button in the header of the homepage?

We are in a testing phase and we do not want our end-users to see it for the moment.

If possible could anyone share a code example?

Thank you in advance for any input.

Christopher Stock

Zendesk LuminaryCommunity Moderator

Jul 05, 2023

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'}}

Greg Katechis

Zendesk Developer Advocacy

Jul 06, 2023

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!

Paolo Votta

Jul 06, 2023

Hello and thank you for your help! The thing is that I need the community to be activated but only visible to internal agents in this moment. Later on I will try to extend it for a specific user segment. It would be a great improvement if you can restrict the visibility of the community by user segment, and NOT only posts visibility, but the entire community. For the moment I will remove the community button from the code as it was suggested.

Thank you for taking the time to reply to my question!

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Oct 22, 2024

Hi Marina Kutt,

Can I get URL of both HC to fix this issue. I think you need to use segments for your HCs.

Thank You

Ifra

Please sign in to leave a comment.

Workflow: Selectively hide help center components using Curlybars

Step 1: Find the component's ID number

Step 2: Edit the theme code

What's next

65 comments

ADDITIONAL CONTENT

Common topics

Role-based guides

Additional resources

Workflow: Selectively hide help center components using Curlybars

Step 1: Find the component's ID number

Step 2: Edit the theme code

What's next

65 comments

ADDITIONAL CONTENT

Related articles