Export (0) Print
Expand All

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.

  1. 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">
    
  2. Load the required JavaScript libraries. For the UI Controls, load a set of JavaScript libraries. Microsoft loads the libraries asynchronously with the loading of the rest of the page. The UI Controls should have minimal impact on your page load times. To load of the UI Controls and required libraries, add the following HTML code example in the HEAD section of your HTML page.
    <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>
    
    For more information, see Loading the Windows Live Messenger Web Toolkit.
  3. 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.
  4. Add the Messenger Application Control to your page. The UI Controls require the msgr:app tag on each page where the UI Controls are used. The msgr:app tag must have a URL to the site's privacy policy, a URL to the site's channel file, a URL to the token refresh page, and an application verifier token. For an introduction to the channel file, see Windows Live Messenger Library Development Basics. To determine which delegation model best fits your application Web site, see Deciding Which Delegation Model to Use.
    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:app tag 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>
    
    For the consent page to show your site's logo, the application-logo attribute must be a URL to a 96 x 96 pixel image of your site's logo.
  5. Add the Messenger Web Bar to your page. The msgr:bar tag should be in the body of the HTML document, anywhere after the msgr:app tag. If you want to use the default msgr:bar tag, use the following code.
    <msgr:bar></msgr:bar>
    
    If you do not want to use the Messenger Web Bar, the msgr:sign-in tag 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.

Show:
© 2014 Microsoft