Bryan Hadaway's Blog
Your Account:   subscribe

bhadaway@gmail.com | Social: Facebook Twitter LinkedIn Google+

The Best Way to Add Chat to Your Website for Free





UPDATE: Google has retired the Google Talk ChatBack Badge (though the page is still live and which made this tutorial possible) in favor of their new acquisition Meebo. I used the old Meebo, which was okay, but IM+ is way better. Anyways, the new Meebo goes a totally different direction basically competing with Wibiya. As of now Meebo is far from a replacement solution to what this tutorial originally offered. Maybe Google will turn it around and offer (at least in addition to what they’re doing now), a simple solution like how the ChatBack Badge used to work.

It might have been right under your nose the whole time, with Gmail!

If you’re not already using Gmail (shame on you), it is not at all a compromise to start using Gmail to get chat on your website setup because you should and want to be using it anyways. Read that article.

Step 1

Signup for Gmail.

Step 2

Go to the Google Talk ChatBack Badge creation page. Click Edit and from the Style dropdown menu choose Hyperlink only (no frame) and then Update badge. Now copy just the URL, it’ll look something like:

http://google.com/talk/service/badge/Start?tk=b01q6amlqftdnh4ql22tqd5h1m9pt06tj9n4jah8mch1uo9fbe7gljokn7ege3d9bck2eea9jhj8jnj5fli4qioave6c5rb5i4gdtr8e99945v2ud67raes01d59ijqtvgnkf3p7q2hs1s8q1u37tt9209v9p8ofdz7foqrth

Step 3

Use the following iFrame script to embed a chat box directly into one of your pages:

<em>If you do not see a chat box below live chat is currently unavailable.</em><br />
<iframe src="http://google.com/talk/service/badge/Start?tk=b01q6amlqftdnh4ql22tqd5h1m9pt06tj9n4jah8mch1uo9fbe7gljokn7ege3d9bck2eea9jhj8jnj5fli4qioave6c5rb5i4gdtr8e99945v2ud67raes01d59ijqtvgnkf3p7q2hs1s8q1u37tt9209v9p8ofdz7foqrth" width="450" height="200" style="border:none">If you're reading this message your browser does not support iFrames.</iframe>

Of course adding your own URL and you may want to change the width, height and other styles.

Notes

Now whenever you’re logged into Gmail and available you’re website visitors can chat with you directly to your inbox. They don’t have to signup for anything or be Gmail users themselves, they’ll simply connect to you as guests. So you may want to have a formal greeting to see who you’re talking to before discussing further.

Please note if you set your Gmail account to invisible the chat box will simply not render on your site hence the warning message I added. Also, a small set back is the fact that whenever someone enters the page where you have chat setup it will open a chat with you even if the person decides not to engage in chat with you.

If you have many visitors I would recommend a popup chat solution instead of the direct iFrame embed. I understand that people hate popups, but when someone chooses to start a chat they expect a popup, you could use this script:

<a href="#" onclick="window.open('http://google.com/talk/service/badge/Start?tk=b01q6amlqftdnh4ql22tqd5h1m9pt06tj9n4jah8mch1uo9fbe7gljokn7ege3d9bck2eea9jhj8jnj5fli4qioave6c5rb5i4gdtr8e99945v2ud67raes01d59ijqtvgnkf3p7q2hs1s8q1u37tt9209v9p8ofdz7foqrth','Live Chat','scrollbars=1,resizable=1,width=525,height=375,top=0,left=0'); return false;" rel="nofollow">Start Live Chat</a>

You also could consider a more styled CSS type popup option like GreyBox. Here’s a list of other possible solution for hover/popup boxes.

You could even share on other pages your availability icon with:

Online Status: <img src="http://google.com/talk/service/badge/Show?tk=b01q6amlqftdnh4ql22tqd5h1m9pt06tj9n4jah8mch1uo9fbe7gljokn7ege3d9bck2eea9jhj8jnj5fli4qioave6c5rb5i4gdtr8e99945v2ud67raes01d59ijqtvgnkf3p7q2hs1s8q1u37tt9209v9p8ofdz7foqrth&w=9&h=9" width="9" height="9" alt="Online Status" style="padding:0 2px 0 0;margin:0;border:0" />

This is the same URL just different parameters, see the front and back: Show?tk= and &w=9&h=9

Let me know if you need any help or have ideas or suggestions to better these techniques.

Thanks for reading, Bryan

Other Reads

  • http://twitter.com/RumbleTalk RumbleTalk

    Well, indeed

  • Griffin Robert

    I love to follow first method. This is method for gTalk. What will you do when you are adding Live2support’s live chat on your website?

  • Griffin Robert

    I love to follow first method. This is method for gTalk. What will you do when you are adding Live2support’s live chat on your website?

  • http://profiles.google.com/live2suport Live2support Inc

    Step by step nice explanation. Live2Support can also be added on website for real time customer chat.