IM widgets and Statewide Virtual Reference

We're a statewide service and are open 24/7, and some of our partner libraries are starting to add MeeboMe widgets to their web pages.

Western Oregon University asked, could they have the MeeboMe widget when they were on IM and a link to the statewide virtual reference service when they were not?

I think there are easier ways to do this if you have access to a server-side scripting language, but in case you don't, here's what I came up with JavaScript only:

You can see the example at www.oregonlibraries.net/staff/imtest.html - it gives you a link to our statewide service if I am not online and the phrase "PUT YOUR MEEBO WIDGET HERE" if I am. I don't have a MeeboMe widget, so that will have to do. You can substitute Chatango or Plugoo or a picture of your dog if you like.

My first assumption is that if you are monitoring AOL Instant Messenger, you are monitoring your IM service, so all we have to do is see if you are on AIM or not.

AOL has a description of how to show "IM Presence" information at http://dev.aol.com/adding-web-aim-presence-buddies.

The main thing you need from that page is to register for a WIM key from AOL, http://developer.aim.com/wimReg.jsp. A single key works for all pages in a single directory, but if you want to have the widget on multiple directories, you should register for multiple keys and use them accordingly.

AOL's example uses CSS to change the background color of an area of the screen if the user is online (or away ...).

My idea was to make two boxes that show if the user is online, one with the Meebo Widget and one with the link to the statewide service. If you are on IM, JavaScript/CSS hides the one with the statewide service link. If you are not, JavaScript/CSS hides the one with the MeeboMe widget.

If patrons don't have JavaScript enabled, they'll see both boxes. Patrons may see a flash of both boxes when the screen loads.

In HTML, they two boxes look like:

<div id="widget">
<div class="aolbar">
<div id="AIMBuddyListContainer" wim_key="ca1FpGZayiNrn4FL"></div>
<div class="AIMPresenceWidget calebmcl">PUT YOUR MEEBO WIDGET HERE</div>
</div>
</div>

and

<div id="lnetlink">
<div class="aolbar">
<div id="AIMBuddyListContainer" wim_key="ca1FpGZayiNrn4FL"></div>
<div class="AIMPresenceWidget calebmcl"><a href="http://www.oregonlibraries.net/academic">Chat with a librarian 24/7</a></div>
</div>
</div>

I used the following CSS to hide the boxes:

<!-- The CSS below hides the link to L-net if I am on IM, hides the Meebo widget if you are
not and always hides the buddy list mouse-over thing -->

<style>

#lnetlink .AIMPresenceWidget_online
{ display: none; }

#widget .AIMPresenceWidget_offline
{ display: none; }

#AIMBuddyListContainer
{ display: none; }

</style>

Here's what to do:

1. get a WIM key at http://developer.aim.com/wimReg.jsp
2. copy the <script> and <style> elements of my test page into your own page
3. copy the <div id="widget"> and <div id="lnetlink"> sections of my test page into your page
4. change the WIM keys referenced in both <div>s to yours
5. change the screen names referenced in both <div>s to yours - make sure it is lowercase!
6. see if it works

Make no sense? I'd be happy to walk you through it or help troubleshoot.