Code Samples

Note: Make sure you change all the references to {queue} to your queue's name, and that you swap in your skin ID number from the Chat Skins management page for the 123456 in the skin argument.

Display an embedded chat box if its queue is online, and hide it if its queue is offline.

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

<div class="libraryh3lp" jid="{queue}@chat.libraryh3lp.com"
style="display: none;">
  <iframe src="https://libraryh3lp.com/chat/{queue}@chat.libraryh3lp.com?skin=123456"
  frameborder="1" style="border: 2px inset black; width: 350px; height: 300px;">
  </iframe>
</div>

<div class="libraryh3lp" style="display: none;">
  PUT YOUR OFFLINE OPTION HERE by inserting whatever HTML you want.
  You might point to your e-mail ref service or to your 24/7 backup chat service.
</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>

Display online/offline status buttons. If online, provide a pop-up chat box.

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

<div class="libraryh3lp" jid="{queue}@chat.libraryh3lp.com" style="display: none;">
  <a href="#"
   onclick="window.open('https://libraryh3lp.com/chat/{queue}@chat.libraryh3lp.com?skin=123456',
   'chat', 'resizable=1,width=320,height=350'); return false;">
    Click to chat. This can be a customized image.
  </a>
</div>

<div class="libraryh3lp" style="display: none;">
  PUT YOUR OFFLINE OPTION HERE by inserting whatever HTML you want.
  You might point to your e-mail ref service or to your 24/7 backup chat
  service.
</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>

Display online/offline status buttons. If online, provide a Follow-Me style chat box.

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

<div class="libraryh3lp" jid="{queue}@chat.libraryh3lp.com" style="display: none;">
  <a href="#"
   onclick="libraryh3lp.openChat('https://libraryh3lp.com/chat/{queue}@chat.libraryh3lp.com?skin=123456',
   {width:320,height:350}); return false;">
    Click to chat. This can be a customized image.
  </a>
</div>

<div class="libraryh3lp" style="display: none;">
  PUT YOUR OFFLINE OPTION HERE by inserting whatever HTML you want.
  You might point to your e-mail ref service or to your 24/7 backup chat
  service.
</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,popup";
    var y = document.getElementsByTagName("script")[0]; y.parentNode.insertBefore(x, y);
  })();
</script>

Need more? See the Service Rollover Code Examples