Chat Schedule show different class if closed

[kellcomnet]

We are wanting to show one of 3 different divs based on chat state.
A loading div when chat is initializing, then either an open div or a closed div.
Current we are doing the following but I am not a fan of setTimeout, is there an event or something I can key off of to determine when to set the visibility? An event or callback once the schedule has been evaluated would be great.
//*******************************************************************
setTimeout(function () {
jQuery('#ChatLoading').hide();
if (!jQuery('#ChatWrapper').hasClass('purecloud-chat-available')) {
jQuery('#ChatOffline').show();
}
}, 5000);
//*******************************************************************
jQuery(function () {
let chatConfig = {
"webchatAppUrl": "https://apps.mypurecloud.com/webchat",
"webchatServiceUrl": "https://realtime.mypurecloud.com:443",
"orgId": "-----",
"orgName": "-----",
"queueName": "Practice Chat",
"logLevel": "DEBUG",
"locale": "en",
"companyLogo": {
"width": 134,
"height": 134,
"url": "https://orthofi.com/wp-content/uploads/2017/09/nested-tbl-img-1-1.png"
},
"companyLogoSmall": {
"width": 25,
"height": 25,
"url": "https://orthofi.com/wp-content/uploads/2017/09/nested-tbl-img-1-1.png"
},
"agentAvatar": {
"width": 462,
"height": 462,
"url": "https://orthofi.com/wp-content/uploads/2017/09/nested-tbl-img-1-1.png"
},
"welcomeMessage": "Welcome to ----- Chat Support",
"cssClass": "webchat-frame",
"css": {
"width": "75%",
"height": "75%"
},
offlineSchedules: [{
day: 'Saturday,Sunday',
city: 'America/Denver'
}],
onlineSchedules: [{
day: 'Monday-Friday',
time: '1100-1400',
city: 'America/Denver'
}],
chatNowElement: 'ChatWrapper'
};
var chatButton = jQuery('#btnStartChat');
ININ.webchat.create(chatConfig)
.then(function (webchat) {
setTimeout(function () {
jQuery('#ChatLoading').hide();
if (!jQuery('#ChatWrapper').hasClass('purecloud-chat-available')) {
jQuery('#ChatOffline').show();
}
}, 5000);
chatButton.click(function (e) {
let chatFName = jQuery('#chatFName').val();
let chatLName = jQuery('#chatLName').val();
let chatPractice = jQuery('#chatPractice').val();
webchat.getConfig().setData({
firstName: chatFName,
lastName: chatLName,
addressStreet: chatPractice,
});
webchat.renderFrame({
containerEl: 'chatContainer'
});
/*
webchat.renderPopup({
width: 400,
height: 400,
title: 'OrthoFi Chat Support'
*/
});
}).catch(function (err) {
console.log(err);
});
});

[tim.smith]

There are three events you can set callbacks for: chatStarted, chatConnectedToAgent, and chatEnded. See the Chat start and end events section in the chat docs.

[kellcomnet]

Aren't those events for once the web visitor initiates the chat not once the chat is initialized and schedule checked?

[tim.smith]

Correct. I was noting that those are the only events available to you. Nothing else is currently available via events.

You know the drill. https://purecloud.ideas.aha.io/ideas

[anon39326996]

Based on what you described, you should be able to key off of the purecloud-chat-available class as described here: https://developer.mypurecloud.com/api/webchat/schedules.html

Let me know if that does not meet your needs.