How to add Yahoo Chat Pingbox to your website

Posted on November 20, 2008 at 5:34 am

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:

image

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

image

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:

image

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

image

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

image

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:

image

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:

image

Have fun adding your own Pingbox to your webpages.  You can use it to gather realtime feedback from your viewers.

Ben Carigtan shows you how it’s done.

» Filed Under Cool Websites

Related Posts

Comments

6 Responses to “How to add Yahoo Chat Pingbox to your website”

  1. mmg1818 said on : November 20th, 2008 at 1:06 pm

    Thanks.


  2. freepayabe said on : December 12th, 2008 at 5:51 am

    thanks! i see the pingbox is on if my friends are online


  3. printen said on : March 12th, 2009 at 1:24 am

    where can i paste the code…


  4. venkat said on : March 14th, 2009 at 5:17 am

    I installed pingbox code in my page. I can see with IE but not with firefox.

    Should I add any other code for that?


  5. stephan said on : October 17th, 2009 at 5:34 pm

    Thanks for this post.

    I found a bug. Does not work with IE or Firefox if it has never gone on to the yahoo website, a cookie seems to be needed !!!

    If anybody has any good ideas on how to correct this, let me know!

    Best regards.


    Pingbacks
  1. What’s new in Yahoo! Messenger 9? Says:

    [...] To remedy this problem, a contact search bar is now available.  Status messages are also easily changeable as the GUI provides editable status message textbox on the main window. The Pingbox visitors on your Pingbox appear as groups on your contact panel.  (We have a separate article for Yahoo! Pingbox here) [...]

    November 30th, 2008 at 5:15 am
Please post your comments/suggestions!