LiveChat visitors Dashing widget

README.md

##Preview

Description

Simple Dashing widget to display LiveChat visitors status (number chatting and number queued).

If the number of visitors waiting to chat is more than 0, a red highlight is displayed.

##Dependencies

rest-client

Add it to dashing's gemfile:

gem 'rest-client'

and run bundle install. Everything should work now :)

##Usage

The easiest way to install is to grab this gist's ID from the URL and use dashing install.

Otherwise, to use this widget, copy livechat_visitors.html, livechat_visitors.coffee, and livechat_visitors.scss into the /widgets/livechat_visitors directory. Put the livechat_visitors.rb file in your /jobs folder.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="livechat_visitors" data-view="LivechatVisitors" data-title="LiveChat Visitors"></div>
</li>

##Settings

You'll need to add a LiveChat login email and API key to the livechat_visitors.rb job file.

The jobs runs every thirty seconds by default, you can adjust that by editing the SCHEDULER line in the job file.

livechat_visitors.coffee

class Dashing.LivechatVisitors extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    @accessor 'livechat_chatting', Dashing.AnimatedValue
    @accessor 'isTooHigh', ->
        @get('livechat_queued') > 0

livechat_visitors.html

<ul>
    <li data-bind-class="status">
    <h1 class="title" data-bind="title"></h1>
        <div>
            <div>
                <h3 data-bind="livechat_chatting"></h3>
                <h4>chatting</h4>
            </div>
            <div data-addclass-danger="queued">
                <h3 data-bind="livechat_queued"></h3>
                <h4>queued</h4>
            </div>
            <p class="updated-at" data-bind="updatedAtMessage"></p>
        </div>
    </li>
</ul>

livechat_visitors.rb

#!/usr/bin/env ruby
require 'rest-client'
require 'json'
require 'cgi'

livechat_email = "LIVECHAT LOGIN EMAIL"
livechat_key = "LIVECHAT API KEY"

uri = "https://#{CGI.escape(livechat_email)}:#{CGI.escape(livechat_key)}@api.livechatinc.com/visitors"

# :first_in sets how long it takes before the job is first run. In this case, it is run immediately
SCHEDULER.every '30s', :first_in => 0 do |job|

  response = RestClient.get uri
  visitors = JSON.parse(response.body, symbolize_names: true)

  states = Hash.new(0)
  visitors.each{|visitor| states[visitor[:state]] += 1 }

  send_event('livechat_visitors', { livechat_chatting: states["chatting"], livechat_queued: states["queued"] })
end

livechat_visitors.scss

.widget-livechat-visitors {

  background-color: #86d751;

  h3 {
    font-size: 60px;
    font-weight: bold;
  }
  
  h4 {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
  }

  p &.updated-at {
    font-size: 10px;
  } 
  
  .danger {
    background: red;
  }
  
}