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

Question

The routing workflow using triggers described in the article Automatically route chats to departments does not take into account a specific department’s online status. Is it possible to show the Web Widget as online for Chat on my webpage only if a certain department is online?

Answer

Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Please post any issues you have in the comments section or try searching for a solution online.

While this is not possible to set natively, you can use the Zendesk API to configure the Web Widget to present Chat only when a specific department is online. Then, whenever a change in the account’s department status is registered, the API updates the settings for the Web Widget as desired based on the current department status.

Below is an example API script that uses these methods. This example shows the Web Widget as online for Chat only when the CRM department is online. When this is true, the department is automatically set to CRM and the option to chat appears for the visitor. If the department's status is not online, then chat is suppressed, and only the other enabled features of the Web Widget (for example, the ticket form or Help Center search) are shown to the visitor.

<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') {
    console.log(dept.name + ' is ' + dept.status);      //optional logging
    zE('webWidget', 'updateSettings', {
      webWidget: {
        chat: {
          departments: {
            enabled: [''],
            select: 'CRM'
          },
          suppress: false
        }
      }
    });
  } else if (dept.name === 'CRM' && dept.status !== 'online') {
    console.log(dept.name + ' is ' + dept.status);      //optional logging
    zE('webWidget', 'updateSettings', {
      webWidget: {
        chat: {
          suppress: true
        }
      }
    });
  }
});
</script>

Note: This example includes console logging for returning department status. These lines are optional and do not affect the functionality of the script, but they may be useful for debugging.