Normally LiveAgent chat buttons are displayed on a website when there is at least 1 agent available on chat in the department for which the button is created. When there is no one available the button is either hidden or a contact us button which opens a contact form is displayed.
This default behavior is usually enough but for larger traffic websites it might be a good idea to hide the button outside of business hours even when agents are still online on chats. For example you did not allow them to change their department status or they simply still want to pick up chats from queue.
Since we currently don't have any easy to use setting for disabling chat button outside of business hours we have decided to create this short article to explain how this can be achieved using small javascript code on your website.
The following example depicts how to display ONLINE chat button on your website from 7 AM to 11 PM (UTC) during week days and from 10 AM to 21 PM (UTC) on weekends and automatically switch to CONTACT US button outside of these hours.
1. Create a chat button at Configuration->Chat->Chat buttons and a contact us button (if you want one) at Configuration->Contact form->Contact buttons and copy their IDs from the integration codes.
This is what you are interested in:
2. Use the following script on your website. See the notes below for more info:
<script type="text/javascript">
// week days and times definitions
var workingDays1 = [1,2,3,4,5];
var startHour1 = 7;
var endHour1 = 23;
// weekend days and times definitions
var workingDays2 = [0,6];
var startHour2 = 10;
var endHour2 = 21;
var currentTime = new Date();
var currentHour = currentTime.getUTCHours();
var currentDay = currentTime.getUTCDay();
if ((workingDays1.indexOf(currentDay) != -1 && (currentHour >= startHour1 && currentHour < endHour1)) || (workingDays2.indexOf(currentDay) != -1 && (currentHour >= startHour2 && currentHour < endHour2))) {
// CHAT BUTTON CODE
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://SOMETHING.liveagent.se/scripts/track.js',
function(e){ LiveAgent.createButton('BUTTON_ID', e); });
} else {
// CONTACT FORM CODE
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://SOMETHING.liveagent.sem/scripts/track.js',
function(e){ LiveAgent.createButton('FORM_ID', e); });
}
</script>
Bunch of notes:
- you can define 2 intervals of days and times in the code.
- you need to use numeric representation of days so 0 for Sunday, 1 for Monday, 4 for Thursday and so on.
- you need to use 24 hours format.
- you need to use UTC (Coordinated Universal Time) timezone when defining your days and times.
- you can omit the whole "else" part of the code if you simply want to hide the chat button and you do not want to display anything else instead of it.