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
  • 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. Click the name of the Help Center for which you want to customize the HTML.
  4. In the Rebrand page, click Help Center Customization from the left panel.
    The     Themes list page is displayed.
  5. Click Customize corresponding to the published theme.



  6. On the Customize page, 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. Click the name of the Help Center for which you want to customize the HTML.
  4. In the Rebrand page, click Help Center Customization from the left panel.
    The     Themes list page is displayed.
  5. Click Customize corresponding to the published theme.
  6. On the Customize page, 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. Click the name of the Help Center for which you want to customize the HTML.
  4. In the Rebrand page, click Help Center Customization from the left panel.
    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. Click the name of the Help Center for which you want to customize the HTML.
  4. In the Rebrand page, click Help Center Customization from the left panel.
    The     Themes list page is displayed.
  5. Click Customize corresponding to the published theme.
  6. On the Customize page, 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. Click the name of the Help Center for which you want to customize the HTML.
  4. In the Rebrand page, click Help Center Customization from the left panel.
    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

    • 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 ...

    • Managing Help Center Permissions

      When you set up the Help Center, you must determine who should have access to it. You may allow anyone to access the Help Center or only those who have registered for it. Providing an open Help Center is less of an effort for your legitimate ...

    • Managing Help Center Users

      Help Center users are users who prefer to find solutions by reading through your knowledge base articles or the community posts. When they are unable to find answers they can get it resolved from your agents by submitting a ticket. Users can also ...

    • Search Engine Optimization for Help Center

      Your Help Center content, viz. articles and community posts, should be made easy for both your customers and search engines to understand. You simply can’t stop with having a perfect Help Center with great content. The search engines such as ...