Can I configure the Web Widget (Classic) to present Chat on my webpage only when a specific department is online?

Question

The routing workflow with triggers in Automatically route chats to departments does not account for a specific department’s online status. Can I show the Web Widget as online for Chat on my web page only when a specific department is online?

Answer

Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Post any issues in the comments section or try to find a solution online.

Tip: This article provides code for the Web Widget (Classic) in a Zendesk account. To check which widget you have, see Which widget do I have with my Zendesk account?

Zendesk does not natively allow the widget to appear only when specific departments are online. You can add a custom script with the Zendesk API. With a custom script, you configure the Web Widget (Classic) to show Chat only when a specific department is online. The script detects a change in the account’s department status and the API updates the Web Widget (Classic) settings based on the current status.

The example below applies this method. It shows the Web Widget as online for Chat only when the CRM department is online. If the CRM department is not online, the script suppresses Chat. When the script suppresses Chat, the Web Widget (Classic) shows only other features that you turned on for the visitor, such as the contact form or Help Center search.

<script id="ze-snippet" 
src="https://static.zdassets.com/ekr/snippet.js?key=ACCOUNT_KEY"> </script>

<script>
zE('webWidget:on', 'chat:departmentStatus', function(dept) {
  if (dept.name === 'CRM' && dept.status === 'online') {
    zE('webWidget', 'updateSettings', {
      webWidget: {
        chat: {
          departments: {
            enabled: [''],
            select: 'CRM'
          },
          suppress: false
        }
      }
    });
  } else if (dept.name === 'CRM' && dept.status !== 'online') {
    zE('webWidget', 'updateSettings', {
      webWidget: {
        chat: {
          suppress: true
        }
      }
    });
  }
});
</script>