Extensions

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.jsfile 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>