How to add Live Support Chat to the osCommerce shop?

In this tutorial we will show how to add Live Support Chat to the osCommerce based online shop. It is a great way to improve your visitors confidence while shopping online, as they can ask questions in a real time and have their questions answered instantly. You can view demo shop here.

Download WebsiteChat.net osCommerce addon

First we need to download the Live Chat module from:

http://websitechat.net/downloads/3rd-party/WebsiteChat/ocCommerce-2.x/livesupport_1.0.zip

It is a compressed zip file which we need to unpack to get two files: Readme.txt and livesupport_box.php. As you are reading this tutorial we can safely ignore Readme.txt and concentrate on livesupport_box.php. However before we start editing it, there are two more steps to do...

Create an account with WebsiteChat.net

As WebsiteChat.net is a hosted service (there is nothing to install on your web server) we need to create an account at:

http://websitechat.net/en/register

All you will need is an email address where activation message will be sent. There is 30 days fully functional free trial, so you can test Live Chat with your osCommerce shop without any obligation.

You will also need to download free Live Chat application which is an easy way to chat with your shop visitors and other Instant Messaging networks (Google Talk, ICQ, MSN, AIM, Yahoo, Jabber) at the same time.

Copy Live Chat button HTML code

Now login to your WebsiteChat.net control panel at http://websitechat.net/login and click on link in My Account panel to open Chat Buttons window.

Here you can select a Chat Button that will best suit your osCommerce shop design and copy it's HTML code into a clipboard - see (1) in the picture above - so we can paste it into livesupport_box.php...

Paste HTML code into livesupport_box.php

Open websitechat_box.php in your favourite text editor and paste HTML code into line 10 - see (1) in the picture below.

Now we need to upload livesupport_box.php to /catalog/includes/boxes/ directory on the web server hosting your osCommerce shop.

Finally edit /catalog/includes/column_right.php or column_left.php depending on which side you want the chat box on. Insert this code where you would like the Live Chat box to appear:

// WebsiteChat.net Box v1.0
include(DIR_WS_BOXES . 'livesupport_box.php');

Test Live Chat session

Now it is time to test our Live Chat button. Make sure WebsiteChat.net chat application is running and verify there is a green icon in your taskbar which indicates the application is connected. Open your shop in a web browser:

1. Click Live Chat button (1) on your website.
2. Enter your name and email address into a start form (2) and click Start Chat button (3).
3. Chat Operator application will indicate (4) a new chat request on the operator PC.
4. You can start conversation by typing messages into a chat window (5).

Congratulations! You can now start chating with your shop visitors