How do I customize my chat appearance when we're away or busy?!

Guests see your chat service's presence status in two main ways:

1. As represented on your web page. Chat service snippets automatically include customizable online and offline behaviors. For example, you could opt to have online and offline images for your service. But you can also include Busy/Away appearance with a bit of custom coding; read more on that below.
2. Inside the chat box itself. When guests are on your page viewing your chat box, they will see presence changes in real-time via the presence theme icon.

Service Appearance: Beyond Online and Offline

Chat service snippets (and most of our example code) only handle online and offline status by default (no in-between states) since essentially chat is either available or not available from the guest's point of view. But in some circumstances it is useful to show an Away/Busy appearance distinct from your Offline appearance.

Example view of service in online, away, and offline states.

You can extend your current chat service snippet to include a custom away and/or busy appearance by modifying the offline appearance area in the edit page for your chat service snippet to use some custom JavaScript.  Below is example boilerplate code to do that.

The boilerplate code requires two updates:

1. Replace the "Chat is offline/away/busy." messages with whatever appearance you'd like (e.g. an offline/away/busy image) under those circumstances.
2. Update the url variable in the JavaScript to point to your queue by changing YOUR_QUEUE_NAME to your actual queue name and possibly updating the server as well if you use one of the regional servers.

<div id="lh3-online" style="display:none">
 Chat is online.
</div>
<div id="lh3-offline" style="display:none">
 Chat is offline.
</div>
<div id="lh3-away" style="display: none;">
 Chat is away.
</div>
<div id="lh3-busy" style="display: none;">
 Chat is busy.
</div>
<script type="text/javascript">
  var lh3CheckPresence = function() {
    var url = 'https://libraryh3lp.com/presence/jid/YOUR_QUEUE_NAME/chat.libraryh3lp.com/js',
        script = document.createElement('script');
    script.src = url + '?cb=lh3UpdatePresence';
    document.getElementsByTagName('head')[0].appendChild(script);
  }
  var lh3UpdatePresence = function () {
    for (var i = 0; i < jabber_resources.length; ++i) {
      var resource = jabber_resources[i];
      if (resource.show === 'available' || resource.show === 'chat') {
        document.getElementById('lh3-online').style.display = '';
        document.getElementById('lh3-away').style.display = 'none';
        document.getElementById('lh3-busy').style.display = 'none';
        document.getElementById('lh3-offline').style.display = 'none';
      } else if (resource.show === 'away') {
        document.getElementById('lh3-online').style.display = 'none';
        document.getElementById('lh3-away').style.display = '';
        document.getElementById('lh3-busy').style.display = 'none';
        document.getElementById('lh3-offline').style.display = 'none';
      } else if (resource.show === 'dnd') {
        document.getElementById('lh3-online').style.display = 'none';
        document.getElementById('lh3-away').style.display = 'none';
        document.getElementById('lh3-busy').style.display = '';
        document.getElementById('lh3-offline').style.display = 'none';
      } else if (resource.show === 'unavailable' || resource.show==='xa') {
        document.getElementById('lh3-online').style.display = 'none';
        document.getElementById('lh3-away').style.display = 'none';
        document.getElementById('lh3-busy').style.display = 'none';
        document.getElementById('lh3-offline').style.display = '';
      }
    }
  }
  lh3CheckPresence();
  setInterval(lh3CheckPresence, 10000);
</script>

FAQ URL: