Below is some example code that lets you do basic presence checking on page load. The sample code assumes a embedded widget, but can be easily modified to provide follow-me or pop-up widgets.
<html>
<body>
<div id="online" jid="my-queue@chat.libraryh3lp.com" style="display: none;">
Queue is online. This can be a pop-up if you don't want an embedded widget.
<iframe src="https://libraryh3lp.com/chat/my-queue@chat.libraryh3lp.com"
frameborder="1" style="width:190px; height: 275px;"></iframe>
</div>
<div id="offline">
Queue is offline. Your offline option here.
</div>
<script type="application/javascript">
function show_presence() {
for (var i = 0; i < jabber_resources.length; ++i) {
var resource = jabber_resources[i];
if (resource.show === 'available') {
document.getElementById('online').style.display = '';
document.getElementById('offline').style.display = 'none';
}
}
}
function check_presence() {
var attr = document.getElementById('online').getAttribute('jid');
var jid = attr.split('@');
var url = ['https://libraryh3lp.com/presence/jid', jid[0], jid[1], 'js'].join('/');
document.write('<script type="application/javascript" src="' + url + '?cb=show_presence"><\/script>');
}
check_presence();
</script>
</body>
</html>
Note that when accessing presence information from JavaScript, you may run into issues with browser-caching. A simple work-around is to append a timestamp. E.g.,
'https://libraryh3lp.com/presence/jid/{name}/libraryh3lp.com/image/simpletext?' + new Date().getTime()