Embedded Google Talk for Guests

I've been working on a html webpage and thought I could use the new Google Talk chatback feature. The standard one is a little annoying as it creates a popup windows so I embedded it to my website and added a toggle feature. Here is how-to for creating your own:

Step-1
Copy/paste the customized source code for "Hyperlink and status icon(no frame)" from Google: http://www.google.com/talk/service/badge/New
It should be something like this:

<img style="border: medium none ; margin: 0pt; padding: 0pt 2px 0pt 0pt;" src="http://www.google.com/talk/service/resources/chaticon.gif" alt="" height="14" width="16"><img style="border: medium none ; margin: 0pt; padding: 0pt 2px 0pt 0pt;" src="http://www.google.com/talk/service/badge/Show?tk=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&amp;w=9&amp;h=9" alt="" height="9" width="9"><a href="http://www.google.com/talk/service/badge/Start?tk=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" target="_blank" title="Click here to chat with Kaya">Chat with Kaya</a>

Place it to where you want to show your status message.


Step-2
Take note of the the 3rd address starting with "href=". This is the key to start the chat.


Step-3
Delete the link code

<a href="http://www.google.com/talk/service/badge/Start?tk=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" target="_blank" title="Click here to chat with Kaya">Chat with Kaya</a>

Step-4
and add this one:

<a href="javascript:;" onmousedown="if(document.getElementById('chatIFrame').height==0){document.getElementById('chatIFrame').height=490;document.getElementById('chatIFrame').setAttribute('src','http://www.google.com/talk/service/badge/Start?tk=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');}else{if(document.getElementById('chatDiv').style.display == 'none'){ document.getElementById('chatDiv').style.display = 'block';}else{document.getElementById('chatDiv').style.display = 'none';}}">Toggle Google Talk Chat</a>

Step-5
Change the part with

"http://www.google.com/talk/service/badge/Start?tk=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

with the one you took from Step-2

Step-6
Copy/paste this code wherever you want your chat box to be seen.

<div id="chatDiv" name="chatDiv"><iframe id="chatIFrame" name="chatIFrame" frameborder="0" height="0" scrolling="auto" width="250"></iframe></div>

Toggle Google Talk Chat