pasted

  <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Lato:400,700">
    <style type="text/css">
      .chat-widget {
        border: 1px solid #bfb0a7;
        bottom: 0;
        box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
        height: 0;
        max-height: 400px;
        max-width: 97.5%;
        position: fixed;
        right: 1.5%;
        transition: all 0.5s ease 0s;
        width: 100%;
        z-index: 10;
      }
      @media print {
        .chat-widget {
        display: none;
        }
      }
      @media (min-width: 31.25em) {
        .chat-widget {
        max-width: 500px;
        }
      }
      .chat-widget-closed {
        height: 36px;
      }
      .chat-widget-opened {
        height: 100%;
        max-height: 400px;
      }
      .chat-widget-button {
        background: #fff none repeat scroll 0 0;
        border: 0 none;
        font-size: 100%;
        height: 36px;
        outline: 0 none;
        padding: 0 1em;
        text-align: left;
        width: 100%;
      }
      .chat-widget-button:active, .chat-widget-button:hover {
        background-color: #e6e0dc;
        cursor: pointer;
      }
      .chat-button-label {
        display: inline-block;
        padding-top: 2px;
      }
      .chat-button-label::before {
        background-color: #00a66e;
        border-radius: 50%;
        color: #594a41;
        content: " ";
        display: inline-block;
        height: 1em;
        margin-right: 0.5em;
        position: relative;
        top: 2px;
        width: 1em;
      }
      .chat-widget-button button, button.chat-widget-button {
       background: #8ee5ee none repeat scroll 0 0;
        color: #594a41;
        margin: 0;
      }
      .chat-widget iframe {
        border: medium none;
        height: 100%;
        max-height: 362px;
        width: 100%;
      }
      .chat-button-control {
        color: #888;
        float: right;
        font-size: 140%;
        font-style: normal;
        font-weight: 400;
      }
    </style>

    <div id="chat-widget" class="chat-widget chat-widget-closed">
      <button id="chat-button" data-ga-label="Chat widget" data-ga-action="Click" data-ga-category="Interface" class="chat-widget-button track tracking">
        <span class="chat-button-label">Have a Question?</span><span class="chat-button-control">+</span>
      </button>

      <iframe id="library-chat-widget" src="https://us.refchatter.net/chat/umtest@chat.refchatter.net?skin=1439"></iframe>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script type="text/javascript">
      $( document ).ready(function() {
      var presence_url = 'https://us.refchatter.net/presence/jid/umtest/chat.refchatter.net/js';

      var chat_status = function(){
      $.getScript(presence_url, function(){
      if (jabber_resources[0].show === 'available' || jabber_resources[0].show === 'chat') {
      $('#chat-widget').addClass('chat-widget-closed');
      }
      else {
      $('#chat-widget').removeClass('chat-widget-closed');
      }
      });
      };

      chat_status();
      });

      $('#chat-button').click(function() {
      $(this).parent().toggleClass('chat-widget-opened chat-widget-closed');
      });
    </script>