How to Include end-user browser information via Help Center

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:

1. Go to your Settings in Zendesk Support
2. Scroll down and choose Extensions
3. Click add target and choose HTTP target
4. Fill in a Title for this action, for an example 'Push Browser Information To Ticket Stream'
5. At the URL enter the following (and replace {subdomain} with your Zendesk account: https://{subdomain}.zendesk.com/api/v2/tickets/{{ticket.id}}.json
6. Set Method to PUT and make sure the Content type is been set to JSON.
7. Switch on the Basic Authentication and enter your Administrator credentials (more information)
8. Change the dropdown next the the Submit button to Create target and press Submit
   
   
   
   
9. Now you need to create a Trigger to actually make something happening. Again go to the Settings and now choose Triggers.
10. Press Add Trigger
11. Enter a Title in the top text field, for an example 'Push Browser Information to Ticket Comment'
12. In the first section under 'Meet all of the following conditions' create the following conditions:
    - Ticket: Is... Created
    - Ticket: Channel Is Web form
13. The second section 'Meet any of the following conditions' can be left empty
14. In the third section under 'Perform these actions' you create the following action: 'Notification: Notify target'
15. 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 version

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

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.

https://support.zendesk.com/hc/en-us/community/posts/360046927533-Feature-Request-Include-the-Browser-Information-in-the-original-Ticket-Creation-Message