Customizing Help Center Home Page

Customizing Help Center Home Page

Customize the way your Help Center content is organized using the simple drag-drop method in Zoho Desk. You can add custom widgets, show or hide tabs and customize their appearance to keep your customers engaged with the right content at the right place.

Widgets

Widgets are the additional components that are associated with the different pages on your Help Center. You can use the default widgets offered in Zoho Desk or create your own custom widgets. The default widgets that are built into Zoho Desk are as follows:
  • Announcements
  • Community Categories
  • Customer Happiness Ratings
  • KB Categories
  • Modules
  • Most Discussed Topics
  • Participants
  • Popular Articles
  • Popular Topics
  • Recent Articles
  • Recent Topics
  • Related Articles
  • Sticky Posts
  • Top Contributors

To access the default widgets:
  1. Click the Setup icon (  ) in the top bar.
  2. Click Help Center under the Channels menu.
  3. Select the Help Center for which you want to customize the HTML.
  4. Click Help Center Customization under the Help Center sub-menu.
    The     Themes list page is displayed.
  5. Click Customize corresponding to the published theme.



  6. Click Widgets from the top of the page.
  7. The list of widgets available by default is displayed.


Adding Custom Widgets

You can add custom widgets to the various pages on your Help Center.
To add a custom widget:
  1. Click the Setup icon (  ) in the top bar.
  2. Click Help Center under the Channels menu.
  3. Select the Help Center for which you want to customize the HTML.
  4. Click Help Center Customization under the Help Center sub-menu.
    The     Themes list page is displayed.
  5. Click Customize corresponding to the published theme.
  6. Click Widgets from the top of the page.
  7. Click Custom Widgets from the left panel.
  8. Click the Plus icon (  ) from the top pane to add a new custom widget.



  9. On the Add Widget window, do the following:
    1. Specify a Name and Description for the new widget.
    2. Select the Departments in which the widget will be displayed.
      By default,       All Departments is selected.
    3. Enter the Content to be displayed in the widget.
    4. Click Save.
  10. The custom widget gets successfully added.
You can click the Edit icon (  ) to make any changes to the widget. When the widget is no longer needed, you can click the Delete icon (  ) to move it to the Trashed widgets section.

Note:
  • You can delete both the default and the custom widgets.
  • You can at any time restore (click the  icon) the deleted widgets from trash.
  • Not all default widgets are available in all themes.


Pages

Pages are the primary way to display and organize data on your Help Center. Also, it is the pages where your end users access the default and the custom widgets you created. You can customize the pages by simply dragging contents within it or by dropping new widgets into it.



Zoho Desk supports 7 types of Pages that allow you to create a rich selection of content. Those pages are:
  1. Help Center/Department home page
    This is the first page that end users see when they visit your help center. Typically, it is your help center's root URL.
  2. Knowledge Base home page
    This is the first page that opens when end users click the Knowledge Base tab on the help center.
  3. Article list page
    This is a page that would display a summary list of your knowledge base articles.
  4. Article details page
    This is a page that has reference to the details of a knowledge base article.
  5. Community home page
    This is the first page that opens when end users click the Community tab on the help center.
  6. Topic list page
    This is a page that would display a summary list of your community posts.
  7. Topic details page
    This is a page that has reference to the details of a community topic.

Note that these pages come installed with some of the default widgets. You can control which widgets are available to end users by adding new widgets and deleting widgets from those available. Read on to know how.

Note:
  1. Not all pages are available on all themes. For example, the Help Center Home page is not available on the Materialize team.
  2. The community pages are displayed, only when you've chosen to show the Community tab on your Help Center. See, Customizing Tabs section.

Customizing Pages
When you customize a page, you should start by looking at the activities and requirements of your help center. These activities and requirements should be reflected in the pages that you customize. For example, when you decide to run a customer service event, you can create an event registration form that will allow you to accept registrations from the Help Center. All you need is to create a custom widget with the event details and add it to your Help Center Home page.

Customizing a page involves drag/dropping widgets wherever you want them. It’s that simple! Let's see how you can go about it.

To customize a page:
  1. Click the Setup icon (  ) in the top bar.
  2. Click Help Center under the Channels menu.
  3. Select the Help Center for which you want to customize the HTML.
  4. Click Help Center Customization under the Help Center sub-menu.
    The     Themes list page is displayed.
  5. Click Customize corresponding to the published theme.
  6. Click Widgets from the top of the page and then, click Pages from the left panel.



  7. Select a page that you want to customize from the left panel and do all or either of the following:
    1. Drag and drop default widgets into the page from the Default Widgets section on the right pane.
    2. Drag and drop custom widgets into the page from the Custom Widgets section on the right pane.
    3. Change the order of your widgets with a simple drag and drop.
    4. Click the Delete icon (  ) corresponding to the widget to delete them from the page.
      Note: Some of the widgets, like Header and Footer, cannot be deleted.
  8. Click Preview to review the changes you'd done.
  9. Click Publish.


Customizing Tabs

The home page comprises of tabs that are displayed at the top of the page. You can customize the tabs that appear and the order that they appear in. Here are the standard tabs that are available in your Help Center:

  1. Home
  2. My Area
  3. Knowledge base
  4. Community

You can display only the relevant tabs and hide the unwanted ones. For instance, a small business that is yet to win customers might not require the Community in Zoho Desk. Hence, the tab can be hidden.

To customize the tabs:
  1. Click the Setup icon (  ) in the top bar.
  2. Click Help Center under the Channels menu.
  3. Select the Help Center for which you want to customize the HTML.
  4. Click Help Center Customization under the Help Center sub-menu.
    The     Themes list page is displayed.
  5. Click Customize corresponding to the published theme.
  6. Click Tabs from the top of the page.



  7. On the Tabs page, do the following:
    1. Hover your mouse pointer over a tab and click the Edit icon (  ) corresponding to it
    2. Enter the Display Name for the tab.
      The display name will take precedence over the default name.
    3. Enable the Set as default option if you want this tab to be the default tab in your Help Center.
      You can set any one of the tabs as default.
    4. Enable the Visibility option, to display the tab in the Help Center.
    5. Click Save within the window.
  8. Click Publish for your changes to take effect.
You can also drag-and-drop the tabs to move them up or down on the list. Remember to click Publish when you complete re-ordering the tabs.

Note:
  1. You must have at least one tab visible in the Help Center.
  2. Tab customization is not available when you have customized the HTML.

Customizing Appearance

Zoho Desk offers a wide range of options to customize the look and feel of your Help Center, with custom fonts, color accents and backgrounds images. This way, you can ensure that your Help Center is in sync with your company's branding. You can customize the appearance of the following elements:
  1. Fonts - Lato (default), Ariel, Georgia, or Helvetica
  2. Colors
    1. Body
    2. Header
    3. Tabs
    4. Navigation
    5. Breadcrumb
    6. Links
    7. Buttons
    8. Footer

To customize the appearance:
  1. Click the Setup icon (  ) in the top bar.
  2. Click Help Center under the Channels menu.
  3. Select the Help Center for which you want to customize the HTML.
  4. Click Help Center Customization under the Help Center sub-menu.
    The Themes list page is displayed.
  5. Click Customize corresponding to the published theme.
  6. In the Appearance page, select the required font; colors for the body, header, tabs etc.
    Note: If the color you want isn't available on the palette, you can directly enter the HEX code.
  7. Click Preview to review the changes you'd done.
  8. Click Publish.

    • Related Articles

    • How to customize help center themes in the sandbox?

      Personalizing your help center is a must if you believe in making it look appealing for your end users. But it gets frustrating to tweak your help center to perfection while it’s live. What if a new theme renders your help center inaccessible? Or it ...

    • How to customize the Help Center?

      In just a few easy steps, you can customize the Help Center platform which allows your customers to find answers for their queries by going through your articles and forums or by raising a ticket directly from the page. You can set colors, add custom ...

    • Advanced Help Center Customization Using HTML and CSS

      You can customize the appearance of the Help Center using the basic color themes. However, it has its limitations, as it doesn't allow you to rebuild the header and the footer completely as you like it to be. Here comes the advanced customization ...

    • Modifying CSS to Customize your Help Center

      Many times you'll want to customize specific elements like an article details page, add ticket form, topic lists, or anything else visible on the help center theme. You might also want to edit it globally (on the entire help center) or only for ...

    • Google Analytics Dashboard for Help Center

      Google Analytics provides tools for everything from search analytics to visitor tracking that can be used to improve your self-service option in Zoho Desk. You can use the statistics to learn, for example, how long your customers look at the KBase ...