Meebo Me :: Dressing Up a Widget

In August 2006, Meebo, the web based instant messenger provider, released MeeboMe, a Flash-based chat widget which you can place on your website. MeeboMe allows your visitors to directly chat with you while they're enjoying your site.

Because it's Flash based, you can easily embed it. First, go to Meebo and create the chat widget. Then, add the Meebo generated markup. It's a simple embed tag --

<embed src="http://widget.meebo.com/mm.swf?uSvqMVsYVU" type="application/x-shockwave-flash" wmode="transparent" width="160" height="250"></embed>

You'll get something that looks like like this --



The green button at the upper right disables the widget. The main thing of course is that you can type and send messages. It does that very well. Though it looks like a dialog, it doesn't behave like one. You can't close the MeeboMe widget and you can't move it around.

So, let's make it a dialog!

The first thing that we'll do is add a close button ( I got the icon from Everaldo.com via IconDB ). Then, we'll make the dialog draggable.

To do both, we have to think in terms of layers or containers. The general idea is to put the embedded Flash widget inside a containing div. Then, add the close button on top of the widget. Being on top, our close button covers the green button. The close button has a higher z-index. Here's the code snippet --

<div id="MeeboWidget" class="MeeboTalker">
<embed src="http://widget.meebo.com/mm.swf?uSvqMVsYVU" type="application/x-shockwave-flash" wmode="transparent" width="160" height="250"></embed>
<div class="CloseButton"></div>
</div>

Next, we'll listen for the events at the container level ( id is "MeeboMeWidget" ). This allows us to handle events only at one rather than multiple levels. Note that we're not event delegating -- we're only listening for a click and a mousedown event ( this is used to initiate drag ).

Here's the new MeeboMe dialog --



You can view the code by coming here and then view the source.

Have fun!