Musings

Free customised live chat on your website with Google Talk

21st April 2009

There are many live chat apps out there, and they’re mostly very expensive. Good old Google have of course created a live chat functionality, but not particularly advertised it. In fact you have to do a little searching and wrangling to get it to work properly for you.

In this tutorial I’ll show you how to

Integrate the Google Talk / Live Chat functionality into your own website
Customise the visuals for if you’re on or offline
Display the chat window on your own site with a nice lightbox plugin

Here’s what it will look like when it’s finished:

1) Integrate Google Talk in your website

If you don’t already have a Google Account, you’ll need to create one, then if necessary you’ll also want to sign up for the Google Talk service.

We now want to create a badge to put on your website, to do this just visit the Google talk badge page. So long as you are signed in, you’ll see the options for creating your badge. You need to pick ‘Hyperlink and status icon (no frame)’ from the style list, your options should then look something like this:

You can see that they’ve helpfully given you the code to re-create the badge on your own website. You could now just copy and paste that onto your own site, and you’d have Google Talk up and running.

2) Customise the on and offline visuals

The on and offline graphic is fine, but what if we want something a bit more special. We can use a bit of PHP to check what our status is and respond accordingly. Part of the code we were supplied with from the badge was a dynamic link to the status image (which is a small GIF.) We can use PHP to check which image has been loaded, and then use a quick if statement to deal with each case:

&lt;?php $statusUrl = get_headers('http://www.google.com/talk/service/badge/Show?tk=YOURCODE&amp;w=9&amp;h=9');?&gt; 
&lt;?php if (stristr($statusUrl[1], 'offline')) : ?&gt; 
  <div class="offline"> 
    Live chat is currently unavailable 
  </div> 
&lt;?php else: ?&gt; 
  <div class="online"> 
    <a href="http://www.google.com/talk/service/badge/Start?tk=YOURCODE" title="Live chat" target="_blank">Chat with me</a> 
  </div> 
&lt;?php endif; ?&gt;

p.Essentially we’ve just looked for the image name: the offline.gif means you’re offline (obviously!) All done, now you have a customised look for your Google Talk badge.

3) Displaying the chat in a fancy lightbox

For this part we’re going to use jQuery and (really nice) FancyBox plugin, so first things first – download both and include them in your page. To include them, just add the following lines in your <head> tag:

<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript" src="path/to/jquery.fancybox.js"></script>

Making sure that the path and filenames are correct.

Now you have FancyBox running, you can do some really nice things, and I’d encourage you to a) check out the examples on the fancybox site and b) donate the author a beer to say thanks.

We’re going to need to add a little JavaScript to ensure when we click on our Google Talk badge that FancyBox will intervene and beautify it. Again in the header, after the other two includes add this code:

<script type="text/javascript"> 
  $(document).ready(function() { 
    // Fancy box 
    $("a.fancybox").fancybox(); 
  }); 
</script>

That script has told jQuery to intercept every <a> tag with a class of “fancybox” and display it with FancyBox. That means you could effectively use it for any other lightbox needs you have: say for example you wanted to display an image in the FancyBox, you would just use the following code:

<a href="path/to/image.jpg" title="A useful title">Show my FancyBox image</a>

We are however going to use it to display the Google Talk in an iFrame. To do this, we’ll need to alter one of the lines from step 2. We need to make sure the <a> tag has the FancyBox class, it’s not set to open in a new window and that it’s ready to load in an iFrame, here’s the code:

<a href="http://www.google.com/talk/service/badge/Start?tk=YOURCODE" title="Live chat" class="fancybox iframe" >Chat with me</a>

Note that the three changes are that…

We’ve added &iframe to the classes, telling FancyBox to load the target in an iFrame.
We’ve removed the target=”_blank” to ensure it doesn’t open in a new window.
We’ve added the class=“fancybox” to ensure FancyBox loads the chat window.

That’s all folks! As always, if you have any difficulties, or there’s something I’ve missed, please just drop a comment: I always respond.

Discuss

Get involved in the discussion by using the comment form below.

Andrew

21st April 2009

any demo so we can see what you’ve done in action ?

wil.linssen

21st April 2009

@Andrew not as yet, I’ve actually just done it for a site that’s in development so it’s not live yet - I’ll post a link when it is though. Should be pretty easy to test out yourself though, if you’re keen I’ll put together a template you can use?

sahmad

23rd April 2009

Error 404 & not else . . . the badge service of google is down know!

wil.linssen

23rd April 2009

Yea, it was all working beautifully then BAM it goes down. I’m hoping Google fix it soon. Keep your eye on this thread http://www.google.com/support/forum/p/Talk/thread?fid=3f99a54cffe78a8f00046826a0178551&hl=en

Jim Pannell

18th June 2009

Thanks for the great writeup Wil. Will definitely check this out. Do you know if Google have fixed it yet though?

wil.linssen

18th June 2009

@jim yea, I recorded that just today, took them long enough though!

Tim Fletcher

19th June 2009

I picked this up from on of your tweets Wil. I totally did not know about this. Tested it with my apps account and it works great. Think I’ll have to add it to my site. Thanks for the writeup!

Garrett Winder

27th August 2009

Forgot to tell you this is awesome. This is awesome. bye bye.

Mike

5th January 2010

$statusURL[1] says ‘Moved Temporarily’.

Wil Linssen

5th January 2010

There’s all sorts of shenanigans going on with the service, it’s been out of service more than it’s been on. I’ve actually had to abandon it on the sites I was using it.

Shame really, but you get what you pay for, and it was great while it was working.