How to create a "Chat With The Site Owner" widget?

February 15, 2012 12:02 PM

What is the best way for a web developer to create a custom "chat with the site owner" widget?

A client wants an "ASK THE SITE OWNER" feature on his website. It would be similar to a Google Talk "chatback widget" on a client's website, allowing visitors to see if the owner has logged on, and to send chat messages. But I can't use the official GTalk widget, though, because it's all supposed to have a customized look and feel.

I have started exploring solutions involving Node.js and similar libraries that will let a program talk to XMPP chat services. But I am mostly a front-end programmer and do not have much experience with HTTP headers and stuff like that. I'd like to learn more, and have been working through tutorials, but I wonder what method you might advise for setting up something simple like this without getting too lose.

posted by steinsaltz to Computers & Internet (10 answers total)

Maybe you could use an IRC java applet, and log into an IRC room to chat with your users?
posted by Philosopher Dirtbike at 12:04 PM on February 15, 2012

Response by poster: Oops, I meant to type, "without getting too lost." IRC is an interesting idea. I just have to make sure the whole thing follows a very set-in-stone graphical appearance that has already been decided on by my employer.
posted by steinsaltz at 12:07 PM on February 15, 2012

I suggest using Olark and saving a lot of time, but if you want to learn, try tutorials like these:

Comet (long polling) with Node
Long polling with jQuery
Sockets with Pusher

After looking at those you should have an idea of what other words to search for and to continue studying.
posted by michaelh at 12:09 PM on February 15, 2012

Seconding a hosted solution such as Olark. Check out this useful discussion on various vendors over at HN.
posted by Foci for Analysis at 12:45 PM on February 15, 2012

If you're asking this question, anything other than a hosted solution isn't worth the effort it will take to create and maintain.

I don't mean to discourage you, absolutely try to figure it out on your own! Even just for the learning experience -- just weigh whether or not you want deal with supporting this, before you build it for the client.
posted by wrok at 12:56 PM on February 15, 2012

Response by poster: Yeah, that's a good point. I guess I want the learning experience so I can have more skills to offer. Maybe if it's a simple enough program, it won't become a maintenance nightmare.
posted by steinsaltz at 1:13 PM on February 15, 2012

It's not a custom option, but we use Provide Support at providesupport.com. It's about the easiest thing to implement and use, and it very affordable for our business.
posted by slogger at 1:17 PM on February 15, 2012

I do not have an answer to your question, but alivechat is the hosted service I use and love. Very cheap and totally visually customizable. The benefit of hosted is that the phone app, email app, dashboard, etc. is something you don't have to build either. It seems like a lot of work to create a system that is only for one site. I may be wrong.
posted by Vaike at 2:46 PM on February 15, 2012

Best answer: I wrote something like this for fun a while back while trying to mimic Olark (but with long polling and no IM client integration). Setting up chat between an operator and a site visitor is actually quite straightforward if you're using node.js and socket.io. Setting it up as a SaaS business model in which you have to support multiple sites/companies, or sites per companies, extra operators and with live page tracking is nontrivial. I imagine adding IM client integration complicates it even more.

If I was your employer and was also hosting the sites you design then I would go ahead and try to roll out our own system that we could offer as an add-on to all of our clients.

Keep in mind, creating your own system is going to cost quite a bit more than the $15/month Olark charges, unless you're getting paid $.10/hour =).

For shared hosting setups there are PHP options out there that may not be as real-time nor as nice-looking on the backend but those still might work for the particular client you mention.

Here's some code I just whipped up of a basic, one operator, one site server (node.js):

var io = require('socket.io').listen(8080);
var operator = {};
operator.socket = null;
operator.sockets = [];
io.sockets.on('connection', function (socket) {
  socket.on("operator", function(key,fn){
    // operator has connected
    // authenticate operator 
    operator.socket = socket;
    fn("success");
  });
  socket.on("client", function(name, fn){
      //client has connected
      //add this socket to our operator's sockets 
      operator.sockets.push(socket);
      fn("success");
  });

  socket.on('message', function(msg, fn){
    //am I the  operator or client
    //operator code 
    /**
    msg is object with keys: {to_client, msg} for operator
    **/
    if(operator.socket.id == socket.id){
      for(var i=0;i
          var s = operator.sockets[i];
          if(msg.to_client==s.id){
            s.emit("message",msg.msg);  //send message to client
          }
      }
    }else{
      //client code, send msg to operator
      operator.socket.emit("message",socket.id, msg);
    }
    //callback
    fn(msg); 
  });

  socket.on('disconnect', function () {
    if(socket.id != operator.id){
      console.log("REMOVE SOCKET FROM OPERATOR ARRAY");
    }
  });
});

From the browser, clients connect with socket.emit("client") and your operator connects with socket.emit("operator"). Obviously, you need some sort of authentication for the operator. Here is the JS I pasted into Chrome's console to test out the server-side script shown above:

  //be sure to include socket.io.js (I just pasted the file into the console before running the below code)
  //Connect as the operator

  //connect to the server, register as operator
  var socket = io.connect("http://localhost:8080"); 
  socket.on('connect', function () { 
    socket.emit('operator', 'someauthkey', function (data) {
      console.log(data); //callback function
    });
  });
  //register your receive message callback
  socket.on("message", function(client, msg){
    console.log("client id " +client+" sent message: " + msg);
  });


  //Open new tab in browser for client
  //paste socket.io.js into the console
  //Connect as a client

  //connect to server, register as client
  var socket = io.connect("http://localhost:8080"); 
  socket.on('connect', function () { 
    socket.emit('client', 'MY NAME MAYBE', function (data) {
      console.log(data); //callback function
    });
  });
  //register call back for receiving a message from the server/operator
  socket.on("message", function(msg){
    console.log("received message from operator " + msg);
  });

  //Sending messages
  
  //send a message to the server(to the operator)-> remember this is 1 site with 1 operator
  socket.emit('message', 'sending this message to the operator', function (data) {
      console.log(data); // callback after sending message
    });

  //send a message back to the client

  //NOTE-> CLIENT_SOCKET_ID is the id of a client's socket; you will see one if you emit message from a client
  //Using that to indicate which client this message shoudl go to
  
  socket.emit('message', {to_client: CLIENT_SOCKET_ID, msg: "sending this message to a client"}, function (data) {
      console.log(data); // callback after sending message
    });

Also, I should point out that socket.io advertises itself as supported by iOS Safari and Android WebKit so you could roll our an HTML/JS based mobile solution for the operator quite easily.

That should help get you rolling.
posted by trueluk at 10:11 PM on February 15, 2012 [2 favorites]

Best answer: Yeah... socket.io is the bomb for this kinda thing. Totally a good thing to learn to do... if you get good with this stuff, the demand for great javascript devs is totally starting to pick up.

Still, though... not an impossible task to create something fun like you describe. Maybe a pain in the ass to maintain, though? You might be able to get going pretty quick with one of them new fangled node.js app hosting services...

If it were me, I'd look for a more "out of the box" solution... something that just bridges the gap between google talk -- which presumably the client already uses -- and your website.
posted by ph00dz at 6:08 AM on February 16, 2012