Help center JavaScript cookbook

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.

Note: Trial users are given the Professional plan, which includes code editing options, but they can no longer access that feature if they purchase a Team plan.

To access and edit the JavaScript in your help center, see Customizing the CSS or JavaScript.

You can also customize your help center using the Help Center templating language or CSS:

• Help center templates reference
• Help center templating cookbook
• Help center CSS cookbook

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

Note: Only certain plans support multiple ticket forms. For a list, and for general information about how ticket forms work, see Creating ticket forms to support multiple request types.

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();
}