Help Center JavaScript cookbook Follow

team professional enterprise plans

You can easily customize the look and feel of Help Center using JavaScript and jQuery. This cookbook is designed to help you make Help Center look the way you want.

Note: Access to the page code is available on Team, Professional, and Enterprise. Trial users are given the Professional plan, which includes code editing options, but they can no longer access that feature if they purchase the Essential plan.
To access and edit the JavaScript in Help Center, see Customizing the CSS or JavaScript.

You can also customize 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

Add the following jQuery statement to the $(document).ready(function() function in the JavaScript template:

$('#user-menu .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: Custom ticket forms are only available in the Enterprise plan or as an add-on to the Professional plan.

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 Help Center.

You'll need the ticket form id, which you can find in the form's URL in Help Center. See this example.

The following jQuery example prepopulates the Subject field with "Product registration" and the Decription 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();
}
Have more questions? Submit a request

Comments

  • 0

    Hello,

    Is possible add more than one field for attachments and uploads ?

  • 0

    Hi Luiz! Great question. As the attachment field exists, users can upload more than one file - if that doesn't suit your need, could you outline what you're looking for instead?

  • 0

    Hi Madison,

    Thank you! 

    I understand that is possible upload more than one file at the same field. However , I need to know if is possible "double" the attachment field . That is, one field for each file.

     

  • 0

    This is great - thank you. Love the cookbook concept!

    I have a few questions...

    1. How can I customize the header (or not have one) for a specific ticket form? 

    2. How can I change the labels on a specific ticket form? For example, "Attachments" on one ticket form would be, "Please attach a copy of your receipt" but on another ticket form, "Please attach a screenshot of the error" 

  • 0

    Hey Laura,

    Thanks for your questions :) 

    If you'd like to want to customize the request form - you will want to grab this (see code below) from your "new request page" section:

    <div class="form">
    {{request_form}}
    </div>

    From there, you can certainly build it out all from scratch in the place of the {{request_form}} placeholder - that way you can really customize what's there if you'd like. You can do that or use JavaScript in the Help Center to change what the placeholder renders. I can understand if none of these options are ideal, but building out your custom form is really the best option

    More information on that can be found in the link below:

    https://support.zendesk.com/hc/en-us/articles/203660576-Creating-a-Custom-HTML-Form-for-Ticket-Submission

    Hope that helps!

     

     

  • 0

    Hello all,

    I wanted to show a modal(pop-up) on change of a dropdown field. So is there any method in zendesk to do this.

    As far I know that ZD is not using "Selectbox" for this so I'm unable to use jQuery's onChange function.

    So I think ZD may have any function for this.

     

    Thanks-

     

     

  • 0

    I'd like to change the "Submit a request" text to something else, probably "I need help" on all my HC pages. I found the article on how to do it on one page with pointers to jquery etc. But since I'm not a hard-core coder (just learning), I need a tad more guidance. 

    I was able to change the "Popular articles" text w/ JS thanks to another post. 

    I'd love any guidance. Thanks!

  • 0

    Regarding, "Hide the Community based on the selected language", JQuery is not working on iOS devices, especially iOS9+. Any workarounds?

    Update: nevermind, it was another function messing up the code.

    Edited by Zain Zohaib
  • 0

    Is there a way to have an element appear when one language is selected but not for another?

    For example - I've added a floating mailto link img for each page. But I want this to link to one address for English, and another address for other languages.

    So I need a different element defined for other languages. I want to have one appear when English is selected, but another appear when another language is selected.

    How is this possible?

  • 1

    Hi Charles,

    Is there a list or where we can see what the different sections are called?

    eg

    #request_subject

    #request_description

    #Some_other_attribute?

     

    Also, does dynamic content render in JS? Trying to add a dynamic header to a field, but running into difficulty.

Please sign in to leave a comment.

Powered by Zendesk