How to Include end-user browser information via Help Center

Martijn, this is fantastic! Thanks so much for sharing! :D

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?

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.

Hello all! 

Does anyone know if it's possible to have this data also write itself into the body of the ticket email?

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);

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.