Advanced Help Center Customization Using HTML and CSS

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 using HTML and CSS (cascading style sheets) for your rescue. Web-savvy Zoho Desk administrators can directly work on the Help Center's HTML and customize the site's CSS as per your requirements. Your Help Center can even look like an extension of your company's website.

With support for custom HTML, you can add or delete the tabs from the header section. You can also apply style definitions to the elements of your HTML, using  CSS code. For example, you can write style sheets to set background and text colors; move tabs to a different location; customize borders; set the font sizes and customize the placement of elements, etc.

Note:
  • ​HTML and CSS customizations are available for customers in the Professional and Enterprise plans of Zoho Desk.

Customizing HTML Script
Customize the header and footer elements of the Help Center using HTML script. You can customize logo, provide Sign In; Sign Up; and Sign Out links, add your Company Name and so on.

To customize the HTML:
  1. Click the Setup icon (  ) in the top bar.
  2. In the Setup Landing page, click Help Center under Channels.
  3. In the Access Settings page, click Help Center Customization from the left panel.
  4. In the Help Center Customization page, click Customize.
  5. On the Widgets page, click HTML from the left panel.
  6. In the HTML page, you can customize the elements for the Header by adding the appropriate code.
    Also, you can click Footer to customize its elements.
  7. Click Preview to review the changes you'd done.
  8. Click Publish.

Note:
  • The HTML section will contain the code for the default elements in the header and footer.
  • You can click Reset to restore the HTML content to the previously published state.

Using Default HTML Placeholders
Zoho Desk provides you with a couple of default HTML placeholders that can be used to customize the Help Center. Here is the list of the placeholders:
  • Home
  • My Area
  • Submit a Ticket
  • Knowledge Base
  • Community
  • Company Logo
  • Company Name
  • Sign In / Sign Out
To add a placeholder:
  1. In the Help Center Customization page, click HTML from the left panel.

  2. In the HTML page, type '$' within the div tags to view a list of the placeholders.

  3. Click Enter(or Return) to add a placeholder. For example, Company Logo.

  4. Click Preview to review the changes you'd done.

  5. Click Publish.

Note:
  • The placeholders, namely Home, My Area, Submit a Ticket, Knowledge Base, and Community are provided with hyperlinks. So, you are not required to give the 'href' attributes.
  • The community placeholder will be displayed only when you have enabled Community for your Zoho Desk.

Customizing CSS Code
You can use the CSS editor to customize the appearance of your Help Center. It works by allowing you to add your CSS styles, which overrides the default styles.

              

To customize the CSS:
  1. In the Help Center Customization page, click CSS from the left panel.
  2. In the CSS page, customize the style sheet elements.
  3. Click Preview to review the changes you'd done.

  4. Click Publish.
The custom CSS will be applied to all the pages on your Help Center. 

Another way of customizing CSS is to import them from an external resource. You can click Import CSS to upload a CSS file into Zoho Desk. Please ensure that you upload a CSS file in .txt or .css format and not exceeding 1 MBin size. 

    • Related Articles

    • How to customize the Help Center?

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

    • 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 sections and widgets to keep your customers engaged with the right content at the right place. Anatomy of the Help Center Home ...

    • Get Advanced Reports with Zoho Analytics Integration

      The Reports module of Zoho Desk allows you to generate reports to know most of the important metrics in your help desk. Even though they address the requirements of a majority of businesses, there is always a need for some advanced customization ...

    • Setting up Advanced Web Forms

      Advanced Web Forms simplify the process of capturing support tickets from your website into your help desk system. Before setting up the Web Form, complete the following checklist:  Create an email template to send automated replies to your customers ...

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