Live Chat in WordPress blog : Create a Chat Page using Windows Live

A Live Chat box in your blog can be funny or very useful according to your need. For example, if you run a business, it is useful keep in touch with your clients using a Live Chat box or if it is personal blog, a live chat can be funny way to communicate with your online friends.

Unlike many paid Flash based Live Chat utilities, this method has some extra advantages:

• This Live Chat box is fully free
• Users can this Live Chat with or without signing in
• You can add the Live Chat box on every page (like in the sidebar) or create a separate page
• You can customize the width, height, line color etc of the Live Chat box
• You can chat with your visitors without being in the website : like from the Windows Live Messenger Window
• The Live Chat system has a in built character verification like Recaptcha to fight spams.
• Other settings like appearing online, offline, busy etc can be controlled from Windows Live Messenger

In this tutorial, we will discuss on how to create a separate live chat page in WordPress blog.

Get the Live Chat box iframe code first

Sign In using your Windows Live ID first; then go to this page of Microsoft Windows Live Messenger.

First, click the Home option under Web Settings in the left handed pane:

Now, check the option (if you have not checked it before) saying “Allow anyone on the web to see my presence and send me messages” and Click Save.

After saving, click the Create HTML link on the left sided pane. You will get the needed HTML iframe code for adding the Live Chat box in your blog. Copy the code for Live Chat Box and paste in Notepad. It will look like this:

<iframe src=”http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=youwillgetyournumber@apps.messenger.live.com&mkt=en-IN” width=”300″ height=”300″ style=”border: solid 1px black; width: 300px; height: 300px;” frameborder=”0″ scrolling=”no”></iframe>

Customizing the Live Chat box and adding to a WordPress page

First, you can get the color (theme) you need from the above said webpage, select the one you prefer, we have used the default one. Secondly, you can set custom width and height of the Live Chat box. Thirdly, by default the border is black, which does not looks great, you can change it if you like. For example, we have customized the Live Chat box code in this way:

<center>

<iframe src=”http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=youwillgetyournumber@apps.messenger.live.com&mkt=en-IN” width=”750” height=”600” style=”border: #BED6E0 1px solid; width: 750px; height: 600px;” frameborder=”0″ scrolling=”no”></iframe>

</center>

Now, in Your WordPress blog, click “Add New” under Pages; switch to HTML mode, paste the code. Give the Page name something like “Live Chat” and Publish it. Do not switch to Visual mode in your WordPress writing panel, it will make the Live Chat box iframe code get vanished. Publish your Live Chat page while in HTML mode and close the Browser tab or window where you were writing.

You will get a Live Chat box looking like this :

If someone clicks the Begin a conversation link, and send a message (either as Visitor or as Signed in), you will get immediate alert Window in Windows Live Messenger in your Windows 7 Taskbar (you need to run and logged in, obviously):

Click it to bring the messenger chat window for conversation. In this way, you can have a live chat with your visitors from your Windows 7 desktop.

Creating a Group for Live Chat

Furthermore, you can create a Group from your Windows Live Messenger  from Contacts > Create a Group:

After creating the Group, Right click on the Group’s name and click Group settings:

You will get a webpage where you can set membership options. You can Customize the URL too. Set membership option to : “Anyone can ask to join, but owner approves membership requests” . Save all changes.

Copy the URL and Link to something like “Register here”.

This is it. In this way, you can not only create a well controlled Live Chat system but also a group.