base.html.haml

#chat-box.ubuntu.hidden-xs
  .closed
    .pull-right
      = link_to_function content_tag(:i, nil, class: 'glyphicon glyphicon-chevron-up').html_safe, 'chat.show()'
    .m-l-small
      = link_to_function 'Chat with us', 'chat.show()'
  .opened{style: 'display: none'}
    .header
      .pull-right
        = link_to_function content_tag(:i, nil, class: 'glyphicon glyphicon-plus-sign').html_safe, 'chat.maximize()', class: 'maximize', style: 'display: none'
        = link_to_function content_tag(:i, nil, class: 'glyphicon glyphicon-remove-sign').html_safe, 'chat.hide()'
      Live chat
    %ul.history.list-unstyled
    .offline.text-center{style: 'display: none'}
      We're currently offline, you can reach us at #{mail_to '[email protected]', '[email protected]', subject: 'I need help', :encode => :javascript}
    .content
      .text-center.p-t.p-b.bg-color-white
        Loading...
  :javascript
    var chat = new AlgoliaSupportChat();

support.js

//= require jquery.storageapi.min

(function($) {
  var self;

  window.AlgoliaSupportChat = function() {
    this.init();
    self = this;
  }

  AlgoliaSupportChat.prototype = {
    init: function() {
      $(document).ready(function() {
        if (self.inIframe()) {
          $('#chat-box').remove();
          return;
        }
        var url = $.localStorage.get('chatURL');
        var chat_at = $.localStorage.get('chatOpenedAt') || 0;
        if (url && new Date().getTime() - chat_at < 10*60*1000) {
          self.show(url);
        }
      });
    },

    inIframe: function() {
      try {
        return window.self !== window.top;
      } catch (e) {
        return true;
      }
    },

    maximize: function() {
      location.href = '/support' + '/' + 'chat-frame';
    },

    show: function(url) {
      $('#chat-box .closed').hide();
      $('#chat-box .opened').show();
      var tz = new Date().toString().match(/\(([A-Za-z\s].*)\)/)[1] || 'PST';
      if (url) {
        this._display({ url: url, timezone: tz, welcome: ' ' });
      }
      $.post('/support' + '/' + 'chat', function(data) {
        if (data.guest_access_url) {
          $('#chat-box .maximize').show();
          if (!url || data.guest_access_url != url) {
            self._display({ url: data.guest_access_url, timezone: tz, welcome: 'Questions? Come chat with us! We\'re here, send us a message!' });
            $.localStorage.set('chatURL', data.guest_access_url);
            $.localStorage.set('chatOpenedAt', new Date().getTime());
          }
          self._history(data.messages);
        } else {
          $('#chat-box .opened .content').hide();
          $('#chat-box .opened .offline').show();
        }
      });
    },

    hide: function() {
      $('#chat-box .closed').show();
      $('#chat-box .opened').hide();
      $.localStorage.remove('chatURL');
    },

    _history: function(messages) {
      if (messages.length == 0) return;
      $('#chat-box .history').empty();
      for (var i = 0; i < messages.length; ++i) {
        var from = messages[i].from.name;
        if (from.indexOf('Guest') > -1) {
          from = 'You';
        }
        $('#chat-box .history').append('<li><b>' + from + '</b>: ' + messages[i].message + '</li>');
      }
    },

    _display: function(options) {
      if (this.loaded) {
        return;
      }
      var params = {
        anonymous: 1,
        timezone: options.timezone,
        minimal: 1
      };
      if (options.welcome) {
        params.welcome_msg = options.welcome;
      }
      var url = options.url + (options.url.indexOf('?') > 0 ? '&' : '?') + $.param(params);
      if (url.indexOf('https://') !== 0) {
        url = 'https://' + url;
      }
      var w = options.width || '100%';
      var h = options.height || 400;
      var nf = (options.noframes || '');
      $('#chat-box .content').html('<iframe src="' + url + '" frameborder="' + 0 + '" width="' + w + '" height="' + h + '">' + nf + '</iframe>');
      this.loaded = true;
    }

  }
})(jQuery);

support_controller.rb

class SupportController < ApplicationController
  
  # [...]
  
  def chat
    history, guest_access_url = setup_room
    render json: { messages: JSON.parse(history)['messages'].last(3), guest_access_url: guest_access_url }
  rescue
    render json: {}
  end

  private
  def setup_room
    # check if it's a robot
    raise AlgoliaException.new("I'm a robot") if request.user_agent.match(/msnbot|Baiduspider|YandexBot|googlebot|slurp|SiteExplorer|java|Lipperhey|AhrefsBot|DoCoMo|rogerbot|crawler4j|EasouSpider|BeetleBot|spbot|aiHitBot|ia_archiver/i)

    # setup hipchat client    
    client = HipChat::Client.new(ENV['HIPCHAT_TOKEN'])

    # check if at least 1 admin is online
    users = JSON.parse(client.users.list)['users'].select { |u| u['status'] == 'available' }
    raise AlgoliaException.new("We're offline") if users.empty?
    
    # setup room name
    room_name, name = if current_user
      [current_user.email, current_user.full_name]
    else
      session[:hipchat_room] ||= "#{DateTime.now.to_s.gsub(/[^0-9]/, '_')}#{rand(10000)}"
      [session[:hipchat_room], 'Guest']
    end
    
    # try to fetch history
    room = client[room_name]
    begin
      history = room.history
    rescue
      guest_access_url = JSON.parse(room.create!(432759, guest_access: 1))['guest_access_url']
      history = room.history
    end
    room_info = JSON.parse(room.show)['room']
    guest_access_url ||= room_info['guest_access_url']
    
    # notify administrators
    if !room_info['participants'].detect { |p| users.detect { |u| u['user_id'] == p['user_id'] } }
      hipchat_notify! "#{name} wants to chat, please join room '#{room_name}'", notify: true, color: :red, mentions: users.map { |u| u['mention_name'] }, format: 'text'
    end

    return [history, guest_access_url]
  end

end