Systems with multiple departments may have a use case where administrators wish to automatically route chat requests to a specific department.
For example, a customer has a website for Australia and for Germany. There are two support teams represented in Zopim by two different departments. The administrator knows that all the visitors on the Australian website should be served by Department_Australia (static value, manually set by the admin in the script, and doesn’t need to know about the other departments and their statuses). The administrator has the following requirements:
- If Department_Australia is offline, the system hides the widget
- If Department_Australia is online, the system sets the department (Department_Australia) and hides the dropdown list (select department) option from the widget
Using the Web Widget Chat API, you can identify the status of the involved department prior to displaying the widget on the page, using the following actions:
- Hide the widget when the relevant department is offline
- Display the widget and automatically route a potential chat request to the relevant department
<script> zopim(function(){
$zopim.livechat.setOnConnected(function(){
var previous_status;
$zopim.livechat.setOnStatus(function(){
var new_status = $zopim.livechat.departments.getDepartment("your_department").status;
if(!previous_status || new_status !== previous_status) {
if(new_status !== "offline") {
$zopim.livechat.setStatus("online");
} else {
$zopim.livechat.setStatus("offline");
}
previous_status = new_status;
}
});
});
});
</script>
46 Comments
Is there equivalent functionality using Unified Web Widget Syntax to set the widget to Offline status.
Hi Sergiu/anyone,
I can get this working on regular pages but it won't work in the Help Center.
We have one chat department for each locale we offer chat and we can control the department status by using the code above on each of our dedicated language pages. However, this isn't possible in the Help Center template, as it's the one template for all languages, set via 'current.locale.name'. Do you have a solution for this?
Thanks
Hi Mike,
The WW (with the new sets of APIs) docs:
https://developer.zendesk.com/embeddables/docs/widget/core
If you have the WW + integrated chat enabled => you should be using the suppress endpoint to suppress the chat channel:
zE('webWidget', 'updateSettings', { webWidget: { chat: { suppress: true }} });
the setStatus (part of the Chat JS APIs) to offline is not part of the new WW APIs.
If you need to build something that will have a similar logic:
if (the right department is online){//do something}
else {//kill the chat channel in the WW for this customer}
=>
if (department_status && department_status.status === 'online') {
// ONLINE LOGIC
zE('webWidget', 'updateSettings', {
webWidget: {
chat: {
// Set a specific department and hide the department selection drop-down field IF enabled: ['']
// Set a specific department and show only one department in selection drop-down field IF enabled: [departmentName]
departments: {
enabled: [''],
//enabled: [config.departmentName],
select: config.departmentName
},
suppress: false
}
}
});
} else {
// OFFLINE & UNDEFINED LOGIC (undefined = a department with this name doesn't exist OR the department has been disabled)
// suppress the Chat channel as the targeted department is offline
zE('webWidget', 'updateSettings', { webWidget: { chat: { suppress: true }} });
}
==========
Hi Chris,
not sure I understand the task.
Do you want to localise the widget + set the right department based on the the current page locale?
That looks like it should work. I'll give it a shot.
Thanks, Sergiu!
Hi Sergiu,
Yes - the same functionality as the code supplied on this page, basically to:
- Set the visitor department based on the country of page they are on
- Set 'offline' departments as unavailable for chat
- Hide the department field from the chat form
The code on this page works when you have separate pages for each department (as we do on our website) but it does not work on the Help Centre, where the language is selected from the dropdown based on the value 'current.locale.name' in the header template. e.g. I can't code the widget to set Department 'Australia' here as it will set the Department to Australia for ALL Help Centre pages. Hope this explains it better.
Thanks for the help!
Hi Chris,
Why not use the URL for this? All the HC pages contain /hc/locale_code. If a visitor changes the HC locale, the URL changes as well.
You could potentially do it in this way:
if ( window.location.pathname === "/hc/en-us" )
{
// perform all the operations part of this locale like set the department, set titles, etc
}
else if ( window.location.pathname === "/hc/fr" )
{//etc}
2 Notes:
1. Potentially avoid performing certain updates if the user is already chatting:
https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html#isChatting
2. if you plan to add tags, make sure you remove the "old" ones if they are related to a specific locale that is not currently selected.
Hi Sergiu,
Thanks for your help with the suggestion above for the Help Center.
I now face a problem on our implementation of the code on our website, where changing locales (e.g. from de.url.com to uk.url.com) is causing the Department field to no longer be hidden, and the suggested default locale in the dropdown is the locale from the previous URL.
I thought we could rectify this by using the 'logout' command in combination with 'isChatting' to clear the chat cookie if 'isChatting' is false, however it doesn't appear to work. We're at a critical stage in implementing this and I really need to pin the solution down - any assistance you can provide is appreciated!
---code snippet---
zE(function() {
// clear user's widget session if no chat is happening
// to prevent prefilling of fields e.g. after switching the locale
if (!zE('webWidget:get', 'chat:isChatting')) {
zE('webWidget', 'logout');
}
// set widget language
zE.setLocale("de");
// enable chat
$zopim(function() {
$zopim.livechat.setOnConnected(function() {
$zopim.livechat.setOnStatus(function () {
var department_status = $zopim.livechat.departments.getDepartment("German");
if (department_status.status === 'offline') {
$zopim.livechat.setStatus('offline');
} else {
$zopim.livechat.departments.filter('');
$zopim.livechat.departments.setVisitorDepartment("German");
}
});
});
});
});
}
</script>
Best,
Chris
Hi Chris,
this is the problem:
if (!zE('webWidget:get', 'chat:isChatting'))
To just clarify a few things:
Up until recently, the customers that wanted to offer the chat channel part of the Web Widget had to use a combination of Web Widget APIs and Chat Javascript APIs:
https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html
and the code would have looked like this:
~ 2 months ago, as part of the Web Widget APIs, we released most of the endpoints that would help you perform manipulations with the chat area of the widget. We call this "Integrated Chat":
https://chat.zendesk.com/hc/en-us/articles/360002088088--draft-Chat-in-the-Web-Widget-Reference
As a result, we don't have to use the Chat JS APIs anymore, as most of those APIs can be found as part of WW:
https://developer.zendesk.com/embeddables/docs/widget/core
To be able to use the new chat APIs part of the WW, you have to enable the
Integrated Chat (Limited Availability)
option in the Web Widget settings.
To summarize:
if Integrated Chat is enabled => use the chat APIs part of the Web Widget APIs (I strongly recommend this approach)
if Integrated Chat is disabled => use a combination of Web Widget APIs + Chat JS APIs.
In your case, if you are targeting the isChating state + if you have the Integrated chat disabled =>
https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html#isChatting
if I were you, I would refactor the code to ONLY use the Chat APIs part of the Web Widget (Integrated chat is ON). In a previous comment (when I replied to Mike), I shared an example of how this could be done via the new APIs.
Funciona com o widget da central de ajuda e qdo nao permite o acesso ao chat. Usamos um novo recurso de comunicação entre o chat e a central, por meio de esta atualização temos clientes que estão entrando "sem departamento". Temos varios departamentos cadastrados, mas alguns clientes não receberam uma tela para a escolha do departamento. O problema foi resolvido, o problema foi solucionado, mas ainda existe muitos casos nesta situação. Preciso saber se o código está em uso, o que é o problema, se o problema esta entre uma navegação de bate-papo e central ou nenhum encerramento do bate-papo.
I have a scenario,
Suppose we have agents shared between different departments. Let us say dept1 and dep2. In our case let us assume both departments have only one agent say X.
Now a dep1 starts its working hours and the X sets himself as online. For dep2 i use the script suggested by Sergiu Birca . Now the status of dept2 will not change untill and unless X sets himself online again even if the working hours have started. How to go about this problem?
Hello Mandvi Singh,
Hopefully, Sergiu Birca can get back to you soon with a response to your ask.
Best regards.
Hi @Devan can you help me with this?
Hi Mandvi Singh -
Devan has pinged Sergiu Birca, but we'll need his expertise for this issue. It's not an area of the product either Devan or I are well versed in. But we are working to get your question answered either by Sergiu or someone else who has more expertise in this area!
Hi Sergiu Birca Devan - Community Manager Nicole
Any update on https://support.zendesk.com/hc/en-us/articles/360022192234/comments/360003265534 ? We are stuck and it is causing chat to be invisible even in working hours. Need help.
Hey Mandvi,
I'm going to create a ticket on your behalf to see if this is something our Customer Advocacy team can assist with.
You'll receive a follow-up email shortly stating your ticket has been created shortly.
Cheers!
Hello All,
we are trying to set the above on proactive chats triggered at checkout. We want to hide the chat button when the Department (currently the only one we have enabled on Zopim Chat Dashboard > Departments settings) is offline.
Several attempts with code founded above had been performed. Also just using the setHideWhenOffline(true) API. It is not working as expected, since we still have the button and pre-chat form with Department drop-down.
Could you please have a look at this code?
Using only the $zopim.livechat.button.setHideWhenOffline(true):
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?29nSQFx3Efwl66SMRV5xihMMRdDsGHO3";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
$zopim(function() {
//Theme customization
$zopim.livechat.button.setColor('#fc97c6');
$zopim.livechat.window.setColor('#fc97c6');
$zopim.livechat.theme.reload(); // apply new theme settings
$zopim.livechat.departments.label("Our Department Name");
$zopim.livechat.button.setHideWhenOffline(true); //hide the button if the account is offline
//Proactive customization
$zopim.livechat.setOnUnreadMsgs(function (numUnreadMsgs) {
if (numUnreadMsgs != 0) {
$zopim.livechat.addTags("Our TAG");
};
});
});
</script>
<!--End of Zendesk Chat Script-->
Also tried with the below:
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?29nSQFx3Efwl66SMRV5xihMMRdDsGHO3";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
$zopim(function() {
//Theme customization
$zopim.livechat.button.setColor('#fc97c6');
$zopim.livechat.window.setColor('#fc97c6');
$zopim.livechat.theme.reload(); // apply new theme settings
$zopim.livechat.departments.label("Our Department name");
$zopim.livechat.button.setHideWhenOffline(true); //hide the button if the account is offline
//Proactive customization
$zopim.livechat.setOnUnreadMsgs(function (numUnreadMsgs) {
if (numUnreadMsgs != 0) {
$zopim.livechat.addTags("Our TAG");
//Online or Offline depending on department status
$zopim.livechat.setOnConnected(function(){
var department_status = $zopim.livechat.departments.getDepartment("Our department name");
if (department_status.status == 'offline') {
// hide the Zopim Widget or set the account to offline
$zopim.livechat.hideAll();
$zopim.livechat.setStatus('offline');
};
});
};
});
});
</script>
<!--End of Zendesk Chat Script-->
Many thanks!
Please sign in to leave a comment.