Setting up a requests-only (tickets-only) Help Center Follow

team professional enterprise plans

This support tip demonstrates how to set up a request-only Help Center. That is, a Help Center that enables end-users to submit requests (tickets) and view existing requests only, and does not contain any self-service content.

There are several ways that you can accomplish this, but in this tip we'll edit the Help Center home page to provide options for end-users to submit a new request or check their existing requests. The home page will not contain anything else. For example:

The benefit of this tip is that it does not use a Javascript redirect to create a request-only Help Center. Javascript can, and does, work as well . However it often diminishes the agent experience when using Help Center by making it challenging to access due to restrictions on agents viewing the New Request page and My Activities (the default behavior is to redirect to the Zendesk Support agent interface).

This tip avoids other challenges of JS, for example, accounting for user sign-in, having an open or closed Help Center, and having multiple locales enabled. Simply, this tip accounts for various desired workflows without the need of additional customizations.

Note: This tip requires access to Help Center page templates, which is not available on Essential.

Updating your home page for requests only

First, we'll edit the Help Center home page to provide two buttons for end-users to submit a new request and check their existing requests. We recommend that you use the Copenhagen theme for your request-only Help Center, as it is mobile responsive.

To edit your home page to add the new request and existing requests buttons

  1. In the Help Center, click General in the top menu bar, then select Customize design .
  2. Click Switch Theme , then select Copenhagen and click Preview theme .

    You can skip this step if your Help Center is already using the Copenhagen theme.

  3. Click Edit Theme .

    The editor opens, showing the Home Page template.

  4. Comment out the existing code by wrapping it in {{!-- ... --}} .

    If you do this correctly, all of the code text will change to gray.

  5. Above the commented out code of the homepage add the following code.
    <div id="divhomecontainer">
    <h1>Welcome to Rebecca's Support Portal</h1> 
      <h2> Select below to Submit a New Request or Check your Existing Requests<h2>
    
    <form style="display: block; text-align: center; margin: 20px;" class="submitbutton"
    action="{{page_path 'new_request'}}">    
      <input type="submit" value="Submit a Request">
    </form>
    
    <form  style="display: block; text-align: center; margin: 20px;"class="requestbutton" 
    action="{{page_path 'my_activities'}}"> 
       <input type="submit" value="Check your Existing Requests">
      </form>
    </div>
    What this code does:
    • Adds a welcome message. Be sure to change the placeholder text with your own welcome message.

    • Creates two buttons: one for the new request form and one to check existing requests. Also, adds a unique class to the buttons to customize the CSS if needed.

    • Adds CSS styles to the buttons inline to enhance the appearance.

    • Prompts users who are not signed in to do so when they click the Check your Existing Requests button.

  6. Click Save .

    You can wait to publish changes until you hide unneeded elements of your Help Center in the next section.

Hiding unneeded elements of your Help Center

After you edit your home page to add the requests-only buttons , you'll want to ensure that end users do not accidentally navigate to the content sections. To do so, you'll comment out a few additional lines of code on various templates for:

  • Community
  • Submit a request button
  • Navigation links
  • Search

Additionally, you should delete all pre-existing content in categories or set the categories to draft mode, as described below, to prevent end-users from accessing the content inadvertently.

To hide unneeded elements in your Help Center

  1. Click Edit theme .
  2. Open the Header template, then comment out the Community and Submit a Request buttons by wrapping it in {{!-- ... --}} .

    If you do this correctly, all of the code text will change to gray.

  3. Open the Request list page template, then comment out the <nav> code at the top.

  4. Open the Request page template, then comment out the <nav> code at the top.
  5. Open the New request page template, then comment out {{search}} .

  6. Click Save , then click Publish changes .

To remove pre-existing Help Center content

  1. Navigate to the category, then click Edit category in the top menu bar.
  2. Click the Draft checkbox to hide the category and its content, or click Delete category in the bottom right to permanently remove the category and its contents.
  3. If you selected draft, click Update , and if you selected delete, click to confirm that you want to delete the category.

(Optional) Changing the default button styling and color

Help Center provides pre-built templates, so the CSS styling already exists for buttons in Help Center. If you are having issues overwriting the existing CSS, you will likely need to edit the default styling. You can also change the button color without editing the CSS.

To find the default CSS button styling
  1. In the Help Center, click General in the top menu bar, then select Customize design .
  2. Click Edit Theme , then click the CSS tab.
  3. Search (control + F) for "Buttons".
  4. Make updates as you'd like, then click Publish changes .

To edit the button colors
  1. In Help Center, click General in the top menu bar, then select Customize design .
  2. In the Appearance section of the left sidebar, change the colors as needed.

    Here’s how the colors map:

  3. Click Publish changes .

(Optional) Localizing your home page buttons (Professional and Enterprise)

On Professional and Enterprise, you can use dynamic content to localize content in your Help Center. You can do this if you want the button text on your home page to be language specific for users accessing the page in different languages.

To localize your home page buttons For example:
<div id="divhomecontainer">
<h1 style="text-align: center;">{{dc ‘ADD_YOUR_DC'}} </h1>  
  <h2 style="text-align: center;"> {{dc 'ADD_YOUR_DC'}}</h2>

<form style="display: block; text-align: center; margin: 20px;" class="submitbutton"
action="{{page_path 'new_request'}}">    
  <input type="submit" value="{{dc 'ADD_YOUR_DC'}}">
</form>

<form  style="display: block; text-align: center; margin: 20px;" class="requestbutton" action="{{page_path 'my_activities'}}">  
   <input type="submit" value="{{dc "ADD_YOUR_DC'}}">
  </form>
</div>

Have more questions? Submit a request

Comments

  • 2

    Awesome, thanks Rebecca!

  • 0

    Is is possible to customize the links on the breadcrumbs (not just the CSS)? It was pretty easy to set-up a requests only Help Center, but want to optimize our navigation a bit. 

    For example, setting either the New Request page or Requests List page as our new "Home" page. It would also cut down on the amount  of pages we need to configure and manage.

  • 0

    Hi Ethan- 

    The breadcrumbs in Help Center is added via a Curlybars helper therefore customizing default behavior of the prebuilt helper is a little more challenging. However in our Help Center developer documentation we provide the code of the breadcrumbs meaning you could grab this code, remove the {{breadcrumbs}} helper from wherever you're working in Help Center and customize the behavior as needed.

    However another challenge in this process will be that Help Center provides pre-built templates, meaning the breadcrumbs helper is dynamically changing its links based on what category, section, or article you are on. Therefore to customize across multiple pages you would likely need to add multiple conditional statements. 

    Lastly, having the New Request or Lists pages be the homepage is likely not possible without a javascript redirect or iframing of these pages into the homepage. The {{request_form}} advanced helper for example, that renders the new request form, is only available on the new request page template. 

     

  • 0

    Wow, now we need to edit kind of codes to have a Ticket portal!

    Disapointed....

  • 0

    Hi, how to do to have the 2 buttons aligned horizontally?

     

    Thx

  • 0

    Hi,

    I´m having trouble with the page-path for "Submit a request"

    <form style="display: block; text-align: center; margin: 20px;" class="submitbutton"
    action="{{page_path 'new_request'}}">
    <input type="submit" value="Submit a Request">
    </form>

    it takes me to an incorrect page and not to the "Submit a request" page. 

    I have a header on all the pages with a link that takes me to the correct page

     {{link 'new_request' class='submit-a-request'}}

    so I know its possible to get there. Is there something wrong with the code?

  • 0

    Hi Cgauguin-

    I tested this and confirmed the code does work as outlined. What page are you directed to when selecting the button? This may be a result of agents not having direct access to the submit a request page.

    To view the request page as an agent: 

    1. In your Help Center, click General > Customize design.
    2. In the Previewing as box in the lower right corner, click the drop-down arrow next to the role name. 
    3. Select End-user
  • 0

    Same issue for me.

    I am logged as admin (manager), I select "Previewing as end-user" but when I click "Submit a request" button then it opens my Agent Dashboard page in "old web portal".

    This is my code (normally copy/paste from yours)
    <form style="display: block; text-align: center; margin: 20px;" class="submitbutton"
    action="{{page_path 'new_request'}}">    
      <input type="submit" value="Submit a Request">
    </form>
    <form  style="display: block; text-align: center; margin: 20px;"class="requestbutton"
    action="{{page_path 'my_activities'}}">
       <input type="submit" value="Check your Existing Requests">
    </form>   

    By the way, I repeat my question, how to have the 2 buttons aligned horizontally? The 2 buttons vertically aligned in middle of screen is really ugly isn't?

    Nico

  • 0

    Hi Rebecca. 

    I´m looking at it as end-user. Thats why its strange that I also end up seeing Agent Dashboard page in "old web portal", just like Nico Kunzer. 

    I would also like the buttons to be in the same line horizontally. 

  • 0

    Hi,

     

    I tried to make the "Submit a request" button work, and have substituted this part:

     

    <form style="display: block; text-align: center; margin: 20px;" class="submitbutton"
    action="{{page_path 'new_request'}}">
    <input type="submit" value="Submit a Request">
    </form>

    <form style="display: block; text-align: center; margin: 20px;"class="requestbutton"
    action="{{page_path 'my_activities'}}">
    <input type="submit" value="Check your Existing Requests">
    </form>

     

    with this:

    <nav class="user-nav" id="user-nav">
    {{link 'new_request' class='submit-a-request' role='button'}}
    </nav>


    <nav class="user-nav" id="user-nav">
    {{link 'requests' class='check-your-existing-requests' role='button'}}
    </nav>

     

    Viewed as End-user the buttons are alligned and the button "Submit a request" now works. It looks different but it now is working.

  • 0

    Hi Cgauguin

    It works also for me! Thanks for your help mate.

    Just one detail: the 2 buttons are aligned on the left side. Do you know how to center?

    Nico

  • 0

    All of my coding looks like this right now. I know its not pretty but for me it looks like the buttons are centered:

    <div id="divhomecontainer">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <center> <h1>Welcome to Rebecca's Support Portal</h1>
    <br>
    <center> <h2> Select below to Submit a New Request or Check your Existing Requests<h2>
    <br>


    <nav class="user-nav" id="user-nav">
    {{link 'new_request' class='submit-a-request' role='button'}}
    </nav>


    <nav class="user-nav" id="user-nav">
    {{link 'requests' class='check-your-existing-requests' role='button'}}
    </nav>

    </div>
    {{!--<section class="section hero">
    <div class="hero-inner">
    {{search submit=false instant=true class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <section class="categories blocks">
    <ul class="blocks-list">
    {{#each categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    </ul>
    {{pagination}}
    </section>

    {{#if promoted_articles}}
    <section class="articles">
    <h3>{{t 'promoted_articles'}}</h3>
    <ul class="article-list promoted-articles">
    {{#each promoted_articles}}
    <li class="promoted-articles-item">
    <a href="{{url}}">
    {{title}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </section>

    {{#if help_center.community_enabled}}
    <section class="section community">
    <h2>{{t 'community'}}</h2>
    {{#link 'community' class='community-link'}}
    {{t 'join_conversation'}}
    {{/link}}

    <div class="community-image"></div>
    </section>
    {{/if}}

    <section class="section activity">
    {{recent_activity}}
    </section>
    </div>--}}.

  • 0

    Ok I used this <center> and now it is good.

    Thx

Please sign in to leave a comment.

Powered by Zendesk