Embedding a messaging window is rather simple. To do so, you just need to change your Web Settings for your Windows Live account. Once you agree to expose your Messenger status, you can then select one of three embedding choices: full messaging client, a button or just an icon. The details are available from Microsoft but it pretty much just a matter of copying the generated code and pasting it into your web page.
Once you have the Messenger client embedded, there is still one more configuration needed before you can start receiving messages. I point this out because the setting is not mention on the Windows Live page and took me a while to find. Specifically, on your messenger client options, in the “Privacy” section, you need to uncheck the box for “Only people on my Allow List can see my status and send me messages”.
I typically use Trillian and this setting could not be set from that client (or at least I couldn’t figure out how to do so). When I first started playing with the embedded client, I wasn’t receiving messages. It took me the better part of a day to realize the problem and figure out the solution. I have been having trouble with Trillian recently and may have to abandon it.
Now, let’s take a look at the details - apologies for the mess ahead of time.
The three options provide generated code that is easy to include. The Messenger client is pretty much WYSIWYG but you can configure the way it looks via the IM Control API. The status of the target user (the one who will be receiving the messages) is indicated in the Messenger client.
If the full client is too large to include in your web page, you can still indicate the status of the target user and provide a link to a Messenger client (a web page containing the client, perhaps just the client itself). The status is obtained using the Presence API . It provides access to the target user’s Messenger status as well as access to the standard Messenger icons (these can be overridden).
I think the easiest way to get started is to use the generated code for the button:
<script type="text/javascript" src="[code containing the callback]"></script> <div id="Microsoft_Live_Messenger_PresenceButton_[target user id]" style="padding:0;" msgr:width="120" msgr:backColor="#010103" msgr:altBackColor="#010103" msgr:foreColor="#010103" msgr:conversationUrl="[generated url to initiate a messaging session]"></div> <script type="text/javascript" src="[url to register callback]"></script>
I omitted to generated URL's. They are long and distract from the discussion. Generate your own code and examine them.
The first
<script> tag references the source code file which contains the function to be used as a callback. The callback is registered in the second <script> tag. The generated code provides both of these. The second one you will want to leave as. The first is where you can customize the way the target user's presence is visualized.The callback you provide needs to accept a
presence object. There, you can create any HTML you desire and splice it into the document. When the second <script> tag is processed by the browser, your callback will be executed.To start customizing, take the generated code and download the callback code provided by Microsoft. You can access it by opening the URL specified in the
src attribute of the first <script> tag. Once you download it, place it somewhere accessible by your development page and modify it as desired. Be sure to update the src attribute as well.It's worth noting that in order to obtain presence and create a Messenger client, you need to have the user id associated to the account for the target user. When you create the HTML code for a client, button or icon, you can find your account id in the code. It should be obvious but, if not, you can find it at the end of the string value associated to the
id attribute. (It should be 16 characters long.)
No comments:
Post a Comment