How to add Yahoo Chat Pingbox to your website

Yahoo! Messenger Pingbox allows you to have an IM like interface in your blog or any website. Visitors of your site can chat with you real time whenever you are online. Since it becomes a part of your blog it doesn’t require your visitors to install any application. This is very similar to the Google Talk ChatBack Badge from Google that you can use to chat with visitors to your website.

If I am online you will see me as “Available”. All messages sent to me when I am “Available” will be sent real time to my Yahoo! Messenger. On my side I can see from my Yahoo! Messenger all visitors browsing the page:



I sent a message from the Pingbox and it appeared on my screen as “Visitor 1”:




I can then reply to “Visitor 1” using the YM window above. Pretty cool isn’t it?

To start making your own Pingbox just go to the URL below:

http://ph.messenger.yahoo.com/pingbox/

Login using your own Yahoo! account then click the “Create Pingbox” button:



The first step pf creating a Pingbox is to chose a background theme. Choose what design suites your taste:



Make sure to enter your customized greeting, offline message, display name and name of Pingbox (will appear as a group in your YM contacts):



Then click the Next button to access the next page where we could get the script. The second page allows you to choose which website to add Pingbox, choose “Code only” if you want to directly paste to your HTML file otherwise choose your type of website.

The next step will be setting the size of the widget, in the example below I chose the recommended 240 X 240 px size. The third box will be the actual code, copy the code only AFTER you choose the size and type of website:



You can paste the code into your HTML files using your favorite HTML editor and test it using your web browser. Below is the screenshot of the steps I did: