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

<p>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 advanced AI agents.</p><p>This article shows a custom solution you can use with advanced AI agents to capture the customer's device type.</p><div class="p"><div class="note">
<span class="notetitle">Note:</span> The solution in this article uses custom JavaScript and exists for instructional purposes only. Zendesk can't help you troubleshoot or build this workflow. If you need any help, the <a href="https://support.zendesk.com/hc/en-us/community/topics" target="_blank" rel="noopener noreferrer">Developer Community</a> is a great resource to post questions.</div></div><p>The workflow includes these steps:</p><div style="margin-bottom: 20px; text-align: right;">
<button id="master-toggle" class="btn fw-semibold text-dark" data-action="expand" style="background-color: #DEF991; border: none; outline: none; border-radius: 7px; padding: 10px 20px; font-size: 15px; transition: background-color 0.2s ease;" onmouseover="this.style.backgroundColor='#cbef6d'" onmouseout="this.style.backgroundColor='#DEF991'">
Expand all tabs
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('master-toggle');

toggleBtn.addEventListener('click', function () {
const action = this.getAttribute('data-action');
const headers = document.querySelectorAll('.accordion');

headers.forEach(header => {
const isActive = header.classList.contains('active');
const panel = header.nextElementSibling; // Grabs the corresponding .panel container

if (action === 'expand' && !isActive) {
// Open it by simulating a standard click
header.click();
} else if (action === 'collapse' && isActive) {
// Close it by simulating a standard click
header.click();
}
});

// Flip button text and states
if (action === 'expand') {
this.setAttribute('data-action', 'collapse');
this.textContent = 'Collapse all tabs';
} else {
this.setAttribute('data-action', 'expand');
this.textContent = 'Expand all tabs';
}
});
});
</script><div class="accordion"><h3 id="h_01K93G9954TPKZRS1D7GNAV3WJ">Step 1: Add a script to capture the device type when the Web Widget loads</h3></div><div class="panel">
<p>Insert the JavaScript code below when you <a href="https://support.zendesk.com/hc/en-us/articles/4500748175258" target="_blank" rel="noopener noreferrer">set up the Zendesk Web Widget</a> on your website or web app.</p>
<p>Replace <code>WIDGET_KEY</code> and <code>TICKET_FIELD_ID</code> with your own values.</p>
<p>This script detects the device type and operating system based on the customer's browser. It then stores the information in a <a href="https://support.zendesk.com/hc/en-us/articles/5658339908378-Using-messaging-metadata-with-the-Zendesk-Web-Widget-and-SDKs#topic_a1y_cg3_xxb" target="_blank" rel="noopener noreferrer">ticket field through the metadata application programming interface (API)</a>.</p>
<pre class="language-auto">&lt;!-- Start of BRAND_NAME Zendesk Widget script --&gt;
&lt;script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=WIDGET_KEY"&gt;&lt;/script&gt;
&lt;!-- End of BRAND_NAME Zendesk Widget script --&gt;
&lt;script&gt;
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 }
]);
&lt;/script
</pre>
</div><div class="accordion"><h3 id="h_01K93HPAWW64ED26QKX68EH5Y2">Step 2: Retrieve the device information using a CRM action and save it as a parameter</h3></div><div class="panel">
<p>After the script sets the device type in the Zendesk ticket field, use a customer relationship management (CRM) action in advanced AI agents to retrieve it. This works only if you've <a href="https://support.zendesk.com/hc/en-us/articles/8357757925402" target="_blank" rel="noopener noreferrer">connected your advanced AI agent to messaging</a>.</p>
<p>Set up a <a href="https://support.zendesk.com/hc/en-us/articles/8357734565402-Available-CRM-actions-for-advanced-AI-agents-and-Sunshine-Conversations#h_01G7EHG5MBEKHRB4N1WDMZ2CH5" target="_blank" rel="noopener noreferrer">CRM action</a> that saves the Zendesk ticket field value as a <a href="https://support.zendesk.com/hc/en-us/articles/9522180655386-Using-parameters-in-advanced-AI-agents" target="_blank" rel="noopener noreferrer">parameter</a> in advanced AI agents.</p>
<p><img src="https://support.zendesk.com/hc/article_attachments/9888880983194" alt="crm action" width="604" height="490"></p>
</div><div class="accordion"><h3 id="h_01K93H7ERFCXJFCBMFFA6GKPC8">Step 3: Use the device parameter in a dialogue to improve conditional flows</h3></div><div class="panel">
<p>Now that you have the device type as a parameter, you can reference it in a <a href="https://support.zendesk.com/hc/en-us/articles/8357749494810" target="_blank" rel="noopener noreferrer">dialogue</a>. Add <a href="https://support.zendesk.com/hc/en-us/articles/8357733406234-Using-conversation-flows-for-advanced-AI-agents" target="_blank" rel="noopener noreferrer">conditional blocks</a> to your dialogue to route based on device type.</p>
<figure><p><img src="https://support.zendesk.com/hc/article_attachments/9888870263962" alt="decision tree" width="1183" height="935"></p></figure>
</div>