Predefined answers in your Help Center webform (Zendesk Tip)

Today we would like to share a very nice tip that expands the standard self-service options of your Help Center running on Zendesk (BTW you can find more Help Center related tips in Zendesk Community). The solution is based on simple JavaScript code and HTML template that might be added and extended even by non-developers.

Expanding default self-service options in Zendesk Help Center

These options include Knowledge base articles suggestions when visitors type text in the Subject line and Answer Bot suggestions after the visitor submits a ticket. While the last option is a final attempt to deflect tickets (already submitted!), the first one works at the very beginning of the ticket submission process. It is clear that any additional meaningful and well-organized options for ticket deflection at the very beginning of this process could provide a good experience with your customer service.

Many brands do use and require filling out the custom ticket field with request categories when submitting a ticket. This is a great way to organize the related workflows in your Zendesk (see here how you can benefit from excellent ticket categorization). You can place this field at the very beginning of the webform to structure the whole submission process around this and ensure the best results in terms of the most relevant category selection.

How Lyft does it

So why not provide predefined suggestions below this field when visitors choose a specific value there? You can see how Lyft does it in their custom and interactive webform here.

They use conditional ticket fields logic to guide visitors through multi-level categorization scenarios to end up with tailored predefined answers for each one of them. Additionally, they pre-fill the Subject field with the value of the last category, thus saving the efforts of the visitor and controlling the related workflows in Zendesk. Well done guys!

How you do this in your Help Center

Lyft’s example requires advanced web form customization to get conditional button like fields and selection experience. This customization is out of the scope of our today’s tip: our main goal is to provide a solution to show predefined answers for the case of one custom drop-down ticket field with categories.

Step 1. Create custom categories field

Again follow our best practices for one ticket form case outlined in the post about excellent ticket categorization. Then export all values and their tags via the “Download CSV” feature.

Step 2. Prepare predefined answers

Import your CSV into Excel or Google Sheet so you can see the ticket field values and related tags (tags are used to show answers when values are selected in the field). Then add prepared predefined answers to those of them that you would like to show in the web form. You can use this Google Sheet template or download the attached Excel file.

Step 3. Add code to Help Center

Go to Help Center theme pages (see how to do this) and open the New request page there. Place JavaScript and HTML code as following at the end of the page. Replace YOUR_TICKET_FIELD_ID with the ID of the custom ticket field and FIELD_VALUE_TAG_1 with your tag. You can add any HTML text formattings (like headings, bold, links, images, etc).

<div style="display: none; margin-top: 10px" data-element="field-helper" data-field-id="YOUR_TICKET_FIELD_ID">
  <div data-field-tag="FIELD_VALUE_TAG_1">
    <h2>Subtitle</h2> and <a href="https://google.com">google link</a>
  </div>
</div>
<script>
  try {
    const fieldHelperElement = document.querySelector('[data-element="field-helper"]');
    const fieldId = fieldHelperElement.dataset.fieldId;
    const fieldInput = document.querySelector(`#request_custom_fields_${fieldId}`);
    const fieldInputContainer = fieldInput.parentElement;
    fieldInputContainer.after(fieldHelperElement);
    const fieldHelperOptions = [...fieldHelperElement.querySelectorAll('[data-field-tag]')];
    fieldHelperOptions.forEach(option => {
      option.style = 'display: none';
    });
    fieldHelperElement.style.display = 'block';
    fieldInput.addEventListener('change', event => {
      const selectedFieldTag = event.currentTarget.value;
      fieldHelperOptions.forEach(option => {
        option.style.display = option.dataset.fieldTag === selectedFieldTag ? 'block' : 'none';
      });
    });
  } catch (err) {
    console.warn('Support form custom script error', err);
  }
</script>

Duplicate as many new code sections as you wish in the HTML code to add new answers.

<div data-field-tag="FIELD_VALUE_TAG_1">
    Your text
  </div>

This is how it might look like as a result.

That’s it! Now you have predefined answers and provide an additional streamlined self-service option to your Help Center visitors and customers.

I hope you have enjoyed this post. Share your additional ideas or best practices you have seen across Help Centers to improve this tip.

Happy support and stay safe!