Introducing the Messenger Connect Chat Control : Azure Feeds

Introducing the Messenger Connect Chat Control

by Offir Bakshitz via Windows Live for Developers on 11/3/2010 10:32:46 PM

A few weeks ago we announced that Messenger Connect was out of beta and available worldwide. I wanted to take this opportunity to share some details about one of the features I worked on: the Messenger Connect Chat Control. This control allows people on your site to chat in real time. Any user can view the chat session. To participate, a user simply needs to sign-in with a Windows Live ID, that is, with a Hotmail or Messenger account.

The Chat Control currently comes in two color themes: light and dark. Here are a couple of snapshots.

How does the Chat Control add value to your site?

The Chat Control adds value to your site in a number of ways. Here are just a few.

Users will spend more time on your site

Your users will be more engaged with your site’s content, because they’ll be able to talk about it with others in real-time.
It’s great for real-time events but it is also a cool commenting tool. When you have live content, such as a video stream of an event, adding nearby real-time chat capabilities is nice because your users can talk about what they see as it is happening. Because the Chat Control preserves the chat history for a while, adding it next to an article or some other static content makes it a great commenting gadget that has the added value of updates in real time.

You’ll acquire new users through the social networks of your existing users

Sharing and inviting is easy with the Chat Control. Users can invite their friends to participate in the chat, and can post to their news feed so that their friends see it. This means that you’ll acquire more new users through the social networks of your existing users.
As users invite their friends, they can have private conversations in the Chat Control without having to leave your site.
If a user has connected a Windows Live account to Facebook, that user can easily invite Facebook friends into the chat and write on the wall.

It requires no resources from your site and yet it is scalable and easy to add

The Chat Control comes with the scale and reliability of the Messenger service. The Chat Control can handle many users, right out of the box – you don’t need to invest in additional hardware or bandwidth, and don’t need to write any server code.
You can easily add the Chat Control to your site. Just register for an application ID, add a few lines of code to your HTML, and you’re done.

You’re in control

You can moderate the content of the chat. You can delete messages and can block users from posting to any chat in your site.
You can create more than one chat in the same page, around different topics.
You can have a conversation on the same topic appear on more than one page in your site.
The Chat Control loads asynchronously and runs in an IFRAME. This means it will have minimal effect on your page’s load time and resources.

Look and Feel

A user who browses a site with the Chat Control sees a live steam of messages.

The user is requested to sign in with a Windows Live ID in order to participate.

Once signed in, the user can post messages. Messages posted by the user’s friends are highlighted in light blue.

When the user applies the Friends filter—as indicated by the yellow arrow—the user sees only messages made by the user’s friends.

If the rate of message posting becomes high, the Messenger service arranges people into virtual subgroups so that they are not overwhelmed with messages. When this happens, the user is still guaranteed to see all messages made by friends.

Invite and share experience

As shown above in the sign-in screen, the user can select a check box to indicate the desire to share a link with friends. If the user selects that check box, information about the page will be posted to the user’s feed in Windows Live. If the user has connected a Windows Live account to a Facebook account, the information will also be posted to the user’s wall on Facebook.

In addition, the user can choose to invite friends to participate in the chat. Clicking on the Friends tab shows friends who are currently online.

Choosing a friend in the list and then clicking Invite starts a private IM conversation with the user’s friend.

The friend who is being invited will see the conversation anywhere that friend is signed into Messenger.

Administrative capabilities

The Chat Control wouldn’t be complete without some administrative capabilities. The owner of the application ID—that is, the user whose Live ID was used to register for the application ID—has additional rights. Once you sign in to the Chat Control with the Live ID of the application owner, you will have the addition functionality of blocking users and deleting any messages.

Once a user is blocked by the owner of the application, that user will not be able to publish content to any chat on the site.

And obviously, users can also delete their own messages.

Adding the Chat Control to your site

Let’s get down to the details of what it takes to add the Chat Control to your page. Here is an example of a minimal page that has only the Chat Control in it.

Interesting lines to note here:

Line 4—Declaring the wl XML namespace. This namespace is used to add Windows Live Messenger Connect custom tags. The Chat Control is one of those tags.
Line 7—Getting the Messenger Connect loader. This is a client-side loader that loads Windows Live scripts asynchronously without blocking the page load time.
Line 10—Adding the Chat Control custom tag:

o Line 11—Your application ID.

o Line 15—Here you give a name for the topic of conversation. When you place more than one Chat Control with the same event-name attribute in your site, they all render the same conversation.

This page can be a static HTML page. No server code is needed. When the Messenger Connect loader is loaded by the browser, it runs client-side code that scans the page looking for HTML tags prefixed with wl. After that, some client-side code runs and adds HTML elements to those tags, and then the Chat Control is rendered.

You may register for an application ID by going to http://manage.dev.live.com.