How to Include end-user browser information via Help Center
Often we get the request from our customers to integrate an easy to use way to send over important browser information when creating a ticket in the Help Center. The browser information is in a lot of cases very important to deliver proper support to your customers.
This trick will automatically grab all important information for your team and include it into a hidden textarea in your Help Center. I've used the source from Christian Ludwig which was for public use shared on Stack Overflow and made it ready to use for your Help Center.
Example in agent view
Instructions
- Create a Custom Ticket Field and choose the Multi-line field. Make sure it's visible and editable for your end-user.
- After creating the field grab the ID. You can easily find this ID by pressing Edit in the Ticket Field list The Field ID will be on the top of the page.
- Copy the code below and paste it in your New Request template below all other HTML code. Change the browserfield_id in the top of the code to your Field ID. You could disable the Flash detection by deleting the first row.
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
// Fill in Field ID from your textarea
var browserfield_id = "0000000000";
/**
* JavaScript Client Detection
* (C) viazenetti GmbH (Christian Ludwig)
*/
(function (window) {
{
var unknown = '-';
// screen
var screenSize = '';
if (screen.width) {
width = (screen.width) ? screen.width : '';
height = (screen.height) ? screen.height : '';
screenSize += '' + width + " x " + height;
}
// browser
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browser = navigator.appName;
var version = '' + parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion, 10);
var nameOffset, verOffset, ix;
// Opera
if ((verOffset = nAgt.indexOf('Opera')) != -1) {
browser = 'Opera';
version = nAgt.substring(verOffset + 6);
if ((verOffset = nAgt.indexOf('Version')) != -1) {
version = nAgt.substring(verOffset + 8);
}
}
// Opera Next
if ((verOffset = nAgt.indexOf('OPR')) != -1) {
browser = 'Opera';
version = nAgt.substring(verOffset + 4);
}
// MSIE
else if ((verOffset = nAgt.indexOf('MSIE')) != -1) {
browser = 'Microsoft Internet Explorer';
version = nAgt.substring(verOffset + 5);
}
// Chrome
else if ((verOffset = nAgt.indexOf('Chrome')) != -1) {
browser = 'Chrome';
version = nAgt.substring(verOffset + 7);
}
// Safari
else if ((verOffset = nAgt.indexOf('Safari')) != -1) {
browser = 'Safari';
version = nAgt.substring(verOffset + 7);
if ((verOffset = nAgt.indexOf('Version')) != -1) {
version = nAgt.substring(verOffset + 8);
}
}
// Firefox
else if ((verOffset = nAgt.indexOf('Firefox')) != -1) {
browser = 'Firefox';
version = nAgt.substring(verOffset + 8);
}
// MSIE 11+
else if (nAgt.indexOf('Trident/') != -1) {
browser = 'Microsoft Internet Explorer';
version = nAgt.substring(nAgt.indexOf('rv:') + 3);
}
// Other browsers
else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
browser = nAgt.substring(nameOffset, verOffset);
version = nAgt.substring(verOffset + 1);
if (browser.toLowerCase() == browser.toUpperCase()) {
browser = navigator.appName;
}
}
// trim the version string
if ((ix = version.indexOf(';')) != -1) version = version.substring(0, ix);
if ((ix = version.indexOf(' ')) != -1) version = version.substring(0, ix);
if ((ix = version.indexOf(')')) != -1) version = version.substring(0, ix);
majorVersion = parseInt('' + version, 10);
if (isNaN(majorVersion)) {
version = '' + parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion, 10);
}
// mobile version
var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);
// cookie
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if (typeof navigator.cookieEnabled == 'undefined' && !cookieEnabled) {
document.cookie = 'testcookie';
cookieEnabled = (document.cookie.indexOf('testcookie') != -1) ? true : false;
}
// system
var os = unknown;
var clientStrings = [
{s:'Windows 10', r:/(Windows 10.0|Windows NT 10.0)/},
{s:'Windows 8.1', r:/(Windows 8.1|Windows NT 6.3)/},
{s:'Windows 8', r:/(Windows 8|Windows NT 6.2)/},
{s:'Windows 7', r:/(Windows 7|Windows NT 6.1)/},
{s:'Windows Vista', r:/Windows NT 6.0/},
{s:'Windows Server 2003', r:/Windows NT 5.2/},
{s:'Windows XP', r:/(Windows NT 5.1|Windows XP)/},
{s:'Windows 2000', r:/(Windows NT 5.0|Windows 2000)/},
{s:'Windows ME', r:/(Win 9x 4.90|Windows ME)/},
{s:'Windows 98', r:/(Windows 98|Win98)/},
{s:'Windows 95', r:/(Windows 95|Win95|Windows_95)/},
{s:'Windows NT 4.0', r:/(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/},
{s:'Windows CE', r:/Windows CE/},
{s:'Windows 3.11', r:/Win16/},
{s:'Android', r:/Android/},
{s:'Open BSD', r:/OpenBSD/},
{s:'Sun OS', r:/SunOS/},
{s:'Linux', r:/(Linux|X11)/},
{s:'iOS', r:/(iPhone|iPad|iPod)/},
{s:'Mac OS X', r:/Mac OS X/},
{s:'Mac OS', r:/(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/},
{s:'QNX', r:/QNX/},
{s:'UNIX', r:/UNIX/},
{s:'BeOS', r:/BeOS/},
{s:'OS/2', r:/OS\/2/},
{s:'Search Bot', r:/(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/}
];
for (var id in clientStrings) {
var cs = clientStrings[id];
if (cs.r.test(nAgt)) {
os = cs.s;
break;
}
}
var osVersion = unknown;
if (/Windows/.test(os)) {
osVersion = /Windows (.*)/.exec(os)[1];
os = 'Windows';
}
switch (os) {
case 'Mac OS X':
osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1];
break;
case 'Android':
osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];
break;
case 'iOS':
osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);
break;
}
// flash (you'll need to include swfobject)
/* script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" */
var flashVersion = 'no check';
if (typeof swfobject != 'undefined') {
var fv = swfobject.getFlashPlayerVersion();
if (fv.major > 0) {
flashVersion = fv.major + '.' + fv.minor + ' r' + fv.release;
}
else {
flashVersion = unknown;
}
}
}
window.jscd = {
screen: screenSize,
browser: browser,
browserVersion: version,
browserMajorVersion: majorVersion,
mobile: mobile,
os: os,
osVersion: osVersion,
cookies: cookieEnabled,
flashVersion: flashVersion
};
}(this));
// The code below makes sure the information above is been pushed into a hidden textarea.
$('#request_custom_fields_'+ browserfield_id).val(
'OS: ' + jscd.os +' '+ jscd.osVersion + '\n' +
'Browser: ' + jscd.browser +' '+ jscd.browserMajorVersion +
' (' + jscd.browserVersion + ')\n' +
'Mobile: ' + jscd.mobile + '\n' +
'Flash: ' + jscd.flashVersion + '\n' +
'Cookies: ' + jscd.cookies + '\n' +
'Screen Size: ' + jscd.screen + '\n\n' +
'Full User Agent: ' + navigator.userAgent);
$('div.request_custom_fields_' + browserfield_id).css({ display: "none" });
</script>
-
Hi Dave, if you want to keep it hidden from the requestor it's no option to push it in the Ticket Comments. Later on the email reply the requester would notice this as it's been pasted under his or her message.
Another option would be to use the HTTP Targets to push an internal note to the ticket. This is quite easy if you follow these steps:
- Go to your Settings in Zendesk Support
- Scroll down and choose Extensions
- Click add target and choose HTTP target
- Fill in a Title for this action, for an example 'Push Browser Information To Ticket Stream'
- At the URL enter the following (and replace {subdomain} with your Zendesk account: https://{subdomain}.zendesk.com/api/v2/tickets/{{ticket.id}}.json
- Set Method to PUT and make sure the Content type is been set to JSON.
- Switch on the Basic Authentication and enter your Administrator credentials (more information)
- Change the dropdown next the the Submit button to Create target and press Submit
- Now you need to create a Trigger to actually make something happening. Again go to the Settings and now choose Triggers.
- Press Add Trigger
- Enter a Title in the top text field, for an example 'Push Browser Information to Ticket Comment'
- In the first section under 'Meet all of the following conditions' create the following conditions:
- Ticket: Is... Created
- Ticket: Channel Is Web form - The second section 'Meet any of the following conditions' can be left empty
- In the third section under 'Perform these actions' you create the following action: 'Notification: Notify target'
- Choose the target you've just created and paste the following information in the JSON body field, make sure you replace the 00000000 with the correct custom field ID.
{
"ticket": {
"comment": {
"body": "{{ticket_field_00000000}}",
"author_id": {{ticket.requester.id}},
"public": false
}
}
}
-
Hi Martijn,
I have exactly the same issue as Chris had in July 2016.
We are using Copenhagen theme.
I'm following the steps and when I copy/paste the code below the last </div> tag I get a lot of white text and pink highlight.
I suspect that there may be some issue when I'm transferring a script to my Help Centre I was trying to use Google Chrome, IE, online HTML & JAVA editors and even the original version of this script: http://jsfiddle.net/ChristianL/AVyND/
Unfortunately, I wasn't able to resolve this issue...
I'm starting from here (after the last </div>):
First issues are visible here:
And then I have even more:
Any help would be much appreciated!
-
Hi Martijn,
I'm following the steps but I'm not sure where can the "New Request template".
Can you please help?
Thanks,
Amir
-
Hi Amir!
You can reach your templates through your Guide Admin tools (just click Guide admin from inside your Help Center) provided you're on a high enough plan. Do you know what plan you're on?
-
Hi Martijn,
Thank you for this is great article!
I just have a question here as to what part of the code, if it does, extracts the browser when using this via an in-app browser? And what would it typically show under 'browser'?
Thanks,
Saranya
-
Realise this is an old thread but I'm interested to know if it's possible to detect the device the user is on without prompting them for that info.
Wish list: Device/make and model
Android OS versionBasically all the good stuff Google Play polls when we use that integration.
Cheers!Matt
-
Hey Matt,
To clarify since you mentioned mobile OSs -- are these requests that are via the mobile Help Center access through a browser, or are they requests from a Mobile SDK implementation? The two capture different sets of information.
If you go to the events view of a ticket submitter through a mobile browser, the initial comment will have a user agent string that looks something like this:
- Mozilla/5.0 (Linux; Android 6.0; LGUS991) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.80 Mobile Safari/537.36
- 107.77.206.22
- IL, United States
The top bullet point is called a user agent string and can be decoded using a site like http://www.useragentstring.com/ to see what browser they are using. Note that this string does not include the OS version nor the model/make; just the mobile browser info.
Meanwhile if you go to the events view of a ticket submitted via the SDK, you get something like this:
- Zendesk-SDK/2.0.0 Android/23 Variant/Support
- 12.345.6.78
- 12, India
This includes the OS and SDK version, but not the make/model. However, if you hit the ticket audits API endpoint of the ticket, the SDK does capture that data in a "metadata" object. It looks like this:
"custom": {
"sdk": {
"device_used_memory": "825",
"device_manufacturer": "samsung",
"device_os": "6.0.1",
"device_total_memory": "1383",
"device_battery": "100",
"device_name": "j5lte",
"device_model": "SM-J500F/j5lte",
"device_low_memory": "false",
"device_api": "23"
}
}More about the ticket audits api endpoint here:
https://developer.zendesk.com/rest_api/docs/support/ticket_audits
-
Hey Andrew, thanks for the reply!
So I meant whether it's possible to gather all that good stuff you highlighted in your SDK example.
Ideally I want that through the browser help center.Cheers,
Matt
-
Hey Matt,
Unfortunately we wouldn't capture that by default. The workaround detailed in this post includes OS data, though.
-
Does this work for the latest version of Zendesk?
I created the custom ticket field, populated it with the browser options and copied in the code directly while changing the browser ID according to the created custom ticket field.
I'm getting the same issue where my code is turning black/red as if it's commented out and there are errors.
-
Hi Sajan,
The coloring of the text looks good from what I can see, but I can't see the end of your code -- are you using the closing script tag? And what are the errors?
-
Hi Sajan,
The coloring looks good.
For me, I only got the code to work after removing the quotation mark on the following line:
// flash (you'll need to include swfobject)
-
Is this code available to work with the Help Widget at this point?
-
Hey Michael,
The tickets created through the web widget automatically captures the browser and OS information of the requester. You can find these by clicking on the Conversations option at the upper left corner of the top of the ticket comment and change it to Events. If you scroll down to the bottom of the ticket, you will see a string of browser information there.
Let me know if you experience issues on your end as I'm happy to assist further.
Cheers!
-
Brett,
Yes, I'm familiar with the conversations data point, however, in the above code it is writing to a field value as that gives us the ability to record that and also map that to a Jira field when we escalate to Jira. I would like the same ability that the mobile and laptop/desktop browser experience at the ticket creation level offers with the above code.
Is that something that could be done?
Thanks so much.
- Michael
-
Hi Michael,
My knowledge in this area is rather limited so I'm afraid I won't be much help here. Hopefully, others can jump in and offer up some guidance if this is possible.
I'll also reach out to some of our Community Moderators to see if they have any advice to offer.Cheers!
-
Any update on this? It would be great to have a fix if anyone knows how to get this working. Looks like Rudolf's question above was never really answered. And he was having the same problem as Chris in 2016. I'm having the same problem now. I followed the instructions exactly (plus tried removing the first line and the errant apostrophe another poster mentioned), and the end-user information simply isn't captured in my ticket. Thoughts?
-
@... - do you have any suggestions?
-
@... @... We are soon bringing the browser information feature to our Ticket Field Magic app on the Zendesk App Marketplace so you can easily add this feature to your ticket form among with many other cool ticket field tricks. I'll update this community post once the new release is available.
-
We are using the Copenhagen theme, which apparently does not include JQuery. So I had to modify the bottom part of the script to use vanilla JS:
document.querySelector('#request_custom_fields_' + browserfield_id).value =
'OS: ' + jscd.os +' '+ jscd.osVersion + '\n' +
'Browser: ' + jscd.browser +' '+ jscd.browserMajorVersion +
' (' + jscd.browserVersion + ')\n' +
'Mobile: ' + jscd.mobile + '\n' +
'Flash: ' + jscd.flashVersion + '\n' +
'Cookies: ' + jscd.cookies + '\n' +
'Screen Size: ' + jscd.screen + '\n\n' +
'Full User Agent: ' + navigator.userAgent;
document.querySelector('.request_custom_fields_' + browserfield_id).hidden = true;The template looks like it has errors, since the color highlighting is all screwy, but it works. I even left this line as-is, with the apostrophe:
// flash (you'll need to include swfobject)
-
Active Feature Request (please vote):
Feature Request: Include the Browser Information in the original Ticket Creation Message
@...
I just posted a Feature Request for this at the link below. If you would like to see this feature please head over there and show your support. Please make sure to add an upvote and comment even if it is simply a "+1"
Also, you may consider adding it to your post to get the feature request more visible.
Cette publication n’accepte pas de commentaire.
51 Commentaires