Recent searches


No recent searches

Tip: Showing predefined answers for custom field values in your Help Center webform



image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

Posted Feb 17, 2021

Hi all! 

Today I 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 web form here.

They probably use conditional ticket fields there to guide visitors through multi-level categorization scenarios and 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!

P.S. Check my other tips on Zendesk Community:



Andrei Kamarouski
Zendesk ExpertPythia Co-Founder


2

21

21 comments

Thanks Andrei! This is ridiculously helpful, and as we're about to go through a major overhaul and restructure of our KB this is something I'll add to the review list. Thanks again! 

0


image avatar

Jennifer Rowe

Zendesk Documentation Team

This such a great tip, thank you for sharing it!

We'll find some place in the documentation to link to this.

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

Thx! I am happy to hear it! Feel free to message me if you need some assistance with this tip. We are finishing a version looking exactly like by Lyft (buttons style) but this probably will not be published (too technical thing). :) 

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

Thank you! Happy to share the knowledge with Zendesk folks =) 

0


Hi, Andrei

Thank you for share it!

I want to try it in our Zendesk but failed, can you please help me to clarify it?

・After download the CSV and fill in the answer, should I upload this CSV file to any place?

・What I need to do is copy the JASON example you shared and replace the ticketfield ID and tag?

  Do I need to write the answer(text) in here?

Thanks!

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

Hi @...

  1. CSV is just needed to get the tags of your field values (avoiding copypasting) and organizing the order of the suggestions in the code. 
  2. You need to replace (1) Field ID, (2) tags and (3) texts for tags-related suggestions. 

As a result, you should have code with many pieces like this - one per suggestion. 

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

I hope this helps you. :) 

0


Hi, Andrei Kamarouski,

Thanks for the reply.

Follow your iustruction, I try to create a ticket field with just 4 selections and write the code in template like this (sorry for the Japanese tag), 

but still there is nothing appeared in our ticket form.

<div style="display: none; margin-top: 10px" data-element="field-helper" data-field-id="1500001776141">
<div data-field-tag="課金__エラーが出た">
エラーコード○○の場合は××で解決できます。
</div>

<div data-field-tag="課金__失敗">
2/19現在アイテム購入において不具合が確認されているのでご不便をおかけしています。
</div>

<div data-field-tag="引継ぎ__idが変わらない">
ゲームのトップ画面で確認できます。
</div>

<div data-field-tag="引継ぎ__設定失敗">
設定の手順は○○です。ご確認ください。
</div>

Sorry for bother you again, can you give me some advise?

Thanks very much!

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

Hi @蘇 詩婷

Did you add the 2nd part of the script starting with that code too? 

<script>
  try {

Anyway, feel free to contact me via widget here so we can have a quick call to fix it. :) 

0


Yes, I added the 2nd part of the script .

Thanks for your kind help!
I will try to contact you via the widget.

Thanks again.

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

Hi 蘇 詩婷

I see, Yes, let's chat directly. 

0


Hi,

I have a question, how to add multiple languages for the predefined answers?

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

AirDroid,

You can easily use Dynamic content to show answers in different languages. See this article as an example of doing this in your code. We also have developed a code to show custom ticket field values instead of the ones stored in Zendesk Support - feel free to connect on www.pythia.cc https://support.zendesk.com/hc/en-us/articles/203661426-Changing-your-Help-Center-design-based-on-your-end-user-s-language-Guide-Professional-and-Enterprise-#topic_ex1_qgc_l4b

0


@Andrei Kamarouski

Thank you for your information. it works for me.

I have another question. Currently, this code only works for only one ticket filed. If I would like them to work for others ticket filed too, what should I do?

Thanks.

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

We have this working for the case of multiple forms here. https://help.asanarebel.com/hc/en-us

Contact us if you want to get this solution (we will not publish it). 

0


Andrei Kamarouski

I didn't mean to have this working for multiple forms,  I would like to have this working for only one form but for multiple ticket fields.

 

 

 

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

I understand. I meant we have implemented multiple fields support by doing this for the multiple forms use case for the company above. :) 

0


Andrei Kamarouski

How can I contact you to get the solution?

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

Hi AirDroid , I do see your ticket in our Zendesk now - let's proceed with the communication there. 

0


Hi Andrei Kamarouski,

great tutorial, thank you. I got everything working but still want to achieve the button-like fields instead of the dropdowns. I'm pretty sure they use the values of a conditional ticket field and create a button for each of it but i can't get it to work at all.
Is there a chance you can provide something i can implement? I think slack is using a pretty similar technique as lyft does (https://slack.com/intl/de-de/help/requests/new?geocode=en-en)

Best,
Dennis

 

0


image avatar

Andrei Kamarouski

Community ModeratorThe Wise One - 2021

Hi Dennis Jaura, great to hear that you have used this tip! 

In order to try to help you, I would ask you to send an email to our Zendesk at help[at]pythia.cc :) 

0


Hi Andrei Kamarouski would it be possible to apply this code to multiple fields? Thank you so much!

0


Please sign in to leave a comment.

ADDITIONAL CONTENT

More about

Didn't find what you're looking for?

New post