Add A Google Talk chatback badge to your site!
March 27, 2008
This lesson is geared toward a small business owner who has a web presence and a Google account. You can add a floating, ever-present Google Talk chatback badge to your site to your site in minutes that will let your website visitors ask you any questions they might have while surfing your website.
Note: As of this article, the chat widget was available for both Gmail and Google Apps accounts. Also, important to note is that at this time the chat widget is tied to a single user, meaning it will only show availability for a single user. Leaving your Gmail app open during peak surfing hours would be a good idea. Hopefully, Google will work in a feature for Google Apps users that lets you use an e-mail alias (sales@yourcompany.com) that can notify a list of users on your domain of the incoming guest chat. But I digress…
Step 1: Get your Google Talk chatback badge code…
- For Gmail.com users: http://www.google.com/talk/service/badge/New
- For Google Apps users: http://www.google.com/talk/service/a/your-domain.com/badge/New (replace “your-domain.com” with your domain name tied to Google Apps)
Step 2: Grab the code below that you will paste at the bottom of your webpage HTML (just before the </BODY> tag. If you aren’t familiar how to do this, you can show your web designer this post as I’m sure they’ll be able to do it without much headache.
UPDATE: I’d neglected to include a style property below in my original post. It’s best to set a z-index of 9000 for the surrounding div. Z-index tells the browser on what three-dimensional plane or level it is on. Most page elements inherently are at 0 or 1 by default, but setting a high z-index ensures that no matter how complex your website layout is, the badge will be on top. If its still hidden, try increasing the z-index value.
UPDATE 2: Recently I found a help document that describes how to adjust the style of your chatback badge. Use my CSS and HTML positioning to help you render the badge, but use this help document to help you configure how your badge looks.
<div style=”position: fixed; bottom: 0px; right: 0px; width: 200px; height: 60px; z-index: 9000;”> <!– Insert your GOOGLE IFRAME code from step 1 here –> </div>Once you’ve inserted the code from Step 1 into my wrapping DIV code from Step 2, you’ll just need to insert it at the end of any page you’d like the chat badge to appear on. Paste the whole thing onto your website just before the closing BODY tag.
The final code should look something like this:
<div style=”position: fixed; bottom: 0px; right: 0px; width: 200px; height: 60px; z-index: 9000;”> <iframe src="http://www.google.com/talk/service/badge/Show?tk=z01...6r&w=200&h=60" frameborder="0" width="200" height="60"></iframe> </div>I’ve included one on this page as an example. Look in the bottom right of your browser window! Let me know what you think of the tutorial! Good luck and happy returns!
Thank you for ur tip. But when you trying to validate it, you’ll get an error: there is no attribute “allowtransparency”.
Do you know how to fix it?
Hey Sergey… yea… I guess you’ll have to use a little javascript. Since I wasn’s sure what javascript libraries you have running on your site already, I came up with a pretty standard javascript to make it happen. Keep in mind that from my example above I removed the allowtransparency attribute and also added an ID to the IFRAME to make it happen. You can see what i mean by viewing source on this example. You can see my test page validates fine.
Good Luck!
Hey Chris:
I am so happy to find this info. I implemented it on my site. The thing I hate though is google is constantly setting me “idle” and showing “this person may be away from the computer”. It seems like yours always says “Available”. How can I do that?