Hello Again!
Welcome to the series unveiling amazing codes to customize your Help Center with ease! This week, we’re revealing codes to hide two additional tabs on tickets in the Help Center.
By default, Help Center tickets offer users the options to Reply and Comment, while some organizations prefer limiting these options to ensure a standardized support operation.
Zoho Desk provides the codes to hide the Comment and Reply buttons on tickets. Check out how these customizations can benefit you!
Steps to add the CSS code
i. Navigate Setup (S) >> Channels >> Help Center >> Select the Help Center portal >> Select Customization. Click Customize on the theme you want to change.
ii. On the left panel, under Customize, click on CSS and paste the code. On the top right of the screen, click Preview to view the changes, and then click Publish to see the live changes.
1. Hide the Comment button on the ticket
ZylkerShop wanted to use the Comment option in tickets for internal purposes and decided to hide it from the Help Center. They determined that the Comment button wasn’t necessary for external users.
- /*Elegant Theme*/
- .ticketDetail ul.ConversationForm__replay li.ConversationForm__list:nth-child(2) {
- display: none;
- }
- /*Materialized Theme*/
- .ticketDetail .ConversationForm__editerBar .ConversationForm__commentOpen { display: none; }
- .ticketDetail .ConversationForm__editerBar .ConversationForm__replayOpen { margin-right: 0; }
- /*Flat Theme*/
- .ConversationForm__converList+.ConversationForm__converList{
- display:none;
- }
- /*Classic Theme*/
- .ConversationForm__conversationTarea
- .ConversationForm__openThreadForm+.ConversationForm__openThreadForm
- {
- display:none;
- }
2. Hide the Reply button on the Ticket
ZylkerShop wanted its users to connect via email or other support channels instead of responding to tickets through the Help Center portal. Therefore, they decided to hide the Reply button on the ticket.
- /*Elegant Theme*/
- .ticketDetail .ConversationForm__replay .ConversationForm__list:nth-child(1),
- .ticketDetail .DottedMenuPopup__dotMenuPopup .Post__reply {
- display: none;
- }
-
- /*Materialized Theme*/
- .ticketDetail .DottedMenuPopup__dotMenuPopupContent .Post__reply,
- .ticketDetail .ConversationForm__replayOpen{
- display: none;
- }
-
- /*Flat Theme*/
- .ticketDetail .ConversationForm__filterCont .ConversationForm__converList:nth-child(1),
- .ticketDetail .MenuPopup__ticketrepliespopup .MenuPopup__reply {
- display:none;
- }
- .ticketDetail
- .MenuPopup__ticketrepliespopup
- .MenuPopup__reply + .MenuPopup__popUpList {
- border-top-width: 0;
- }
-
- /*Classic Theme*/
- .ticketDetail .DottedMenu__children .Post__reply,
- .ticketDetail [data-id="newReply"]{
- display: none;
- }
The above customizations will help reduce clutter in ticket threads, prevent miscommunication during the debugging process, and encourage support through formal channels.
We would be glad to hear how these codes have helped you. Feel free to contact us at support@zohodesk.com for customized solutions tailored to your use cases. We’ll meet again next week with another post offering codes for further customization.
Until then, goodbye.
Regards,
Lydia Kiruba | Zoho Desk