How to Include end-user browser information via Help Center
Posted Dec 07, 2015
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>
0
51
51 comments
Martijn Snels • pluscloud.nl - Zendesk Premier Partner
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:
- Ticket: Is... Created
- Ticket: Channel Is Web form
{"ticket": {
"comment": {
"body": "{{ticket_field_00000000}}",
"author_id": {{ticket.requester.id}},
"public": false
}
}
}
0
Dave Voll
Hey Martijn,
As that would technically do what I would need, you hit the nail on the head with needing to hide that lol. I'm sure people would be a little weirded out to see all their info pulled, plus they have the ability to delete it with this. Hmm. I wonder if it could still exist in the hidden custom field, but not write to the side panel, but be pulled into the body after they hit submit. The whole issue is that while we do want this information, we don't want the customer ever knowing we pulled the info.
0
Martijn Snels • pluscloud.nl - Zendesk Premier Partner
Hi Dave, this is possible for sure. If would require some more research and testing to see if it can be pushed to the ticket body without showing it to the visitor but it's easy to just push it to the field and allow the visitor to see this.
Replace this:
$('#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" });
With the following:
$('#request_description').val('\n\n----- Browser information -----\nOS: ' + 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);
0
Dave Voll
Hello all!
Does anyone know if it's possible to have this data also write itself into the body of the ticket email?
0
Martijn Snels • pluscloud.nl - Zendesk Premier Partner
Sure, it will work on all pages where the theme you are using is been showed. The 'iPhone app' look isn't customizeable so this will not work.
I recommend to migrate to a responsive Help Center as more and more visitors are using mobile phones. If you have trouble with making the Help Center layout fit to your brands look and feel we (pluscloud, Zendesk Premier Solution Provider) can help you with this.
0
Heather Rommel
ok :( No we have not switched to Copenhagen yet
Yes it makes the HC look like an old Iphone app.
But it will work on tickets submitted from regular web browsers, correct?
0
Martijn Snels • pluscloud.nl - Zendesk Premier Partner
Are you using the Mobile Web Application view which makes your Help Center look like an old iPhone App or are you using a responsive layout like Copenhagen or a custom theme? If you are not using a responsive layout the code I have shared with you will not work.
0
Heather Rommel
Thank you again! We don't use Pathfinder yet - We just ran into a situation where we're finding many of our customers are still clicking "submit a request" instead of using the webwidget. Recently we found out that might be because the webwidget doesn't show on mobile experience, even after unchecking "mobile version" and therefore displaying the full website to mobile visitors.
Are you saying to enter the custom code in the Theme Editor under "New request page" at the bottom per this screenshot? Will this work with mobile?
0
Martijn Snels • pluscloud.nl - Zendesk Premier Partner
Hi Heather, thanks for the great compliment! Are you using the Productivity Pack or Multi Form feature of Zendesk? If so you could use the Pathfinder from Zendesk. If not you could try this 'quick and dirty code', it will use the HTML DOM referrer property and past it in a textarea:
0
Heather Rommel
Love this article, thanks! Do you know if there is additional code to capture which page the end user was on when they click Submit a Request?
0
Post is closed for comments.