How to add a chatroom to your site

Ever wanted to give your blog readers or site users the ability to chat with fellow readers in real-time?

Such a functionality is often useful to build a community around your site, especially tutorial sites where users can learn along with each other while discussing the points where they have some queries. While comments are a definite way for readers to communicate with each other and the author, they lack the real-time factor. Hence the chat is needed.

2 solutions that I know of are:

  • Jappix
  • Meebo

Both allow anonymous logins and embedding of chat-rooms and are free. But Jappix is more elegant in its looks and also implementation.

Here are the steps that will allow you to achieve it using Jappix.

  1. Head over to the Jappix website and select Register.
  2. Enter the details and hit “Here we go”.Be sure to remember the username and password as there will not be any email sent with those details.
  3. If the username you selected is available, you should be displayed a confirmation. Click the Previous link at the top of the box to go to the home page and login with you newly created account.
  4. Once logged in you will be presented with a welcome screen. Hit next or save on that and you mus be seeing something like this.
  5. Click the Join a chat button, enter a name for you room and hit Enter. Join a chat certainly lets you join an existing chat, but if the name entered is of a non existing room then it will be created for you.
  6. If the room is new you should see this message at the top.
  7. Click on the yellow lock to set various options for the room. Be sure to check Make room persistent. Also uncheck Make room members-only. This will allow users to join the chat without going through the hassle of creating an account. Set other options as you may like and save. Now we are set to embed this chat room to the site.
  8. Head to Jappix mini and enter the name of the room you just created.
  9. In the integration options, select your website system, the language and whether jQuery is included on your site.
  10. Copy the code from the installation tab and follow the instructions given for your website system.
  11. For wordpress, open footer.php from the theme editor and paste the code just before the end of the body tag (this is done for optimization reasons) even if the instructions say to put it in the head tag and save the file.
  12. That’s it. Now open up two browsers and you should see you chat appear at the bottom of the window.

Please feel free to leave suggestions, comments or even other solutions that you found useful.

Leave a Reply