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.