Advanced ticket fields descriptions
This extension allows showing tooltips or other information below the specific fields on the ticket form.
-
Unpack the downloaded
zip
file. There will be two files:advanced-ticket-field-desc.js
Readme.txt
-
In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.
-
Click the theme you want to edit to open it.
-
Click the Edit code button.
-
In the Assets section, click Add asset, then browse to select your files.
Select the
advanced-ticket-field-desc.js
file from the unpacked zip. The file is added to your list of asset files. -
In your theme code configuration page under the templates directory, click the
document_head.hbs
file. - In the
document_head.hbs
file, paste the following snippet:<script src="{{asset 'advanced-ticket-field-desc.js'}}"></script>
-
In your theme code configuration page under the templates directory, click the
new_request_page.hbs
file. -
In the
new_request_page.hbs
file, paste the following snippet:<div hidden id="ticket-form-descriptions"></div>
This
ticket-form-descriptions
block will act as a container for descriptions for fields. - Click Publish.
Finding the ID of a custom field
To add the description for a certain ticket form field, you need to find and copy that field’s ID from the Admin Center.
-
Click the Zendesk Products icon in the top bar, then select Admin Center.
-
Select the Object and rules menu item.
-
Select the Fields menu item.
-
The field list appears. You will notice the Field ID column.
- Copy the ID of the field.
Once you copy the ID, go back to the code. Open the new_request_page.hbs
template.
Adding descriptions
For each ticket form field, you will need to add a code like the following snippet:
<div data-field="TICKET_FIELD_ID">
TICKET_FIELD_HELPER_TEXT
</div>
-
TICKET_FIELD_ID
is the unique name of the field. You can find instructions on how to find the ID below. -
TICKET_FIELD_HELPER_TEXT
is content you would like to display. You can add here pretty much everything you wish. It’s an HTML code block. You can use all our Formatting Options as a description as well.
Let's say you would like to add a helper text to the default Subject field. In this case, your code will look like this:
<div hidden id="ticket-form-descriptions">
<div data-field="request_subject">
Hello <a href="https://www.zendesk.com">Zendesk</a>
</div>
</div>
If you want to add a helper text a custom field with ID 4558571773211
, it will look like this:
<div hidden id="ticket-form-descriptions">
<div data-field="request_custom_fields_4558571773211">
Here is a helper text for the custom email field.
</div>
</div>
And here is an example with both fields:
<div hidden id="ticket-form-descriptions">
<div data-field="request_subject">
Hello <a href="https://www.zendesk.com">Zendesk</a>
</div>
<div data-field="request_custom_fields_4558571773211">
Here is a helper text for the custom email field.
</div>
</div>