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 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
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 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();
}
54 Comments
Hello,
Is possible add more than one field for attachments and uploads ?
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?
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.
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"
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!
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-
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!
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?
Hi anyone at Zendesk,
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.
Hey Dan! Sorry this fell through the cracks the first time you posted it; I removed the older duplicate just to keep things tidy.
I don't actually know the answer to your questions, so I'm going to bring in someone from our support team to help out. Stand by!
Hey, Dan!
Unfortunately, you won't be able to add a dynamic header to a field, but the naming convention of these fields is essentially request_ and then the field name as outlined in our core API documentation for tickets here:
Zendesk API - Tickets
You can always view the source of the New Request page if you would like to be sure of the section names.
Hope this helps! 😺
Hi, we have been using curlybars to exclude articles from Categories/Sections/Article List, which is working, however we would like to exclude the articles from the Search Results which seems impossible to achieve.
I’ve looked at User Segments for the Section (where all articles sit) and this does not achieve what we need as we don’t wish to restrict users in any way if they have the direct URLs, just that they should not be capable of seeing them within the Help Centre or the search results.
Speaking with Zendesk Support they state that custom JS code could be used to achieve this, but they don’t provide any pointers how. Does anyone have advice on how this would be achieved?
How would I exclude certain search results from being shown?
Any assistance would be welcomed. Thank you.
Hi Ian!
Hopefully someone here in the Community can help you with this code. I'll check with our Community Moderators to see if one of them can help as well!
Hi,
I am creating my own dropdown menu instead of using {{user_info}}, because we want that menu to have additional links. How would I generate a link to "My Profile"? I tried {{link 'user_profile'}} but an ID is required. Can anyone help? I have searched and searched and can't seem to find an answer anywhere I look. :(
thanks!
Hi Kristin!
I'm checking with some of our Community Moderators to see if they can help!
Hi!
I would like to hide some options from a custom drop down field from end users. I tried to edit the code but I could not find the $(document).ready(function() since we are using a custom theme.
May I know where else I can edit it instead?
Thanks!
Hello Saranya,
As I have validated multiple custom themes, this should already show up in your script.js template found at the bottom of the selection when you edit the Code of your custom theme. If it's not there, you can simply add this: $(document).ready(function() at the top of your script.js template.
Hope this helps!
Hi !
What sort of code should I use if I have few tickets forms in my zendesk account , but I want my new request page to display only one of them ( and it's not the default form for my brand ). I have a brand ID, and I would like to lock it instead of giving customer possibility to chose.
Thanks
Hi @Tomasz Eitner,
As far as I know, there is no such option to show other forms than the default form but, you can update the links that redirect to new request form by adding ticket_form_id in the URL to always redirect users to the selected form.
You can also hide the drop-down of forms list to prevent users from selecting other forms.
Thanks
Team Diziana
Hi @Trapta,
Thanks for a tip . I have linked it directly with ticket form ID.
How can I hide the drop down ?
Thanks
@Tomasz Eitner,
You can put this code at the bottom of your style.css file to hide the drop down
Hi Trapta,
You are a star ! thanks ! all working perfect now!
Tomasz
@Tomasz Glad to hear that you got it working. Enjoy :)
Team Diziana
Regarding hiding the Community based on language - can someone point out exactly what needs to be replaced to adapt it to my relevant language?
Lets say I dont want it to appear in English, is this correct:
Hi,
We would like our language picker to appear only on the submit a request page header ... what would be the best way to do this?
Cheers,
Zoe
Hi Zoe!
I don't think we have any tutorials that show how to do this, but we do have a tip that shows how to hide the submit a request link for non-logged in users. It's not the exact same thing, but it might be a good jumping off point!
Is there a way to add a custom ID through JavaScript to the list items on the homepage. So I can reference them within the CSS without adding code to the template pages? I would also like to do this with the site header title. {{help_center.name}}
$( '.blocks-item' ).prepend( 'CUSTOM ID' );
<li class="blocks-item" id="CUSTOM ID">
/* CUSTOME ID */
#category_id_360000809844 a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size:60px;
content: "\f007";
}
Is it possible to copy the value of a custom field to the description field (system)?
I am trying to show a blurb in the Category Page if a user is not part of the User Segment.
Basically, all articles in that section are tied to that User Segment. So what ends up happening is that section isn't in the Sections collection. If that is the case I want to show a text blurb stating that.
These documents access are only given by special request. Please submit a ticket to view these documents.
I can't seem to get this to work. I am almost positive I need to use javascript but can't seem to get at the correct object. Any help would be appreciated
I figured this out.
What i did was set the ID to the nameof the section in the category.hbs when the sections are being created.
in Javascript I check to see if that object exists using
$(document).ready(function() {
var section = document.getElementById("White Papers");
if (section == null)
{
var label = document.getElementById("emptyLabel");
label.innerHTML = "<b><font size=3>Your Text Here</font></b>";
}
});
Please sign in to leave a comment.