Google Chatback Inline Hack

Sometimes I'd like to be able to chat with people through my website. My friend Eli told me about Google Chatback. It's got some nice simple embedded examples, but I wanted one that would be a link that expanded into an inline chat. This would let me chat with people on same the page instead of a new window.

So here's what I threw together. You could polish it with jQuery, or css, or whatever you wanted. It starts with a link and a hidden iframe. Then you click the link and the chat box appears. This might not be the best way, but it works and is pretty simple.

The HTML

You will need to have your unique chat url. You can find that by signing into the Chatback page, then finding your chat url in the iframe src.

<img src="http://www.google.com/talk/service/resources/chaticon.gif" alt="">
<img src="http://www.google.com/talk/service/badge/Show?tk=z01q6amlqja000t2aeaph5erqqcn5bvnh4mro5rsc6u2kj568dhhf4340scdhu063ccesi698qhb10vaa652s502srolmn8iuhilua1e3cb0iuho18dhpht9im4ql2dq7ff6p0mur286reg22od8haf3uk5o0q00il1ktn88q&w=9&h=9" alt="">

<a href="#" onclick="startChatback('http://www.google.com/talk/service/badge/Start?tk=z01q6amlqja000t2aeaph5erqqcn5bvnh4mro5rsc6u2kj568dhhf4340scdhu063ccesi698qhb10vaa652s502srolmn8iuhilua1e3cb0iuho18dhpht9im4ql2dq7ff6p0mur286reg22od8haf3uk5o0q00il1ktn88q', 'chatback');" title="Click here to chat with Leslie Steward">Chat with Leslie Steward</a>
<iframe id="chatback" src="" style="display:none;"></iframe>

The Javascript

You can put this inline or in the webpage header. This assumes you have an iframe with the given id and an empty source, like in the html above.

function startChatback(src, id){
	chatbox = document.getElementById(id);
	chatbox.src = src;
	chatbox.style.display = 'block';
}

The Example

Chat with Leslie Steward

The Disclaimer

This code only works on my personal computer on days that are prime. It is untested, unreviewed, and unlikely to work for anyone else. It can probably also be done much easier with jQuery. I hope it works for you, but this is where the technical support ends.