Skip to content

Instantly share code, notes, and snippets.

@redox
Last active May 16, 2020 13:13
Show Gist options
  • Star 26 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save redox/9767216 to your computer and use it in GitHub Desktop.
Save redox/9767216 to your computer and use it in GitHub Desktop.
Algolia extends HipChat to customer support
#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 'support@algolia.com', 'support@algolia.com', subject: 'I need help', :encode => :javascript}
.content
.text-center.p-t.p-b.bg-color-white
Loading...
:javascript
var chat = new AlgoliaSupportChat();
//= 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);
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
@teddyzetterlund
Copy link

I'll just leave this link here for reference – since it's where I found this gist: https://blog.hipchat.com/2014/03/25/algolia-extends-hipchat-to-customer-support/

@mfo
Copy link

mfo commented Jan 7, 2015

<3 merci

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment