Help Center templating cookbook (Guide Professional and Enterprise)

Return to top
Have more questions? Submit a request

62 Comments

  • Trapta
    Community Moderator

    @Augusto, Thanks! I got it working now.

    Trapta

    0
  • Augusto Silva
    Zendesk team member

    @Trapta Happy to hear that :)

    0
  • Marco Timperi

    Hi,

    I have added this part of coding in order to have a functioning CC field for our webform:

    {{#if help_center.request_ccs_enabled}}
    <div class="comment-ccs">
    {{token_field 'ccs'
    class="ccs-input"}}
    </div>
    {{/if}}

     

    However in this way  the CC field is appearing as first field

    Is there a way to move it down, after the description field?

     

    I also already tried the following:

    $('#new_request.request-form label:contains("Subject")').parent().insertBefore('#new_request.request-form label:contains("CC")');

     $('#new_request.request-form label:contains("Description")').parent().insertBefore('#new_request.request-form label:contains("CC")');

     

     

    but it is not working.

     

    Thanks for your help,

    Marco

    0
  • Jessie Schutz
    Zendesk team member

    Hi Marco! Welcome to the Community!

    I'm checking to see if one of our Community Moderators can jump in here to help you out. Stand by!

    0
  • James Vreeken

    I'm wondering if there is a way to manually show or hide custom html elements based on permissions.

    Thanks!

    1
  • Jacob J Christensen - Cloudhuset A/S
    Community Moderator

    Hi James,

    You may find this article, Hide or show HTML based on user's role or group, useful for that.

    0
  • Jacob J Christensen - Cloudhuset A/S
    Community Moderator

    Hi Marco,

    I'm not really getting why you would need to do this to make a cc field work on your webform? You should be able to create and place a custom field any way you want as I understand it.

    There is a post on rearranging ticket fields here - it is a bit dated and you may need to browse through the comments to find the best fit for you - if you still need to do it this way.

    Hope that helps you out!

    0
  • Renato Dantas

    Hi, 

    I'm starting to use Zendesk HC and I would like to know how to fire an event when the user votes UP or DOWN in the article page.

    I already tried some options, but did not work. 

    Thanks in advance.
    Renato

    0
  • Jacob J Christensen - Cloudhuset A/S
    Community Moderator

    Hi Renato,

    I don't know the specific answer to your question, but there is a Tips & Tricks post here that also deals with the article vote event, so perhaps it includes something to get you started.

    Hope that helps.

    0
  • Sebastian

    I'm searching a way to allow that the search result overview snippets of the articles are defined. That text is taken from the articles first lines. However, if I add a warning or something then the warning appears. Which makes no sense. So I would like to have the actual article still show the warning at the top, but the snippet in search results should skip the warning. Can this be done somehow?

    0
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    Hi Sebastian

    If the warning is part of the content is will be shown in the search results, but depending on how generic the warning is or how many different ones you need to apply, you could maybe use templates to solve the problem.

    If you are on Guide Professional or Enterprise and you need a generic warning to appear on all article pages you can change the default article template to include your warning.

    If you need the warning to appear only on some articles and you are on Guide Enterprise you can create multiple theme templates and have up to 10 different templates with different warnings and apply them to the articles that should have them.

    When the warning is a part of the template and not the article it self it will not render in search results.

    If this does not solve your problem, could you provide a bit more details about your use case?

    • Why do you have the warnings?
    • Example of a warning?
    • How many different warnings are there? (one pr. article? or a they generic to an extend)
    0
  • Sebastian

    Hello Gorka,

    We have many help articles without a warning. The actual case is an article about our telegram support channel. We added a red warning at the top about scammers being active on the channel, imposing admin names or the "send x receive 10*x" scam and so on. So it's a warning especially for that task.

    We are on Enterprise Level.

    We have other warnings in other articles, I guess maybe 2 or 3% of the articles have warnings related to it's content. And unique.

    I saw the search engines on here are more google like. So a snippet taken out of the content of an article. So more seems to be possible. 

    0
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    Hi Sebastian

    The snippet shown in the search results are based on the search term the user inputs. If your warning has relevancy in the search it will then show up, provided that the warning is part of the content of the article.

    For us to understand your use case better, could you provide a screenshot of the search results page including the search term with an explanation of what you would like not to be shown in the search results

    0
  • Robert Cabral

    Got a pop-up prompting me to apply this code to section_page.hbs, but now the sub-sections results page is completely blank. Haven't heard from Zendesk Support. Anyone know what may be causing the issue?

    0
  • Trapta
    Community Moderator

    Hi @Robert Cabral,

    I think it's because according to the document when you replace the code of section template with the code mentioned in the document, you remove the else condition too which checks if a section has sub-section or not.

    I recommend updating the code with else condition. Try the below code and let me know if it works for you:

    <div class="container-divider"></div>
    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}
    {{search submit=false}}
    </nav>

    <div class="section-container">
    <section class="section-content">
    <header class="page-header">
    <h1>
    {{section.name}}
    </h1>
    {{#if settings.show_follow_section}}
    {{subscribe}}
    {{/if}}
    {{#if section.description}}
    <p class="page-header-description">{{section.description}}</p>
    {{/if}}
    </header>

    {{#if section.sections}}
    <ul class="section-list section-list--collapsed">
    {{#each section.sections}}
    <li class="section-list-item">
    <a href="{{url}}">
    <span>{{name}}</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/>
    </svg>
    </a>
    </li>
    {{/each}}
    <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a>
    </ul>
    {{/if}}


    {{#if section.articles}}
    <ul class="article-list">
    {{#each section.articles}}
    <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}" class="icon-star"></span>
    {{/if}}
    <a href="{{url}}" class="article-list-link">{{title}}</a>
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </li>
    {{/each}}
    </ul>
    {{else}}
    <i class="section-empty">
    <a href="{{section.url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}

    {{pagination}}

    </section>
    </div>
    </div>

    Let me know if this solves your issue.

    Team Diziana

    0
  • Robert Cabral

    @Trapta, that somewhat helped, but the alignment is way off. Instead of looking like this: https://support.datacamp.com/hc/en-us/categories/360000134714-Individual-User-Subscriptions

    It looks like this: https://support.datacamp.com/hc/en-us/sections/360001206094-Purchasing-a-New-Subscription

    0
  • Dawn Barnhart

    I'm experiencing the same issue as Robert Cabral. The page alignment is completely off. Is there another page where edits need to be made in conjunction with this one? I've tried various 'fixes' and nothing seems to work.

    TIA.

    0
  • Jon Schlueter

    +1 experiencing similar issues as Robert and Dawn.  Seems like the code Trapta added 2 months ago worked a bit because before (using the code that's still on the Zendesk page) no longer showed my articles, but showed a blank page.  Now the articles are showing with Trapta's code, but it's just slightly off.  What needs to be done to fix this?

    0
  • Trapta
    Community Moderator

    Replace the code in section template with the below code:

    <div class="container-divider"></div>
    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}
    {{search submit=false}}
    </nav>

    <div class="section-container">
    <section class="section-content">
    <header class="page-header">
    <h1>
    {{section.name}}
    </h1>
    {{#if settings.show_follow_section}}
    {{subscribe}}
    {{/if}}
    {{#if section.description}}
    <p class="page-header-description">{{section.description}}</p>
    {{/if}}
    </header>

    {{#if section.sections}}
    <ul class="section-list section-list--collapsed">
    {{#each section.sections}}
    <li class="section-list-item">
    <a href="{{url}}">
    <span>{{name}}</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/>
    </svg>
    </a>
    </li>
    {{/each}}
    <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a>
    </ul>
    {{/if}}


    {{#if section.articles}}
    <ul class="article-list">
    {{#each section.articles}}
    <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}" class="icon-star"></span>
    {{/if}}
    <a href="{{url}}" class="article-list-link">{{title}}</a>
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </li>
    {{/each}}
    </ul>
    {{else}}
    <i class="section-empty">
    <a href="{{section.url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}

    {{pagination}}

    </section>
    </div>
    </div>

    It should fix the alignment issue.

    Thanks

    1
  • Moaz Rashad

    I have an issue in android, that vote section doesn't appear.


    I changed to an anonymous vote.
    I tried to add these lines of code "add voting buttons to the article" section, but I can't find the article template file.

    How could I do that in Android?

    0
  • Amy Gracer
    Community Moderator

    For the search filter sidebar, I'd like to hide the top level filter... Types, and just display the subfilter on categories because I do not use multiple brands or the community at this time

    Can I do this?

    0
  • Ryan

    Hi Amy Gracer,

    Drop this code into your search_results.hbs and let me know if thats what you are trying to accomplish.

    <script>
    window.onload = function(){
    document.getElementsByClassName('sidenav-item')[0].style.display = 'none';
    }
    </script>

    Hope this helps!

    Ryan 

    0
  • Amy Gracer
    Community Moderator

    Ryan

    Thank you so much for providing the code snippet. I was able to accomplish what I needed to by hiding several sections of the default code, including all of the community helpers and the expanders.

    I actually got it pretty quickly, but didn't realize it because the preview still showed "By Types" even though my help center was showing only By Category as I intended.

    0
  • Ryan

    Glad you got it figured out! :-)

    0
  • Efrat Barak Zadok

    I think most of the data here is no longer relevant as it already implemented by default  in the newer themes

    0
  • Brett - Community Manager
    Zendesk Community Team

    Hey Efrat,

    Thanks for sharing your feedback!

    In some cases, the above documentation can be useful to show what code does what in your Guide theme. Although this is already implemented by default, the above can show them exactly where to go to remove the functionality from their Help Center if they wish to do so.

    Let me know if you have any questions for me.

    Cheers!

    0
  • Eric Miller

    Amy Gracer would you be able to provide more detail or a code example as to how you hid the top level filter in the search results sidebar? I would like to do the same as you as we don't use Communities and I want the Category filters to be obvious and immediately available upon arrival. Note: We are using Guide Enterprise. Thanks.

    0
  • Eric Miller

    Additional question: Has anyone found a way to offer the user a way to filter in the sidebar by some kind of tag or label associated with the article?

    0
  • Kay
    Community Moderator

    Eric Miller this is only possible after heavy customization.

    In order for this to work you have to get all the articles from the search results thru javascript.
    Then get all the tags/labels and build a navigation tree, and insert that in the sidebar, again with javascript.
    With some additional Javascripts functions you'll be able to toggle/show/hide the articles from the search results.

    I would say a rather experienced developer should be able to build this within 2 days

    0
  • Elise Alley

    Hi!  

    So I want to have a different header on each category page.  I have the main header on the main page of the Help Center.  Each of our categories is one of our products, so on those category pages, I want to have a different header image that would match the product.  And then the appropriate header on the sections and articles again based on the product.  So, to maybe clarify a little, on the main page, I want our company header.  Then on Product A's category, section and article pages, I want Product A's logo in the header.  In Product B's category, section and article pages, I want Product B's logo.  And so on.

    I see there is an option to edit category, section and article templates using the #is option but not the header file.

    Would there be a way to accomplish something like that?

     

    0

Please sign in to leave a comment.

Powered by Zendesk