Home ›

Adding the Presence Widget to your Page

The Presence Widget allows you to display the online status and buddy info of users you specify. Follow the first four steps of Adding the Buddy List Widget to Your Page, and then do the following:

  1. Anywhere you want a Presence Widget to appear, you'll include the following markup: 
    <div class="AIMPresenceWidget YourBuddiesScreenName">YourBuddiesScreenName</div>

    Note: The element you use does not have to be a <div> – it can be any element you want. The only requirement is that you include AIMPresenceWidget and the users screen name (without spaces) as the class attribute. You can include as many Presence Widgets on the page as you like.

  2. Include the following markup in the <body> of your page:
    <script language="JavaScript">
  AIM.widgets.presence.launch();
</script>
  3. You'll probably want to come up with your own icons to display the online status of the screen names you've placed in the document, or you can use the ones from any of the widgets. Your CSS should look something like this:
    4. .AIMPresenceWidget {
  text-indent:17px;
  border:1px solid #C0C0C0;
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  background-repeat:no-repeat;
  background-position:2px 3px;
  font:10px verdana;
  position:relative;
  width:250px;
  height:auto;
  padding:5px;
}

.AIMPresenceWidget_offline {
  background-image:url(aimpresence_offline.gif);
}

.AIMPresenceWidget_online {
  background-image:url(aimpresence_online.gif);
}

.AIMPresenceWidget_away {
  background-image:url(aimpresence_away.gif);
}

#AIMBuddyListContainer {
  font: 10px verdana;
}

» Submitted by Developer Network on March 4, 2008 - 10:54pm.