Hello, please sign in or register
You are here: Home

Windows Live Chat Control - the non declarative way

So the windows live chat control is a really easy to deploy, drop-in-and-play instant messaging service. Which looks a little like this...

To get this chat widget you can follow the tutorial here .... http://msdn.microsoft.com/en-us/library/ff750122.aspx

The tutorial requires a splattering of HTML like so...

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wl="http://apis.live.net/js/2010">
<script src="http://js.live.net/4.0/loader.js"></script>
   event-name = "Example Event Name"
   client-id="[put your appid here]">

... however?

NO space for Namespace

For large websites, complex templates etc adding the "xmlns:wl="http://apis.live.net/js/2010" namespace isn't always feasible. So what's the alternative...

The imperative way saves the day

Rather than having to use the <wl:chat-frame> otherwise known as the declarative method...  (see more on the difference at http://msdn.microsoft.com/en-us/library/ff750239.aspx)

... We can use pure javascript to bind this widget to an html tag of our choosing.




<html xmlns="http://www.w3.org/1999/xhtml">
<script src="http://js.live.net/4.0/loader.js"></script>
<script type="text/javascript">

Microsoft.Live.Core.Loader.load(["Messenger.UI.ChatFrame"], function () {
            { eventName: 'Word', clientId : '000000004002CC1F' },

<div id="chatDiv"></div>

The aforementioned code does the following things
  1. Loads in loader.js
  2. Loads in the additional module we need "Messenger.UI.ChatFrame"
  3. Calls the $create method on callback with the appid and the target element of the chat widget.


Is a neat little elusive function which underlines all the UI widgets in the MWT arsenal... more info can be found at http://msdn.microsoft.com/en-us/library/ff355367.aspx

Simply though this is what $create is doing for us...
  1. For the widget defined in the first parameter
  2. And Attributes defined in the second parameter, i.e. clientId, eventName, theme, height, width. 
  3. It Bind it to the element defined in the Fifth parameter: note: i'm using $get which comes with the Microsoft JS API it is synonymous with document.getElementById.


Oakley Sunglasses hermes belt
Created 09/09/17
previous | next

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Email never shown*
Home Page


Comment | flag


Bookmark and Share