Zendesk Chat widget can be customized to meet different requirements, such as hiding your department dropdown menu. In this article, we share our experiences of other use cases that might be helpful for you as well.
The use cases covered in this article are:
The widget customizing script snippets should always be added to right below the Zendesk Chat widget snippet on your website or in help center.
If you're not sure where the widget is on your website, please contact your website developer. For help center, read about locating Zendesk Chat widget in help center (Zendesk Guide).
Use case 1: Hide widget when agents are offline
Widget behavior
- When widget is on --> Route chats to bot department first
- When agents are offline --> Hide widget
<script>
window.zESettings = {
webWidget: {
chat: {
departments: {
select:'BOT_DEPARTMENT',
enabled: ['']
}
}
}
};
zE('webWidget:on', 'chat:connected', function() {
var ChatDepartment = zE('webWidget:get', 'chat:department', 'SUPPORTDEPARTMENT');
if (ChatDepartment.status == "online") {
zE('webWidget', 'show');
} else {
zE('webWidget', 'hide');
}
});
</script>
Use case 2: Routing users based on URL
This script snippet is suitable if you want to route users to different bots or departments based on their locale. For example, German users routed to DE bot and French users to FR bot.
You'll need to set up two things in Zendesk for this to work:
- Turn pre-chat form off
- Set a trigger like the example below in Zendesk Chat > Settings > Triggers.
Widget behavior
- Doesn't show pre-chat form after user clicks on the widget
- Re-authenticates to make sure the URL reflects user locale
<script type="text/javascript">
zE('webWidget', 'chat:reauthenticate');
</script>
If you are interesting in knowing and doing more, Zendesk has two great articles: