Getting Started with the UI Controls
The Windows Live Messenger UI Controls provide a simple way for you to build Web-based applications that integrate with Windows Live Messenger. With the UI Controls, you can build presence-enabled instant messaging applications that Web site visitors can use to interact with each other and with other Windows Live Messenger users.
The following steps illustrate how to add UI Controls to your Web site.
Prepare your XHTML document for use with the UI Controls. For the UI Controls, you use transitional XHTML and add the msgr namespace to the root HTML node of the document. The top of your page should look like the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:msgr="http://messenger.live.com/2009/ui-tags">
<script src="http://www.wlmessenger.net/api/3.7/loader.js"></script> <script> Microsoft.Live.Core.Loader.load(['messenger.ui.styles.core', 'messenger.ui']); </script>
Get a Windows Live Application ID for Delegated Authentication. The UI Controls use Delegated Authentication to connect to the Windows Live Messenger service. Delegated Authentication enables users to control which application Web sites can access their data. To learn more about Delegated Authentication, see About Delegated Authentication.
To use the UI Controls, you need a Delegated Authentication Application ID and the Delegated Authentication library. For instructions on how to acquire the Application ID and library, see Getting Started with Delegated Authentication for the Windows Live Messenger Web Toolkit.
Add the Messenger Application Control to your page. The UI Controls require the
msgr:apptag on each page where the UI Controls are used. The
The Messenger Application Control tag should be the first UI Control tag in the body of your page. The following example shows what an
msgr:apptag might look like if the application does not have the delegation token.
<msgr:app privacy-url="http://example.com/privacy.html" channel-url="http://example.com/channel.html" application-verifier-token="123089" token-url="http://example.com/refresh" application-logo="http://example.com/app-icon.png"> </msgr:app>
Add the Messenger Web Bar to your page. The
msgr:bartag should be in the body of the HTML document, anywhere after the
msgr:apptag. If you want to use the default
msgr:bartag, use the following code.
msgr:sign-intag can be used to get a delegation token and sign the user into Windows Live Messenger.
At this point, your page is ready for the UI Controls. For ideas about the UI Controls you can add to your page, see UI Controls.
You can also download code samples and try out the Interactive SDK from Windows Live Messenger Web Toolkit Samples to help you get started.