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

Tip: This article provides code to use for the Web Widget. For an account with the Legacy chat-only widget, see the article: (Legacy Chat) How do I change the status of Chat in the widget based on department availability? To check which widget you have with your account see the article: Which widget do I have with my Zendesk account?

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.