Export (0) Print
Expand All

Chat Control

Ff750122.note(en-us,MSDN.10).gifNote:
Current information about Live Connect is now available in the Windows Live Developer Center. The information in the following sections is provided for legacy purposes only.

You can use the Chat frame control to add a Windows Live chat frame to a webpage. The chat frame enables you to post messages and share them with other users.

Although all visitors to the page can view the chat session, only users who have a Windows Live ID can post messages. You can add a Chat frame to your website by including a <wl:chat-frame> tag. The following image is an example of how the Chat control appears on a webpage.

Messenger Connect Chat control
Ff750122.note(en-us,MSDN.10).gifNote:
The Chat frame control is not available in Hebrew or Arabic.

The following example shows the markup for inserting the Chat frame control into a webpage.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wl="http://apis.live.net/js/2010">
<head>
</head>
<body>
<script src="http://js.live.net/4.1/loader.js"></script>
<wl:chat-frame
    event-name="Example Event Name"
    client-id="<client ID assigned during registration>">
</wl:chat-frame>
</body>
</html>

Note   The Chat frame control is unique among the Messenger Connect UI controls in that it requires no authentication infrastructure on your site. Place the <wl:chat-frame> tag on the page and then reference the loader script in the <head> tag. Unlike with other UI controls, you do not need to first add a <wl:app> control tag.

The following table lists the attributes for the Chat control.

Name

Type

Required

Default value

Description

client-id

String

Yes

none

Specifies the registered client ID of the domain that is hosting the attribute.

event-description

String

No

none

The description of the webpage that receives the chat event.

The event description is used to share a description of the chat control page with the user's friends, or when the user invites a contact to chat.

The maximum length of the event-description string is 512 characters.

event-name

String

No

The URL of the current page

Gets or sets the event name. If no event name is specified, this attribute uses the URL of the current page. You can use the event-name attribute to create several chat windows on the same page, or to share a single chat room between two different pages.

The maximum length of the event name string is 512 characters.

event-embed-height

Integer

No

0

Specifies the height of the embedded video. A value of 0 specifies the existing chat window height.

event-embed-source

String

No

video

Gets or sets the URL of the web resource that is used for embedding video on another webpage.

This value is used when a user chooses to share the chat event with contacts. If the user shares the chat event, a link to the video and a thumbnail will be included in the user's Windows Live feed.

The following example demonstrates how to embed the source for a YouTube video.

event-embed-source="http://www.youtube.com/v/11OOz1I-gCk&hl=en_US&fs=1"

event-embed-type

Enum

No

none

Specifies the type of additional content, such as video, that is embedded in the chat window,.

The following example demonstrates how to specify that the embedded content is video that is Adobe Flash Player compatible.

event-embed-type="application/x-shockwave-flash

event-embed-width

Integer

No

0

Specifies the width of the embedded video. A value of 0 specifies the existing chat window width.

event-thumbnail-url

String

No

none

The URL to a thumbnail image for the preview.

This value is used to display an invitational message in the Messenger Connect client when a contact is invited to chat.

event-title

String

No

The HTML title of the current page

The title of the webpage that contains the chat event.

The event-title is used when a user shares chat control metadata with friends, but does not specify any message.

Although the default value of this attribute is the title of the webpage that contains the chat control, that value can be overridden.

event-url

String

No

The URL of the current page

The URL of the parent page that is hosting the chat control.

The URL is used to share the location of the chat control with a user's friends, or to invite a contact to chat.

If the event-embed attributes are used, the URL should specify the page that contains the embedded video.

height

Integer

No

450

Gets or sets the height, in pixels, of the chat control. The minimum height of the Chat frame Control is 250. If a number smaller than 250 is set, 250 will be used instead.

theme

String

No

light

Specifies the theme of the Chat frame control. Set the theme value to "dark" for the dark theme, or "light" for the lighter theme. If no value is provided, the default is light.

width

Integer

No

300

Gets or sets the width, in pixels, of the chat control. The minimum width of the Chat frame Control is 250. If a number smaller than 250 is set, 250 will be used instead.

The <wl:chat-frame> tag is used to embed a Messenger chat control within an IFRAME element on the page. Users must explicitly sign in, and chat sessions do not persist between pages. If a user opens multiple chat windows, each window is considered as a separate endpoint.

Users can choose between two views of the chat stream: Everyone and Friends. When the Everyone view is selected, postings from everyone on the chat stream are displayed. When the Friends view is selected, only postings from other friends are displayed.

Sites that implement a chat control can use metadata to advertise the chat event to the visitor's Messenger friends, contacts on Windows Live, and other sites such as Facebook.

By default, the shared chat-event metadata can be configured by setting the optional attributes of the Chat Control. If no event attributes have been set, the chat control can also use Open Graph protocol tags.

A user can share chat-event metadata by inviting contacts to chat directly. During sign-in a user can also select a check box that shares a link to the chat page with friends.

If a user selects the Share a link with this page to your friends check box during sign-in, the chat information and an optional comment will be posted to the user's Windows Live feed. If the user sends an invitation to a friend, an instant message will be sent along with a link to the chat page.

Many popular social networking sites use a tag-based metadata schema called the Open Graph Protocol, which is used to annotate webpages and include them in an object graph. The most common current use of Open Graph annotations is to enable site visitors to "like" the page with Facebook. For more information about Open Graph Protocols, see The Open Graph Protocol.

The following example demonstrates a typical Open Graph protocol website annotation. Open Graph <meta> tags that define properties begin with the og: prefix.

<html xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:description" content="loren ipsum"/>
    ...
  </head>

Open Graph properties can also be used as default values for the event details that were not set by the chat-frame attributes. To use Open Graph properties as default values for unspecified event details, add an XML schema namespace declaration referencing the open graph protocol schema, such as:

xmlns:og="http://opengraphprotocol.org/schema/"

The following table shows how the Open Graph tags map to the chat control attributes.

Open Graph tag

Event detail

og:title

page-title

og:url

event-url

og:image

thumbnail-url

og:description

page-description

Show:
© 2014 Microsoft