Code: Service Rollover for Embedded or Popup Chat Boxes

Note: Make sure you change all the references to {queue} to your queue's name.

Service Rollover for Embedded Chat Boxes

This code will display a subject expert's queue if they are available, but if not, it will check for the generalists' queue. It also provides a place to drop in a custom offline option. If you leave that last (offline) div out entirely, nothing will display at all when both queues are offline.

<div class="needs-js">Chat requires JavaScript.</div>

<div class="libraryh3lp" jid="subject-expert@chat.libraryh3lp.com"
 style="display: none;">Chat with Subject Expert:<br />
  <iframe src="https://libraryh3lp.com/chat/subject-expert@chat.libraryh3lp.com"
   frameborder="1" style="border: 2px inset black; width: 350px; height: 300px;">
  </iframe>
</div>

<div class="libraryh3lp" jid="generalists@chat.libraryh3lp.com"
 style="display: none;">Chat with Generalists:<br />
  <iframe src="https://libraryh3lp.com/chat/generalists@chat.libraryh3lp.com"
   frameborder="1" style="border: 2px inset black; width: 350px; height: 300px;">
  </iframe>
</div>

<div class="libraryh3lp" style="display: none;">
  Both Subject Expert and Generalists are offline.
  PUT YOUR OFFLINE OPTION HERE by inserting whatever HTML you want.
</div>

Then, put the following script as far down your page as possible, preferably just above the close body tag.

<!-- Place this script as near to the end of your BODY as possible. -->
<script
 type="text/javascript">
  (function() {
    var x = document.createElement("script"); x.type = "text/javascript"; x.async = true;
    x.src = (document.location.protocol === "https:" ? "https://" : "http://") + "libraryh3lp.com/js/libraryh3lp.js?multi";
    var y = document.getElementsByTagName("script")[0]; y.parentNode.insertBefore(x, y);
  })();
</script>

Service Rollover for Popup Chat Boxes

This code will display a subject expert's queue if they are available, but if not, it will check for the generalists' queue. It also provides a place to drop in a custom offline option. If you leave that last (offline) div out entirely, nothing will display at all when both queues are offline.

<div class="needs-js">Chat requires JavaScript.</div>

<div class="libraryh3lp" jid="subjectexpert@chat.libraryh3lp.com" style="display: none;">
  <a href="#"
   onclick="window.open('https://libraryh3lp.com/chat/subjectexpert@chat.libraryh3lp.com',
   'chat', 'resizable=1,width=320,height=200'); return false;">
    Click to chat with Subject Expert. This can be an image, whatever.</a>
</div>

<div class="libraryh3lp" jid="generalists@chat.libraryh3lp.com" style="display: none;">
  <a href="#"
   onclick="window.open('https://libraryh3lp.com/chat/generalists@chat.libraryh3lp.com',
   'chat', 'resizable=1,width=320,height=200'); return false;">
    Click to chat with Generalists<. This can be an image to click on.</a>
</div>

<div class="libraryh3lp" style="display: none;">
  Both Specialist and Generalists are offline.
  PUT YOUR OFFLINE OPTION HERE using whatever HTML you'd like.
</div>

Then, put the following script as far down your page as possible, preferably just above the close body tag.

<!-- Place this script as near to the end of your BODY as possible. -->
<script
 type="text/javascript">
  (function() {
    var x = document.createElement("script"); x.type = "text/javascript"; x.async = true;
    x.src = (document.location.protocol === "https:" ? "https://" : "http://") + "libraryh3lp.com/js/libraryh3lp.js?multi,poll";
    var y = document.getElementsByTagName("script")[0]; y.parentNode.insertBefore(x, y);
  })();
</script>