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
- Hide custom fields in the ticket sidebar in My Activities
- 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
- Prevent articles from being indexed by search engines
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');
Hide custom fields in the ticket sidebar in My Activities
You can use JavaScript to hide custom fields in the ticket sidebar on the My Activities page. You select the custom fields based on their labels. For example, if the label of a custom field is "Member rewards", you can hide the field if its label contains "Member" or "rewards" or "Member rewards".
Add the following jQuery function in the script.js file:
$(document).ready(function() {
if (window.location.href.indexOf('/requests') > -1) {
setTimeout(function() {
$('dt:contains("Member rewards")').hide().next('dd').hide();
// add more selectors as necessary
}, 1000); // adjust the timeout duration as needed
}});
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();
}
Prevent articles from being indexed by search engines
A noindex
meta tag tells search engines to not include
the specific page in their indexes. To dynamically add a
noindex
meta tag to specific articles, add
the following function in the script.js file:
(function () {
// Get the current page URL
const url = window.location.href;
// Check if the URL is an article page
if (url.indexOf("/articles/") == -1) {
return;
}
//List the ids of articles to be excluded from indexing
const articles = [5555300573850, 5500012959342]; //Example article ids
for (let i = 0; i < articles.length; i++) {
if (url.indexOf(articles[i]) !== -1) {
//Create a new meta tag element
var meta_tag = document.createElement("meta");
meta_tag.setAttribute("name", "robots");
meta_tag.setAttribute("content", "noindex");
//Append the meta tag to the head of the document
document.head.appendChild(meta_tag);
}
}
})();
37 comments
VOC_운영
Hello! This is informative. I have one question, is it possible to make the name entered by the user as the requester name?
0
Mike DR
Glad to know you got the help you needed! Do feel free to reach out if you need more help!
0
Austin Kettler
Is it possible to display all the articles under a section rather than having the “see all x articles” link?
0
Dainne Kiara Lucena-Laxamana
Hi Austin Kettler !
You could following the guide posted here
0
Ruben Cortez
Hi everyone,
I'm struggling with the V4.0.2 template on a new brand we set up, to custom the request form.
My script.js file doesn't have the function $(document).ready(function()
I've tried several approaches and my changes aren't reflected, even adding the function near the bottom of the script .
What am I do wrong or missing?
Great community by the way. We customized a v2 template a while ago using solutions the community shared which works great.
Thanks
….
// If there are any error notifications below an input field, focus that field
const notificationElm = document.querySelector(".notification-error");
if (
notificationElm &&
notificationElm.previousElementSibling &&
typeof notificationElm.previousElementSibling.focus === "function"
) {
notificationElm.previousElementSibling.focus();
}
$(document).ready(function(){
$('label[for=request_subject]').html("Custom Subject");
$('label[for=request_description]').html("Custom Description");
}
});
})();
0
Abhinav Pandey
After upgrading to v4, accessing custom fields on the new request page using JavaScript or jQuery can be challenging since the previous field IDs (like
custom_field_122222
) are no longer available. Has anyone else encountered this issue or found a solution?0
Ashok Kumar Reddy Putta
I'm looking for help on ticket forms in the Help Center V4.1 Version. We currently have a URL(spreadsheets) in the description of a custom field. This is added for 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?
0