How to put all sections and articles on home page

26 Comments

  • Patrick Hogan

    Thank for posting this, Vladan. This is a great help for those who wants to have this on their homepage. Really easy to follow, too. Thumbs up!

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    Awesome tip, Vladan. Thanks for sharing!

    0
  • Isabelle

    Thank you very much for this snippet. May I ask you how you would split the content into two columns?

    Thanks a lot, 

    0
  • Tami Settergren

    A big thanks to you, Vladan! I've been trying to do this and learn HTML5 at the same time by looking things up on the web. Should have known to start with Zendesk Support articles first, you guys are great!

    0
  • Matthew Elijah

    Hey there, also wondering how to split the content into two columns? Thanks!

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hi Matthew, Welcome to the Community!

    Just to check are you on Copenhagen theme? Could you share a screenshot of what you got there?

    0
  • Team Mudrex

    Is there a way to split it into 2 columns?

     

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hi Edul! Yes, that is possible.
    Open CSS file of your Help Center theme (Guide admin / Themes / Select active theme / Edit code),
    and find this value (should be the 812th line in this ZD default Copenhagen theme):

    flex1 0 340px;

    Just make a little change so it looks on this way:

    flex: 1 0 420px;


    That should be all. If it doesn't work, please provide me here with a link to your help center.
    Thanks!

    0
  • Caroline Johnson

    Hi Vladan - Thanks for the info!

    Do you happen to know a way to have the "View all XX articles" expand on the homepage, rather than click thru to the category page?

    Thanks in advance!

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hi Caroline, Yes that is doable and requires much more coding.

    If you have a front-end developer in your team just direct him to the Zendesk API documentation, a part which applies to the listing of all articles within a section: https://developer.zendesk.com/rest_api/docs/help_center/articles#list-articles

    Hope this helps.

    0
  • Caroline Johnson

    Thanks Vladan! Will give this a try.

    0
  • Guillaume Zurbach

    Thanks for sharing this Vladan! One minor detail: I had to wrap {{#each sections}} with <div class="section-tree"> to get everything working perfectly. It fixed a bunch of margins and made the whole thing show up with two columns without even tweaking the CSS code. 

    <div class="section-tree">
    {{#each sections}}

    [...] code removed for readability [...]

    {{/each}}
    </div>

     

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Thanks for the update, Guillaume!

    0
  • Mário Silva

    [SOLVED]

    Hello, I am doing some fetch from the API to get all categories and sections, but I have some sections that are private. Is there a way to filter does private categories/sections on the API?

    https://developer.zendesk.com/rest_api/docs/help_center/sections

    0
  • Nicole Saunders
    Zendesk Community Manager

    Have you tried looking at the user_segment_id attribute? 

    0
  • Kathrina Rivera

    Hello i followed all the tips mentioned even in the comments. The section appeared as columns however there's no margin on the left column

     

    0
  • Pulkit Pandey
    Community Moderator
    Zendesk Luminary

    Hey Kathrina Rivera

    Can you please share the URL of your HC where you implemented this so that I can go through it and provide you the exact solution to your problem.

    Thanks 

    Pulkit

    Team Diziana

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

    Hey Kathrina,

    You can try this.

    Paste this code on home page:

    <section class="knowledge-base container">
    {{#if categories}}
    <div class="category-tree">
    {{#each categories}}
    <section class="category">
    {{#if ../has_multiple_categories}}
    <h2><a href="{{url}}">{{name}}</a></h2>
    {{/if}}

    {{#each sections}}
    <section class="section-wrapper">
    <section class="section">
    <h3>
    <a href="{{url}}">{{name}}</a>
    </h3>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li {{#if promoted}} class="article-promoted" {{/if}}>
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}">★</span>
    {{/if}}
    <a href="{{url}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{else}}
    <i class="section-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}
    </section>

    {{else}}
    <i class="category-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>

    {{/each}}

    {{#if more_sections}}
    <div>
    <a href="{{url}}">{{t 'see_all_sections'}}</a>
    </div>
    {{/if}}
    </section>
    </section>
    {{/each}}


    {{pagination}}
    </div>
    {{/if}}
    </section>

     

    Paste this CSS code on your stylesheet at the bottom side:

    .container{
    max-width:1160px; // Container width depends on your theme container, may your container width if 1100px , 1400px etc.
    }

    .section-wrapper{
    display:flex;
    flex-direction:row; // It could be flex-direction:column - depends on you
    }

    .section-wrapper .section{
    flex: 1 0 100%; // On mobile devices

    }

    @media (max-width:1024px){
    .section-wrapper .section{
    flex: 1 0 340px // On Desktop
    margin-right:30px;
    }
    }

    And

    Here is section class so if you need to add margin in section columns, you can add like this:

    .section{
    margin-left:30px; //As per your requirement
    }

    OR


    .section{
    margin-right:30px; //As per your requirement
    }

    Thanks

    Team

    0
  • Jeffrey Stone

    Hi there. This no longer works "out of the box" for Copenhagen theme 2.8. Has anyone updated theirs to work with the new theme? Thanks!

    0
  • Shweta

    Is there anyway I could filter out articles tagged with a specific label instead of showing promoted articles. Thanks in advance,

    1
  • Jake Bantz
    Zendesk Product Manager

    Hi Shweta, with the native functionality it is not possible to filter by article labels and present only those articles.

     

    0
  • Anne-Flore Caire

    Hello. I am trying to display all the articles in the sections of a category on the home page, but there is a configuration system which limits the number of articles to 6. What parameter in the code includes and influences this limit?
    Because in addition I can reduce this number via ".article-list-item:nth-child(n+3)", 3 for example, but I cannot increase the number by this parameter (by putting .article-list- item:nth-child(n+8) for example, I still only have 6 displayed). Thanks in advance

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

    Hi Anne-Flore Caire,

    It is doable by using API as Vlad said above. You can reduce the number of articles using CSS but cannot increase.

    Thanks

    0
  • Anne-Flore Caire

    Thanks for the quick feedback! Ifra Saqlain

    I was hoping there might be another solution since 2018. There are two issues with the solution: the development effort to implement it, and the fact that maintainability is outside the scope of Zendesk Help Centre administrators alone. So we won't be launching this workaround.

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

    @Anne-Flore Caire, I understand your requirement and concern.

    But you can give your feedback here:

    https://support.zendesk.com/hc/en-us/community/topics/1260801308530-Feedback-Help-Center-Guide-

    Thanks :)

    1
  • Destiny
    Zendesk Customer Care
    Hello Anne-Flore, 

    In its default configuration, the homepage is designed to exhibit a maximum of 6 articles, and at present, there is no native functionality to augment that limit. Furthermore, expanding this limit is not scheduled in our development roadmap at the moment. Please do share your feedback on the link that Ifra provided. 

    Hoping for your understanding on this matter. Thank you~!
    0

Please sign in to leave a comment.

Powered by Zendesk