jQuery UI Chatbox Plugin

Souce code

This is a jQuery UI plugin I wrote as part of a data collection tool for the social network analysis project I've been working on, in which this plugin serves as the front end of a simple Comet chat server. It is a pure UI plugin so you can easily plug it into whatever communication protocol of your choice, some may find this useful.

It works with jQuery 1.4.2 and jQuery UI 1.8.2, which can be get from here.

The plugin is tested on Firefox and Safari. It works on IE too, but with a defaced UI and the missing "close" icon. I will try to fix this issue in the future.

To see an in-page demo, click the following link:

Add Chatbox

You can add multiple chat boxes, and the default behavior is to broadcast messages to all other boxes.


I assume the basics of javascript, HTML, jQuery and jQuery UI, here are the few options you can customize for your chat box:

      	options: {
	    id: null, //id for the DOM element
	    title: null, // title of the chatbox
	    user: null, // can be anything associated with this chatbox
	    hidden: false, // show or hide the chatbox
	    offset: 0, // relative to right edge of the browser window
	    width: 230, // width of the chatbox
	    messageSent: function(id, user, msg){
		// override this
		this.boxManager.addMsg(user.first_name, msg);
	    boxClosed: function(id) {}, // called when the close icon is clicked

To create a chatbox at the bottom of the browser window with an offset of 200px to the right edge, use the following code:

          // to create
          $("#chat_div").chatbox({id : "chat_div",
                                  title : "Title",
                                  user : "can be anything"
                                  offset: 200,
                                  messageSent: function(id, user, msg){
                                       alert("DOM " + id + " just typed in " + msg);
          // to insert a message
          $("#chat_div").chatbox("option", "boxManager").addMsg("Mr. Foo", "Barrr!");

Use the following standard jQuery UI approach to access the options after the chat box is created:

      // getter
      var offset = $("#chat_div").chatbox("option", "offset");
      // setter, to change the possition of the chatbox
      $("#chat_div").chatbox("option", "offset", 300);

To change the look and feel of the chatbox, try applying different jQuery UI themems.


As other jQuery UI components, this plugin is dual licensed under MIT and GPL v2 licenses. License

Last updated by Wen (Febrary 28, 2011)