Workflow: How to obtain the device type from the Web Widget for use in AI Agents - Advanced

Zendesk doesn’t offer a built-in way to get the device type from conversations that start in the Web Widget. However, you can use device information to improve conversation flows in AI Agents - Advanced.

This article shows a custom solution you can use with advanced AI agents to capture the customer's device type.

Note: The solution in this article uses custom JavaScript and exists for instructional purposes only. Zendesk cannot help you troubleshoot or build this workflow. If you need any help, the Developer Community is a great resource to post questions.

The workflow includes the steps below:

• Step 1: Add a script to capture the device type when the Web Widget loads
• Step 2: Retrieve the device information via CRM action and save it as a parameter
• Step 3: Use the device parameter in a decision tree to improve conditional flows

Step 1: Add a script to capture the device type when the Web Widget loads

Insert the JavaScript code below when you set up the Zendesk Web Widget on your website or web app.

Replace WIDGET_KEY and TICKET_FIELD_ID with your own values.

This script detects the device type and operating system based on the customer's browser. It then stores the information in a ticket field through the metadata API.

<!-- Start of BRAND_NAME Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=WIDGET_KEY"></script>
<!-- End of BRAND_NAME Zendesk Widget script -->
<script>
  function checkIphone() {
    const u = navigator.userAgent;
    return !!u.match(/iPhone/i);
  }
  function checkAndroid() {
    const u = navigator.userAgent;
    return !!u.match(/Android/i);
  }
  function checkIpad() {
    const u = navigator.userAgent;
    return !!u.match(/iPad/i);
  }
  function getOSVersion() {
    var ua = navigator.userAgent;
    var iosMatch = ua.match(/OS (\d+[_\d]*) like Mac OS X/);
    if (iosMatch) {
      var version = iosMatch[1].replace(/_/g, '.');
      return 'iOS ' + version;
    }
    var androidMatch = ua.match(/Android\s+([\d\.]+)/);
    if (androidMatch) {
      return 'Android ' + androidMatch[1];
    }
    return 'Unknown OS';
  }
  function getDeviceType() {
    if (checkIphone()) return 'iPhone';
    if (checkIpad()) return 'iPad';
    if (checkAndroid()) return 'Android';
    return 'Desktop';
  }
  var deviceType = getDeviceType();
  var osVersion = getOSVersion();
  var deviceFieldValue;
  if (deviceType === 'Android') {
    deviceFieldValue = osVersion;
  } else {
    deviceFieldValue = deviceType + ' (' + osVersion + ')';
  }
  zE('messenger:set', 'conversationFields', [
    { id: 'TICKET_FIELD_ID', value: deviceFieldValue }
  ]);
</script>

Step 2: Retrieve the device information via CRM action and save it as a parameter

After the script sets the device type in the Zendesk ticket field, use a CRM action in AI Agents - Advanced to retrieve it. This works only if you've connected your advanced AI agent to messaging.

Set up a CRM action that saves the Zendesk ticket field value as a parameter in AI Agents - Advanced.

Step 3: Use the device parameter in a dialogue to improve conditional flows

Now that you have the device type as a parameter, you can reference it in a dialogue. Add conditional blocks to your dialogue to route based on device type.