FAQs: Help Center Customization
How can I customize the help center according to my business preference?
Help center is an online resource where you can host a wide variety of resources, such as FAQs, troubleshooting guide, help documents, videos, and eBooks to let customers find solutions and troubleshoot problems on their own.
The help center can be customized based on the business preference, branding, and personal choice. You can change the appearance by setting colors, adding custom sections, and adding widgets to keep customers engaged with the right content in the right place. With a little bit of coding, you can also customize the HTML and CSS to make the Help Center more user-friendly.
Note that you cannot create new themes. However, the existing themes can be customized.
Zoho Desk provides four system defined themes for the help center: Elegant, Materialize, Flat, and Classic that can be customized.
To start customizing the help center, follow the steps below:
- Go to Setup > Channels > Help Center.
- Select a help center that you want to customize.
- Click Help center customization.
- Select a theme and click Customize.
You will be redirected to the editor where you can start customizing.
The following elements in the help center can be customized:
- Customizing the Appearance
- Customizing the HTML
- Customizing the CSS
- Selecting tabs
- Adding custom widgets
Let's take a look at each option in detail:
I. Customizing the Appearance
This includes the overall look and feel of the page. Here, you can change the following elements:
- Fonts: The font can be set to one's choice or as per the organization standard.
- Body color: The background color of the entire help center can be changed using a color scheme from the available palette.The HEX color code can also be added directly in the text box.
- Header: In the header, you can insert a background image, for example, the company logo or a color scheme. Likewise, you can apply color gradation to the background by selecting a color from start to end. You can also choose the color in which the text on the header appears.
- Tabs: The background color and opacity of the tabs that appear on the header can be customized.
- Navigation: The navigation for the tabs present in the header can be customized. You can set a color coding for the tabs at different stages: normal, hover, or selected. You can also apply a border under the tab when it is selected.
Note: The Flat theme has no tab navigation; category navigation is followed. - Link: Tabs such as Knowledge base, Community, and Home will display links to other departments, posts, articles, and more. You can customize the appearance of the text in these links by selecting a color for different stages: normal, hover, and selected.
- Buttons: Clickable text or links are referred to as buttons. You can select the color of these buttons. Likewise, you can customize the color of the secondary text, which appears below the button.
Read more about customizing the appearance.
To customize the appearance, follow the steps below:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center you want to customize the appearance of.
- Click Help Center Customization.
The default Themes will be displayed. - Click Customize on the desired theme.
- In the Appearance page, select the required Font and Colors for the body, header, and tabs.
- Select the Navigation style for Normal, Hover, and Selected.
- Customize the Links and Buttons.
- Click Preview to review the changes.
- Click Publish.
You can Save as Draft to revisit the customized theme.
II. Customizing the HTML script
The header and footer of the help center can be customized by making changes to the HTML script.You can customize the logo; provide Sign In, Sign Up, and Sign Out links; add a Company Name; and more.
By default, Zoho Desk provides a list of HTML placeholders that can be used to customize the header and footer.
To customize the HTML, follow the steps below:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center in which you want to customize the HTML.
- Click Help Center Customization under the Help Center sub-menu.
The Themes list page is displayed. - Click Customize corresponding to the published theme.
- Select the HTML tab on the Customize page's sidebar.
- Customize the elements for the Header by adding the appropriate code.
You can also click Footer to customize its elements. - Click Preview to review your changes.
- Click Publish.
III. Customizing CSS Code
You can use the CSS editor to add styles that are preferred in your organization or meet your industry standards.Once the CSS styles are applied it will override the default styles.
Read more about customizing the HTML script and CSS
Another way of customizing CSS is to import the code from an external resource. You can click the Import CSS icon (
) to upload a CSS file into Zoho Desk. Please ensure that you upload a CSS file in .txt or .css format. The file size must not exceed 1 MB.
To customize the CSS, follow the steps below:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center for which you want to customize the HTML.
- Under the Help Center sub-menu, click Help Center Customization.
The Themes list page is displayed. - Click Customize corresponding to the published theme.
- Select the CSS tab on the Customize page's sidebar.
- Customize the style sheet elements.
- Click Preview to review your changes.
- Click Publish.
IV. Selecting tabs
By default, Zoho Desk provides the following tabs:
- Home
- My Area
- Knowledge base
- Community
Based on the business requirement the tabs can be added or removed from the help center home page.
To customize the tabs, follow the steps below:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center for which you want to customize the tab.
- Click Help Center Customization.
The default Themes will be displayed. - Click Customize corresponding to the published theme.
- Click Tabs from the top of the page.
- On the Tabs page, do the following:
- Hover on the tab and click Edit.
- Enter the Display Name for the tab.
- Enable Set as default.
- Any one of the tabs can be set as default.
- Enable the Visibility option to display the tab in the Help Center.
- Click Save and Publish.
Read more about customizing tabs
V. Adding custom widgets
By default, Zoho Desk provides a list of widgets, such as Announcements, Community Categories, and KB Categories, in all themes. In addition to these standard widgets, you can include custom widgets used in your org within the help center.
To add a custom widget:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center for which you want to customize the Widget.
- Click Help Center Customization.
The default Themes will be displayed. - Click Customize corresponding to the published theme.
- Click Widgets from the top of the page.
- Click Custom Widgets from the left panel.
- Click the Plus icon (
) from the top panel and click Add widget,
Alternately click Add Widget in the Manage Widget page. - In the Add Widget window, do the following:
- Specify the Widget Name.
- Toggle Display Widget Name.
- Toggle Display Widget Translation.
The custom widget to be displayed when the user selects the respective language in the help center. For example, ABC custom widget will be displayed for French, Spanish, and English languages only if this option is turned on for each of these language preferences. - Select the Departments in which the widget will be displayed.
By default, All Departments will be selected. - Enter the Content to be displayed in the widget.
- Click Save.
Read more about customizing widgets.
Publishing a customized theme
Once the customizations are finalized, you can publish it for customers to access.
To publish a theme, follow the steps below:
- Select a customized theme.
- On the Theme, click Publish from the top panel.
- Click Publish to confirm.
Can I save customized themes as drafts?
Yes, while customizing themes you can save them as drafts and revisit them later. You can also share the themes with others in the organization for suggestions and feedback before finalizing.
To save a customized theme as a draft, follow the steps below:
- Select a customized theme.
- On the theme, click Save Draft from the top panel.
- Click Save to confirm.
To see the draft URL in a separate tab:
- Click the three dots (
) from the top panel.
- Click the draft link in the popup.
Can I restore a theme?
Yes, you can restore a theme if you want to override the customizations.
To restore the theme, follow the steps below:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center you want to restore the appearance.
- Click Help Center Customization.
The default Themes will be displayed. - Click Customize on the desired theme.
- Click the More Icon (
) from the top-right corner of the panel.
- Select Reset to default.
Can I preview the customized theme on my mobile?
Yes, the customized theme can be previewed to see how it appears on the following interfaces: desktop, tablet, and mobile.
To preview the themes, follow the steps below:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center you want to view the customized theme.
- Click Preview in the top panel.
- Select desktop, tablet, or mobile to check the appearance.
How do I customize the Breadcrumb ?
Breadcrumb, the area just beneath the header in the Help center, provides straightforward navigation by showing which page, category, and section the customer is on.
The breadcrumb can be customized by changing its background color, text and hover text color.
To cuatomize the breadcrumb, follow the steps below:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center you want to customize the breadcrumb.
- Click Help Center Customization.
The default Themes will be displayed. - Click Customize on the desired theme.
- In the Appearance page, scroll down to Breadcrumb.
- Select the background color of the Breadcrumb.
- Choose the color you want the link backed texts to appear in when you hover.
- Decide on the color the link backed breadcrumb text will appear in when hovered upon.
- Click Save Draft.
- Click Preview.
- Check how the tab colors appear in desktop, tab, and mobile view.
- Click Close.
- After finalizing the appearance, click Publish.
You can always Reset to default at any point in the future.
How do I customize the content section on the webpage?
The content section is where you get the link to important pages. Adding custom colors is a great way to personalize the link back pages and identify which link you are hovering on.
To change the color of link backed texts in the content section, follow the steps below:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center for which you want to apply the theme.
- Click Help Center Customization.
The default Themes will be displayed. - Click Customize on the desired theme.
- In the Appearance page, scroll down to Link.
- Select your preferred color from the color palate for the link backed words in the content section.
- Choose a color for the words to turn when you hover over them.
- Click Save Draft.
- Click Preview.
- Check how the tab colors appear in desktop, tab, and mobile view.
- Click Close.
- After finalizing the appearance, click Publish.
You can always Reset to default at any point in the future.
How do I delete a tab from the Help center?
Zoho Desk provides the following tabs by default: Home, Knowledge base, Community, and My Area.
You can delete the tabs that you don't want customers to access.
You can use HTML to delete unwanted tabs from the header.
To delete a tab from the header, follow the following steps:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center you want to customize.
- Click Help Center Customization.
- Select the theme where you want to change the tabs.
- In the Appearance page, click HTML.
- Select Header and maximize the HTML editor.
- Search for Header tab within the HTML.
The below screen shows the Header tab for Community. - Remove the selected portion.
Follow the same steps to remove other tabs. - Click Save.
Can I hide a tab from the Help center ?
Zoho Desk provides the following tabs by default: Home, Knowledge base, Community, and My Area.
You can hide the tabs that you don't want customers to access.
For example, you can hide the KB from your help center until the topics and resources are finalized.
To hide a tab, follow the following steps:
- Click the Setup icon (
) in the top bar.
- Under Channels, click Help Center.
- Select the Help Center for which you want to apply the theme.
- Click Help Center Customization under the Help Center sub-menu.
The Themes list page is displayed. - Click Customize on the desired theme.
- Click Tabs.
- Toggle the switch beside the respective tab.
- Click Publish.
To learn more, refer to the doc: Customizing Help Center Home Page.
We hope that this list of frequently asked questions about Help Center Customization is informative. If you still have questions that haven't been addressed, please let us know. We will be happy to discuss them with our subject matter experts and add them in the future. And please don't forget to share your rating below!Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
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 ...FAQs: Help Center
What is help center in Desk? Help Center is a customer portal that allows users to learn about the product and understand its processes by accessing knowledge base articles. It provides a platform for self-help and learning, where users can find ...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 ...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 ...Creating a sitemap for the Help Center
A site map (or sitemap) is a list of pages of a web site accessible to crawlers like Googlebot. They allow search engines to find all of your webpages, that they might otherwise miss when indexing. For a more detailed account of the site map, read ...
New to Zoho LandingPage?
Zoho LandingPage Resources