Tip: Showing predefined answers for custom field values in your Help Center webform
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:
- How to set up an "ideal" KPI system for your customer support
- How to organize an excellent tickets categorization in Zendesk
- How to optimise your macros usage in Zendesk
Andrei Kamarouski
Zendesk Expert, Pythia Co-Founder
-
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!
-
This such a great tip, thank you for sharing it!
We'll find some place in the documentation to link to this.
-
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). :)
-
Thank you! Happy to share the knowledge with Zendesk folks =)
-
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!
-
Hi @...
- CSV is just needed to get the tags of your field values (avoiding copypasting) and organizing the order of the suggestions in the code.
- 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. :)
-
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!
-
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. :)
-
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.
-
Hi 蘇 詩婷,
I see, Yes, let's chat directly.
-
Hi，
I have a question, how to add multiple languages for the predefined answers?
-
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 -
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.
-
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). -
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.
-
I understand. I meant we have implemented multiple fields support by doing this for the multiple forms use case for the company above. :)
-
How can I contact you to get the solution?
-
Hi AirDroid , I do see your ticket in our Zendesk now - let's proceed with the communication there.
-
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 -
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 :)
Iniciar sesión para dejar un comentario.
20 Comentarios