Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* Automatically populates Zendesk public-facing "new ticket" fields
* on page load.
*
* To use, copy and paste into your New Request Page template (wrapped
* in a `<script></script>` tag).
*
* For most fields, just use the field name (so if the field is
* `request[subject]`, use `subject` in the URL, while
* `request[custom_fields][123456]` becomes `123456`). You can also use
* `email` instead of `anonymous_requester_email`. For custom field
* dropdowns, specify the value, not the label (so something like
* `my_value` rather than `My Value`).
*
* You can also map custom fields to arbitrary names via the `aliases`
* object below.
*
* Example URL:
*
* /hc/en-us/requests/new?email=test@test.com&subject=Example+Subject
*/
(function ($) {
// This is the only portion of the script you might wish to edit.
// It maps custom field numeric IDs to custom names you can use
// in the URL. So in the example below, `?custom_name=test` would
// set `#request_custom_fields_123` to `test`.
var aliases = {
'custom_name': '123'
}
// You should not need to edit anything past this point
var parsedQueryString = function () {
var segments = window.location.search.substr(1).replace(/\+/g, ' ').split('&'),
parsed = {};
if (!segments) return parsed;
for (var i = 0, count = segments.length; i < count; i++) {
var parts = segments[i].split('='),
key = parts.shift(),
value = parts.length ? decodeURIComponent(parts.join('=')) : null;
parsed[key] = value;
}
return parsed;
}
$(document).ready(function () {
var query = parsedQueryString();
for (var key in query) {
if (!query.hasOwnProperty(key) || key == 'ticket_form_id') continue;
var prefix = '#request_',
value = query[key];
if (typeof aliases[key] !== 'undefined') {
key = aliases[key];
}
if (key == 'email') {
prefix += 'anonymous_requester_';
} else if (/^\d+$/.test(key)) {
prefix += 'custom_fields_';
}
var field = $(prefix + key),
data = field.attr('data-tagger');
if (data) {
data = JSON.parse(data);
var label = '';
if (!value) {
label = data[0].label;
} else {
for (var i = 0, count; i < data.length; i++) {
if (data[i].value == value) {
label = data[i].label;
break;
}
}
}
field.val(value).closest('.nesty-input').text(label);
} else {
field.val(value);
}
}
})
})(jQuery)
@JesseNovice

This comment has been minimized.

Copy link

@JesseNovice JesseNovice commented May 30, 2019

Hi There, this is working on desktop but breaks on mobile, do you have any idea why? The ids are the same.

@ARSoderberg

This comment has been minimized.

Copy link

@ARSoderberg ARSoderberg commented Jun 20, 2019

Regarding mobile. This works as expected for me. I have several fields I need to auto-populate in one of our forms and this technique works both in a desktop browser as well as mobile (at least my iPhone with iOS Safari).

@JesseNovice

This comment has been minimized.

Copy link

@JesseNovice JesseNovice commented Jun 20, 2019

Hi Andrew, can you please share a example with me so I can look at the set up?

@ARSoderberg

This comment has been minimized.

Copy link

@ARSoderberg ARSoderberg commented Jun 20, 2019

The URL will follow a pattern like this:
https://support.yourdomain.com/hc/en-us/requests/new?ticket_form_id=[form_id_number]&[field_id_number1]={value1}&[field_id_number2]={value2}
Where
[form_id_number], [field_id_number1,2] are replaced with the actual Zendesk form id number (e.g. 360001213533) and field id numbers
{value1,2} are replaced with the info you want to auto-populate in those fields.

example:
https://support.yourdomain.com/hc/en-us/requests/new?ticket_form_id=360001216543&360019850345=content+here&360019850373=more+content+here

The script provided above (in Git) is wrapped inside <script></script> tags and placed at the top of the new_request_page.hbs file in your Zendesk templates. I made no changes to the script.

That's all I had to do to make it work for browsers and iPhone/iPad iOS (again, I have not tested to see if it works on Android devices yet).

@FridtjofHals

This comment has been minimized.

Copy link

@FridtjofHals FridtjofHals commented Sep 19, 2019

This works great, thanks.

But does anyone know the syntax for using the url to add an attachment?
It does not seem to follow the same format as for instance hc/en-us/requests/new?attachments=C:\file.txt does not work like hc/en-us/requests/new?email=test@test.com does. Or perhaps my paramater for the files is wrong?

@GeorgeManning

This comment has been minimized.

Copy link

@GeorgeManning GeorgeManning commented Sep 9, 2020

Anyone try this recently? It's not working for me. I first added <script> and </script> tags to the top of the new_request_page.hbs, then pasted lines 22-78 after the <script> and before </script>. Saved the changes and publish. Then test with hc/en-us/requests/new?email=test@test.com doesn't autofill. Full test: https://georgetest.zendesk.com/hc/en-us/requests/new?email=test@tester.com and another: https://georgetest.zendesk.com/hc/en-us/requests/new?description=Your+string+goes+here

@onecrayon

This comment has been minimized.

Copy link
Owner Author

@onecrayon onecrayon commented Sep 9, 2020

@GeorgeManning Sorry, I haven’t used Zendesk for years. It’s quite likely they have updated their form logic in a way that breaks this script.

@JesseNovice

This comment has been minimized.

Copy link

@JesseNovice JesseNovice commented Sep 9, 2020

Hi George, the issue is jQuery is not added to your site. As this script relies on Jquery it fails. Once you add jQuery to Zendesk the script will work as expected. Thanks

@GeorgeManning

This comment has been minimized.

Copy link

@GeorgeManning GeorgeManning commented Sep 9, 2020

Hi George, the issue is jQuery is not added to your site. As this script relies on Jquery it fails. Once you add jQuery to Zendesk the script will work as expected. Thanks

Thanks @JesseNovice. Appreciate your help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.