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();
}
53 Comments
Chuck,
Glad to hear you figured it out.
Thanks for coming back and sharing your solution!
Hi All,
I have enabled the ability to hide the subject/description on our custom form in Help Centre, however I was really hoping there is some JS that someone could help me with so I can get an image to appear if the user select a form. For example, they select a "IT Support" custom form, and an image appears for that form selection with a process diagram.
Thanks!
Hey Jimmy!
I'm sure it's possible to write some JS to do that, although we don't currently have any tutorials to that effect. I've pinged our Community Moderators about your question; hopefully one of them will be able to share some insight!
Thanks, Jessie. Hopefully someone can spare a bit of help :)
Has anyone tried using a library like IntroJs in their Help Center? I've been trying to get it to work but have yet to experience success. Any suggestions on getting something like this to work are much appreciated.
Hi Stan,
Hopefully some of our community members can jump in here and offer up some advice on how to use IntroJS with the Help Center. I'll also add this post to the March Community Roundup to help provide visibility for you as well :)
Cheers!
Hello,
Does someone here know how to fix this error:
It should show this table:
The Console (Dev.Tools) sais:
Uncaught TypeError: moment is not a function
at Object.a.needToFlushDB (9aa289914132a72f08dd121984de0de3c8ab4457.js:15)
at r (9aa289914132a72f08dd121984de0de3c8ab4457.js:15)
at new a.initialize (9aa289914132a72f08dd121984de0de3c8ab4457.js:15)
at initMultiLevelMenu (9aa289914132a72f08dd121984de0de3c8ab4457.js:15)
at HTMLDocument.<anonymous> (script.js?digest=360029839118:166)
at c (jquery-c679166c1baf738bb62b9918a7a13fd4.js:1)
at Object.fireWith [as resolveWith] (jquery-c679166c1baf738bb62b9918a7a13fd4.js:1)
at Function.ready (jquery-c679166c1baf738bb62b9918a7a13fd4.js:1)
at HTMLDocument.r (jquery-c679166c1baf738bb62b9918a7a13fd4.js:1)
Does anyone have a suggestion or tip?
Thanks in advance!
Regards,
Ron
Hi Ron
Please read the post here: https://support.zendesk.com/hc/en-us/community/posts/360031296373-Do-you-use-moment-js-in-your-Theme-Has-it-been-broken-in-last-couple-of-days-
Please send us an email (https://support.diziana.com/requests/new), share your multilevel-menu plugin with us, and we will share an updated version that works. We have raised ticket with Zendesk, and we are requesting them to fix this issue -- that is scope their version of moment to their own code, not let it override code used in help-center themes.
Thank you
Hello,
I am trying to customise the values (hide some values) of a drop down in the "$(document).ready(function () {".
Does someone know how to do this?
Thanks.
None of the methods in the article appear to work with the recent versions of the widget. I'm struggling to find a viable way to change the labels on the form fields in the widget and nothing seems to work.
Hey Jonathan,
If you're trying to customize the widget, I recommend taking a look at our Advanced Customization of the Web Widget article which has a ton of useful information for you.
If that doesn't help, can you provide a screenshot of the exact label you're trying to alter?
Let me know!
Hi,
I´ve created an pop-up and I want it to show only once per browser session. I've created below snippet but it doesn't seem to work. Any of you guys have any tips on this?
For showing it on Home Page only did work with this code (maybe usefull for some of you)
// Show Alert on Homepage Only //
// Show Alert only once per browser //
Regards,
Ron
Hey Ron,
I myself am not very experienced in this area, however, I did a quick Google search and was able to find the following discussion on Stack Overflow: Popup on website load once per session
Perhaps that will help? Hopefully, others can jump in and offer up some guidance for you as well.
Cheers!
Hi Brett,
Thanks. I will look into that post on Stack Overflow!
Cheers!
Hello wise people,
I would like to add some info above the Submit button on our new request form (I have been able to add info to the attachment area), and hoping someone can help me out.
The code for the extra text on the attachment field is (I am hoping I can change the bold bit to the Submit button ID but I cannot seem to find it) ;
<script>
if(window.location.href.indexOf("formID") > -1) {
$('div#upload-dropzone').parent().find('label').text('Text to add here')
}
</script>
Any help is welcome. Z
Hi Zoë,
Have you had a chance to look at the following post? Add description to the Attachments field for "Submit a request" form
It looks like Diziana provided some code that can help with adding a descriptions to your field.
I hope this helps!
Hello everyone,
We have 2 languages in one of our our help centers ("Spanish" and "Spain (Spanish)") - We need to change the display name for "Spanish" in the language selector from "Spanish" to "English" (we provide our own translations and due to a limit in the languages we are able to use in our help centers, we've recently been needing to re-purpose some languages and therefore must rename the display name). We've successfully used the below code to make this change in other help centers, but because the 2 languages both have the word "Spanish", this code is changing both display names. Does anyone know a better way to change the display name in this type of situation?
$(function(){
$('a.dropdown-toggle:contains("Spanish")').text("English");
$('a:contains("Spanish")').text("English");
});
Hi @Kimberly,
You can simply edit the language selector code in your .hbs file and replace {{current_locale.name}} with {{#is current_locale.name 'Spanish (English)'}} English {{else}} {{current_locale.name}} {{/is}}
Also, replace {{name}} with {{#is name 'Spanish (English)'}} English {{else}} {{name}} {{/is}}
Let me know if this solves your issue.
Thanks
Team Diziana
Our subject field is currently not shown to end users. Is there a recipe for assigning the ticket subject based on the value of the custom field?
Thanks
Hi - when I add
to my script.js file (it's not there in the latest Copenhagen theme), the user info dropdown stops working. Does anyone know how to fix this?
Hi KC,
The cookbook relies heavily on jQuery. The Copenhagen v2 theme removed the jQuery library but you can add it back. Here are the instructions:
https://support.zendesk.com/hc/en-us/articles/360037983854-Importing-or-upgrading-jQuery
Thanks.
Thank you, Charles, that solved the problem with the jQuery, but the element IDs in the recipes don't seem to work with the v2 theme. For example:
$('#user-menu .my-activities').html(' See my requests');
Is the dropdown menu item still identified as "user-menu"?
Hello,
I'm trying to prefill some custom fields using the solution described here. However, I noticed that for date fields, the value set is not being displayed to the end user. By inspecting the HTML code I noticed the datepicker element is the one that is visible, but there is no specific id information to select it via CSS, especially when having multiple date fields in the form.
<input type="text" class="datepicker" value="" aria-label="Use the arrow keys to pick a date">
How do you recommend setting a date value on a custom field and also showing that value to the end user on the visible field?
Thanks.
Please sign in to leave a comment.