Zendesk Chat widget can be customized to meet different requirements. One thing we always do at Ultimate is to hide the department dropdown menu. This article aims to walk you through the steps to do so providing the script snippet needed.
If you are interested in knowing and doing more, Zendesk has two great articles:
This article contains the following topics:
Why hide departments?
This is to avoid any prejudice so end users won’t see the dropdown menu in the pre-chat form and therefore cannot select between bot or human department. Below is what it looks like with and without the snippet.
|
With department dropdown: |
Without department dropdown: |
|
|
|
How to hide the department dropdown menu?
You can do so in two simple steps:
2. Add it to your website or help center
Step 1: Edit the snippet
Edit the snippet below by replacing BOT_DEPARTMENT and HUMAN_DEPARTMENT with the names of your departments/groups in Zendesk Chat/Support.
Widget behavior
- When bot is online --> Select bot department
- When bot is offline --> Select human department
<script>
zE('webWidget:on', 'chat:departmentStatus', function(dept) {
if (dept.name === 'BOT_DEPARTMENT' && dept.status === 'online') {
zE('webWidget', 'updateSettings', {
webWidget: {
chat: {
departments: {
enabled: [''],
select: 'BOT_DEPARTMENT'
},
}
}
});
} else if (dept.name === 'BOT_DEPARTMENT' && dept.status !== 'online') {
zE('webWidget', 'updateSettings', {
webWidget: {
chat: {
departments: {
enabled: [''],
select: 'HUMAN_DEPARTMENT'
},
}
}
});
}
});
</script>
|
❗ There are many things we can do with custom script snippets. Hiding the department dropdown menu is a must and the one we use the most often. |
Step 2: Add it to your website or help center
You can hide it by inserting the snippet right below the Zendesk Chat widget snippet on your website or in the help center.
If you're not sure where the widget is on your website, please contact your website developer.
Locating the Zendesk Chat widget in the help center (Zendesk Guide)
Make sure you have added the widget to help center by enabling it in Zendesk Support > Widget.
This adds the Web Widget to the Help Center header document_head.hbs, and displays the widget on every page of your Help Center.
Once it's added, it can be found in Zendesk Guide > Guide Admin > Customize design > Customize > Edit Code > document_head.hbs. See screenshots below if you're having trouble locating it.
