Introducing the Messenger Connect Chat Control

Introducing the Messenger Connect Chat Control

  • Comments 17
  • Likes

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.

image image

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.

image

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

image

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

image

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

image

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.

image

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

image

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.

image

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.

image

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.

What’s next?

17 Comments
You must be logged in to comment. Sign in or Join Now
  • Hey offir. I have just implemented this chat control feature on my website as a prototype.

    The major problem with it is that the blocking of users does not work at all.

    If you like i can give you a link to my page and ill block you and you will see that you can still type in whatever you like and i have tested it with multiple users and browsers and all does not work at all!

    Can this please be looked into as we need it for a campaign we are running this week.

    regards, G

  • Messenger does not work on Latest Mozilla 5.0. It does not allow me to sign-in for chat. Also on IE9 has the same problem

  • @ Offir Bakshitz: Thanks a lot for your help!

  • There is currently no way to prevent people who are not signed-in from seeing the chat content.

    There is a Sign Out option in the drop-down menu in the upper right corner.

  • i have 2 question:

    1. Is there any way to have sign out option?

    2. Would it be possible to hide the chat contents from the auidences who have not signed in?

  • Sorry for not getting back.

    @Dave Shevitz : Objective of having chat rooms on my website is to allow specific audience to group up and chat. eg. the Silerlight auidence for Window Mobile would like to group up and discuss their issues online on my website.(its just an example).

  • There is one common mistake that people do when trying out the chat control; I think it is worthwhile calling it out.

    When you want to test a page with the chat control locally, don't load it using "localhost". You should load it with the same domain that you registered your app to. If the domain does not match, the server will reject the connection.

    When you want to test your page locally without actually deploying the site, a useful trick is to temporarily add a HOSTS entry that maps your domain to 127.0.0.1 (you can achieve a similar result with Fiddler HOSTS support).

  • @MooN2011, @madellinstyle.com: There has been an outage today due to a technical issue. Things should be be fixed by now; give it a try.

    For future inquiries I suggest you use social.msdn.microsoft.com/.../threads where you can get answers to technical questions regarding the Chat Control.

    Thanks,

    Offir

  • For the record, added Channel.html and trackback asp as showed here msdn.microsoft.com/.../ff749529.aspx, doesnt work neither :( deleting all scripts again :(

  • messengerconnectsharingbadge.mslivelabs.com I was testing msg connect sharing badges... this not even work :S  trying msdn.microsoft.com/.../ff796213.aspx

  • Also I saw a BAR implementation in a special MOVISTAR spanish website, didnt remember to recall the URL...

    Making a bar would be amazing ??? any tutorial for this ? thanks !

  • Hi Offir...

    This is amazing, but is not even working in chrome or opera....

    medellinstyle.com/msn.htm

    Also in Mozilla when I chat it says: The following message could not be sent:

    Any ideas????? thank you !!!

  • How can I get an application ID for demo purposes?

    Thx

  • I've problem with Messenger Connect Chat Control

    u said no Arabic Lang support .. Ok, but where's English ?! O_o

    The biggest problem when I try to using chat on my website ( !! I can't !! )

    I see Sending ... after that

    error messages:

    Messenger isn't available right now. Please try again later

    The following message could not be sent :(

    why ?! ?! ?!

  • @anurag.mhaiskar: Currently, there is no limit on the number of "event-name"s you can use in your site. You could potentially create different event names for different sub-sets of users in your sites. This would logically create different chat rooms for you. Serverside, when you generate a page for a particular user, you can can choose which event-name to use for that user and thus assign him to a particular "chat room".

  • Just curious: are you looking into adding a chat room that all users accessing your site would access? Or a chat room that only a select group of users would access?

  • I am truly in love with this concept. Extending this idea, i wish to implement group chats on my websites. say i have a website which have numerous users, i want to avail a facaility of group chat to those users., something like chat room.

    Could you help me on how should i go about developing it ?