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.
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:
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!
Leave a Reply