You can easily customize the look and feel of a help center using JavaScript and jQuery. This cookbook is designed to help you make your help center look the way you want.
jQuery is not provided by default. Make sure that you import a jQuery library if you want to use jQuery statements in a theme in place of vanilla JavaScript. See Importing or upgrading jQuery for more information.
You can also customize your help center using the Help Center templating language or CSS:
Recipe list
We'll be adding more recipes over time but we can never hope to be exhaustive. The number of things you can do with JavaScript is limited only by your imagination. Please post your recipes in the comments section and we'll add them to this cookbook.
- Change the My Activities link text
- Rename the "Subject" and "Description" labels on the Request form
- Prepopulate the fields of custom ticket forms
- Change the order of custom fields on the Request form
- Add headers to the Request form
- Hide a language in the language dropdown
- Replace text strings in the language selector with flag icons
- Hide the Community based on the selected language
Change the My Activities link text
Add the my activities class to the header.hbs template:
{{link "my_activities" role="menuitem" class='my-activities'}}
Add the following jQuery statement to the $(document).ready(function()
function in the JavaScript template:
$(' .my-activities').html(' See my requests');
Rename the "Subject" and "Description" labels on the Request form
Add the following jQuery statements to the $(document).ready(function()
function in the JavaScript template:
$('label[for=request_subject]').html("Custom Subject");
$('label[for=request_description]').html("Custom Description");
Prepopulate the fields of custom ticket forms
Suppose you use a custom ticket form in your help center to let users register products. You can detect the form and prepopulate its fields when a user opens it in the help center.
You'll need the ticket form ID, which you can find in the form's URL in your help center. See this example.
The following jQuery example prepopulates the Subject field with "Product registration" and the Description field with "This is a new product registration". Add the statements to the $(document).ready(function()
function in the JavaScript template:
var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 18570) {
$('section.main-column h1').html('Product Registration');
$('#request_subject').val('Product Registration');
$('#request_description').val('There is a new product registration.');
$('#request_subject').parent('.request_subject').hide(); // Hide subject
$('#request_description').parent('.request_description').hide();
$("<p>Please upload your product receipt here.<p>").insertAfter('label:contains("Attachments")'); // Adds text below "Attachments"
}
Change the order of custom fields on the Request form
You'll need the ids of the custom fields, which you can find in the Zendesk Support interface. See this example.
var firstName = $('input#request_custom_fields_22231170').parent();
var lastName = $('input#request_custom_fields_22231180').parent();
firstName.insertBefore($('input#request_subject').parent());
lastName.insertBefore($('input#request_subject').parent());
Add headers to the Request form
Add the following jQuery statements to the $(document).ready(function()
function in the JavaScript template:
$('.form-field.request_anonymous_requester_email').prepend('<h2>Your personal information</h2>')
$('.form-field.request_subject').prepend('<h2>Your issue</h2>');
$('.form-field.request_custom_fields_21875914').prepend('<h2>Your device information</h2>');
$('.form-field.request_custom_fields_22033620').prepend('<h2>Your purchase information</h2>');
$('.form-field > label:contains("Attachments")').prepend('<h2>Support attachments</h2>');
Hide a language in the language dropdown
Hiding a language in the language selector can be useful if the content in that language isn't ready for release. Add the following jQuery statement to the $(document).ready(function()
function in the JavaScript template:
$("ul.dropdown-panel li a:contains('Français')").hide();
Replace text strings in the language selector with flag icons
For example, if your help center provides content in U.S. English and German, you could display the national flags instead of "U.S. English" and "Deutsch" in the language selector. Add the following jQuery statement to the $(document).ready(function()
function in the JavaScript template:
$(function(){
$('a.dropdown-toggle:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a.dropdown-toggle:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
$('a:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
});
Hide the Community based on the selected language
Add the following jQuery statement to the $(document).ready(function()
function in the JavaScript template:
if (document.location.pathname.match( (/hc\/de/) || (/hc\/es/) )) {
$('.community').hide();
}
21 Comments
Is it possible to autofill a field that is a dropdown menu field? Or does that only work for text entry fields? I can successfully hide fields on various forms and autofill text fields like the subject and description, but I have not been successful with drop menus.
Thanks!
Are you trying to autofill a dropdown field on a ticket form? If yes, the Creating pre-filled ticket forms will help you
Hello,
I'm looking for help on ticket forms in the Help Center. We currently have a URL in the description of a custom field. This allows our customer to reference the information on this page while filling out the form.
The issue we have discovered is that when the customer clicks on the link it opens the URL in the same window as the Help Center.
Does anyone one know how to capture this via Javascript and force the link to open into a new tab within the users browser?
In regards to your concern, the following script involves custom coding. I would advise searching online for solutions, but I have found some from looking online.
You can check an example from StackOverflow, here. Another one for reference can be found here.
Thank you and have a wonderful day ahead!
Kind regards,
Hey @...
Thank you for your recommendation.
I was able to find another solution with one of our Javascript engineers and is working as expected. I'll certainly keep the options you've shared in my back pocket if I have any issues with the one I'm using.
I'm glad to hear that you were able to find a suitable solution. Please don't hesitate to reach out anytime if you need further help or questions.
Have a wonderful day ahead!
Kind regards,
Hey,
I'm trying to make it so that a custom date field can't select a date in the past. Is that possible?
Hey T5 Admin,
Would you mind sending through a snippet of how your custom date field is currently functioning and I can put together a working example based on your code.
Thanks!
Tipene
Hey Tipene Hughes
The date field is just the custom date field that the user can edit.
Hi T5 Admin,
Thanks for clarifying that for me!
Unfortunately, it's not possible to modify the behavior of the in-built custom field date picker. I can definitely see the use case for such a feature though, so I'd encourage you to create a post on the feature request community page. This will allow greater visibility to our product teams, as well as give others the opportunity to upvote and provide additional use cases for such a feature. You can find our guidelines around creating feature requests, here.
Have a great day!
Tipene
I'm successfully able to autofill only one custom field in a ticket form using the script.js file. My method is:
if(ticketForm == 7386956538260) {
$('.form-field.request_subject').hide(); // Hide subject
//Auto-fill fields//
$('#request_subject').val('Agency/Application SPOC change request');
$('#request_custom_fields_21608582').val('zendesk_assistance');
$('#request_custom_fields_21626618').val('User_Management_incl_Permissions_ID_Req_/_Passwd_Reset_etc');
$('#request_custom_fileds_21617267').val('Zendesk_Support_Portal');
}
My subject, a standard field, and field 21608582, a custom field, are auto-filling successfully. The other two fields are not auto filling.
Any insight?
Shawn A.
Hi Shawn! My first thought would be that the last two options are drop-down or multi-select fields, which require that you pass in the tag for the value, as opposed to the field name. The syntax is slightly different with this being JSON as opposed to JQuery, but the general info can be pulled together from this article.
If that doesn't resolve the issue for you, could you let us know if you're seeing any console errors that could shed some light on this?
Is it possible to use dynamic content in the javascript file? I'm trying to localize the Contact Us button text:
$('.request-callout a').text('Contact Us ').attr('href','/hc/requests/new');
I have the dynamic content {{dc.kc-footer-contact-button}}.
I know how to add these to the .hbs files and use them in many places. However, I'm not sure how, or if, it can be used in the javascript.
Hi team, does Zendesk support custom ticket placeholders in the subject field?
$('#request_subject').val("Credit Request - Agency name: {{ticket.ticket_field_ID}}, CID: {{ticket.ticket_field_ID}}");
$('.request_subject').hide();
The above code successfully hides the subject, but unfortunately the custom field data does not carry across to the subject, but rather it all appears as it does in the code.
Ticket placeholders will not be rendered in a custom request form, it will be displayed as it is, Ticket placeholders are used in automations, macros, targets, triggers, and widgets as containers for dynamically generated ticket and user data.
I hope this helps,
Best,
Hi, Does anyone has the solution to put easily a field side by side to another one (to save and avoid scrolling) please
🥺🥺🥺
Best regards!
I've found the solution (thanks to a genrous contirbutor) of my previous question and put it on a special article here
I have another question now 😂
Here :
You show how to prepopulate, can you show please show howto put text that fades when the user click on the field? (like a suggestion) here is an example : https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
Many thanks
Hi All,
We are conducting research to improve our Help Center developer experience and would love to talk to any of you that have tried to edit Help Center theme code.
If you are interested please answer sign up here and answer the 3 survey questions. I will reach out to you to setup a 30 min Zoom call.
The interview will be a semi-structured interview where we would like to hear you take us through examples of what you have done or tried to do with customizations and your experience with the tools, documentation etc. you used.
Looking forward to talking to all of you.
Gorka Cardona-Lauridsen
Sr. Product Manager, Zendesk Guide
How to access a agent email from script.js theme? I found the HelpCenter, but there is a deprecate/legacy notice, so there are no guarantees. Is there another way?
Good day Asafe Souza Ramos,
Thank you for your post, I hope you are doing well!
To answer this, the best current option is still to use the HelpCenter native method and its related nodes / attributes, such as indeed :
We, indeed, recommend to not rely on it to set correct expectation, but I'm not aware of removal of this feature soon.

For now, this is the way to go, otherwise, via some DOM manipulation you can call out (via getElementById() for instance) to the <div> className > "dropdown-menu" first node child (see attachmment).
Which contains the ID of the current logged-in user through the href, you can extract this ID from the last URL segment (save it as variable) and make a subsequent API GET call toward this user profile with the ID, which will respond with the user's email (amongst other "properties").
For example :

This is another option to explore.
Hope this helps! Have a great rest of your day!
Best regards,
Does anyone know if it's possible to automatically select the "Articles" type in the guide search results page? This way it automatically shows the "By category" filter in the sidebar?
Please sign in to leave a comment.