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>
-
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
-
Martijn, this is fantastic! Thanks so much for sharing! :D
-
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.
-
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
-
I'm just testing with this as its a great idea, however I use two browsers, Chrome by default and IE for testing.
I do all admin stuff within chrome then use IE with a test user. when logging a request through IE with my test user the ticket is reporting the browser to be chrome?
-
Hi Andrew, do you use the Chrome Frame for IE? Have you tried using only the source from Stack Overflow?
-
Don't think I'm using chrome frame? I assume this is a plug in?
I have only used the source you provided also. I'll try with the source from the stack.
Thanks
Andrew
-
What does supportdetails.com give you when you visit it with your IE?
-
Hmm ok that also tells me chrome. (using edge sorry not IE) which then has the option in a drop down to open with IE which then shows to be IE
-
K using it from that method and it logs as IE 11 so its down to the browser or the plugin? the script is working correctly though so thanks for the assistance :)
-
Is this still a valid tip? 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 highlights (indicating incorrect code, correct?) and nothing in the large (and user-visible) text box in the New request page template.
Not certain what I'm doing wrong -- not a terribly complicated setup but it's just not working.
-
Hey Chris!
I've seen Martijn (the tip author) floating around here the last few days, so hopefully he'll be able to jump in here and help out. :)
-
Hi Chris, could you send me some screenshots or share a link where I can see your setup?
-
And, naturally, as soon as I go through the steps to outline the problem everything starts working as expected!
I may have captured some extra characters before -- this time I copy/pasted into/from TextWrangler. Also I had to deactivate a field on the left hand side of my ticket view to get Browser Information to pop up. Not sure if there's a limit or not there but it's all good now.
Thanks Martijn and Jessie!
-
Hi Chris, good to hear it's working now. The left pane of the ticket where you organize the ticket is a block which you actually can scroll so there is no need to deactivate other fields. If this isn't the problem you're facing could you please provide me with some screenshots to better understand what's going wrong.
-
Yet again I feel a bit silly. Either I hadn't refreshed our agent view at the correct time or I got distracted and forgot to do it entirely. Everything's working now -- I appreciate the help!
-
Glad to hear everything is working now.
-
This works great. @Martijn do you know if there is way to get the web widget to also capture the same information?
-
Hi Panos, currently the Web Widget API doesn't allow to push information to the ticket fields and hide them like we do with the Help Center at the moment. As the Web Widget functionality expands (with things like the Pathfinder App) I hope we can do some more cool things with it in the future.
-
I'd love to be able to do this but I'm having some trouble finding the New request template. We're using the Copenhagen theme and I only see a Request list. Do I have to do something to get the New request to show up? I'm pretty new to Zendesk so I'm still learning all of the ins and outs of the templates.
-
Hey Autumn! Sorry for the delayed response.
If you're viewing your Help Center as an Agent or Admin, you won't see the New Request link; Zendesk is set up so that this is only visible to end-users. Agents/Admins submit their tickets through the Agent Interface.
In order to see what your end-users will see, go to the top of your Help Center page and click General > Customize design. You'll see a black box appear in the lower right corner of your screen. Click that and select End-user. This will allow you to preview as though you were not an agent.
-
Hi Martijn, great tip and this is very helpful for us. However, there's a little bug which prevents the Flash details.
As you can see, I cannot get the details of end-user flash details. This is a critical information to us, since we're a flash based product. The code is pasted as it is without any changes. Hope you can help me. TIA.
-
Hi Shiraz,
The problem with Flash is that Google recently decided to block Flash elements by default. As this integration is using a hidden Flash element the user would be unable to load it manually what it normally could do on a website.
The user should change the 'Flash' settings of your website to 'Allow' in order to load the Flash element and be able to detect the Flash version.
-
Thank you. However, this is a hassle everyone has to go through. I personally think this is not a practical move to ask end-user.
-
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?
-
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:
<script type="text/javascript">
// Fill in Field ID from your textarea
var referrerfield_id = "0000000000";
$('#request_custom_fields_'+ referrerfield_id).val(document.referrer);
$('div.request_custom_fields_' + referrerfield_id).css({ display: "none" });
</script> -
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?
-
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.
-
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?
-
Hello all!
Does anyone know if it's possible to have this data also write itself into the body of the ticket email?
Please sign in to leave a comment.
46 Comments