Help Center JavaScript cookbook (Guide Professional and Enterprise)

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. Access to the page code is available on Guide Professional and Enterprise.

Note: Trial users are given the Guide Professional plan, which includes code editing options, but they can no longer access that feature if they do not purchase the Guide Professional or Enterprise plan.

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.

Prepopulate the fields of custom ticket forms

Note: Custom ticket forms are only available on 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:

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:

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"

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

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.

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:

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?

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. :(

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.

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.

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.

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}}

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