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 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 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 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 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 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?

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.