Permission Required
Users with the Support Channels administrative permission can access this feature.
Check Feature Availability and Limits

• HTML customization is available only for customers on the Enterprise edition.
  
• CSS customization is available for customers on both Professional and Enterprise editions.
  

Customizing HTML

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. Go to Setup (  ) > Channels > Help Center.
2. Select the Help Center in which you want to customize the HTML.
   
3. Click Help Center Customization under the Help Center sub-menu.
   The Themes list page is displayed.
4. Click Customize corresponding to the published theme.
   
   
   
   
5. Select the HTML tab on the Customize page's sidebar.
   
6. 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 your changes.
   
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 default to restore the HTML content to the previously published state.
  
  
• Tab customization is not available when you have customized the HTML.
  

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 available for the header and the footer areas:

Area	Placeholder Name	Available Themes
[Header]	Home	All
	My Area	All
	Community	All
	Knowledge Base	All
	Company Logo	All
	Company Name	All
	Sign In / Sign Out	All
	Link Back URL	All
	Add Ticket	Classic
	Add Topic	Classic
	Breadcrumbs	Classic
	FormShortcut	Materialize
	User Preference	Elegant and Materialize
	Search	All
	SearchHome	All
	Welcome Text	Elegant and Classic
	Welcome Description	Elegant and Classic
[Footer]
	Help Desk	All
	Help Desk Link	All
	Help Desk Terms	All
	Help Desk Terms Link	All
	Help Desk Privacy	All
	Help Desk Privacy Link	All
	PoweredBy	All

To add a placeholder:

1. On the HTML page, type '$' within the div tags to view a list of the placeholders.
   
2. Click Enter(or Return) to add a placeholder. For example, Company Name.
   
   
   
   
   
3. Click Preview to review your changes.
   
4. Click Publish.
   

Note:

• HTML customizations are not supported in the Flat theme.
  
• Most of the placeholders 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. Go to Setup (  ) > Channels > Help Center.
2. Select the Help Center for which you want to customize the HTML.
   
3. Click Help Center Customization under the Help Center sub-menu.
   The Themes list page is displayed.
4. Click Customize corresponding to the published theme.
   
5. Select the CSS tab on the Customize page's sidebar.
   
   
   
   
   
   
6. Customize the style sheet elements.
   
7. Click Preview to review your changes.
   
8. 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 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 and not exceeding 1 MB in size.

Important:

Customizing Help Center using JavaScript 

We are enabling the JavaScript customization for Enterprise Edition on request basis. If you want to enable the beta version, please reach out to support@zohodesk.com.

1. Inline Scripts – Add third-party scripts such as analytics trackers, chat widgets, or payment gateways directly into the Help Center, without having the need to write a code from scratch. For example, viewership, click rate on a page etc. using external analytics tool such as Google analytics. 
   
2. JavaScript Functions – Write custom JS functions to interact with Zoho Desk components, manipulate DOM (Document Object Model) elements, or extend default behaviors. For example, a user wants to show or hide elements dynamically based on specific conditions or adding custom interactive elements to the user interface.
   

1. Navigate to Setup > Channels > Help Center.
   
2. Select the required help center portal and select Access settings. 
3. Check the Custom Script condition and toggle Enable custom scripts for enhanced Help Center customization option. 
   

Note: The JS tab is displayed in the Help center for customization only when the Enable custom scripts for enhanced Help Center customization option is enabled. 

1. Navigate to Setup > Channels > Help Center.
   
2. Select a Help Center and click Help Center Customization.
   
3. Select a theme and click the Customize tab and click JS.
   
4. If you are using a third-party application's code, add the script in the Inline Script tab. 
   
5. If you are using your own function, add the script in the JS Function tab.
   
6. Click Preview to review your changes and click Publish.