SupportMeLive


Current version: 1.21

What Is SupportMeLive?

SupportMeLive is a simple program that lets your web site visitors chat with you live on your web site. SupportMeLive is an easy way to provide live technical support without expensive software.

SupportMeLive was originally written as a demo to answer the WWW FAQ question, how do I fetch data from the server without loading a new page? SupportMeLive has since blossomed into a useful tool, thanks in part to improvements contributed by Lloyd Standish. SupportMeLive also contains elements of Scott Schiller's excellent SoundManager, which is also open-source. See the included README.TXT file for details of the SoundManager license.

It's not fancy, but it works! And because it is so simple (just a few hundred lines of JavaScript, XHTML, CSS and PHP), you can easily use it as a starting point for your own projects.

Requirements

To use SupportMeLive on your web site, you'll need the following:
  • 1. PHP (version 4 or 5).
  • 2. Your web server must be allowed to write to a folder called data inside the supportmelive folder. You may need to change permissions on this folder to make it writable by the web server.
  • 3. That's about it!
Since SupportMeLive was written as an AJAX demonstration, it doesn't include support for old web browsers that can't handle AJAX. These days, only a tiny handful of users on ancient Macintoshes running Internet Explorer will be affected by this. Since Microsoft and Apple have both stopped supporting that browser, you can safely tell your users of very, very old Macs to switch to Safari or Firefox... or just send you email.

How to Install SupportMeLive

To install SupportMeLive, just follow these steps:

1. Download the SupportMeLive ZIP file and unpack it.

2. Change the password for the support user, in server-settings.php. You can use any text editor for this. Even Notepad will do fine.

3. "Drag and drop" the entire supportmelive folder to your web space. Drag the folder itself, so that it becomes a subfolder on your web site. Please don't crush your home page!

If You're Not Using Apache

If your PHP hosting is on Microsoft Internet Information Server, or an unusual Apache configuration that doesn't allow .htaccess files, you should consider creating a separate folder outside your web space for temporary data files. That will keep customers from listening in on each other's comments to tech support.

To do this, create a directory outside your web space on your server. Learn the correct file system path (not URL!) to that directory.

Then change the dataDir setting to the directory you created, at the top of server-settings.php. If your web server runs Windows: don't use the \ character in the path, just use /. \ has a special meaning and will cause problems.

Most users of Apache (which is the most common web server software) do not have to worry about this. That's because the .htaccess file I have provided in the data folder blocks browsers from accessing it directly.

4. Now you're ready to go! To log in, just access the supportmelive folder on your website. If you installed it according to my instructions, then you'll simply visit (substitute the name of your site, of course):

http://example.com/supportmelive/

This will display the JavaScript-based login and chat interface found in index.html. Log in with the name support and the password you set above. Then, if you wish, log in as another name in another browser window, so that you have a "test customer" to talk to.

"Regular" customers can just type whatever they like after logging in without a password. This is safe because only the support user can see what they say. As the support user, you'll need to click on a user's name before responding to them, so that the software knows who to send your responses to.

Features of SupportMeLive

Version 1.21 fixes a bug in the index.html file which caused problems on certain browsers. Thanks to Vincent Moneymaker for the report.

Version 1.2 of SupportMeLive adds some useful capabilities missing from the original release. These are:

Added in 1.2:

  • Support personnel can chat with each other.
  • When users connect without SSL (http rather than https), SupportMeLive can optionally offer a link to a secure version of itself. This only makes sense if your web site offers a secure version of the same pages at the same URL paths. If this is true for your site, set usesecure to true rather than false at the top of index.html.
  • When SupportMeLive makes a link clickable, that link now opens in a new window or tab. Previously following links ended the chat session.
Added in 1.1:
  • When a new customer logs in, the support user hears a ringtone until they click "Answer." This is handy if you are doing other things! Support can turn this off by checking the "Ringer Off" box.
  • Sounds also play to alert users to new messages.
  • Sounds can be turned off with the "Sound Off" checkbox.
  • Secure connections are detected. If you run SupportMeLive on a secure web server, SupportMeLive will take note of that and alert the user that is safe to send secure information such as credit card numbers.
  • Messages from users that are connected to SupportMeLive via a secure server are flagged as such with a "lock" icon. This is useful if you offer both secure and nonsecure access.
  • Bugs affecting performance have been fixed.
  • Multiple support personnel can log in at once. Just log in as support0, support1, support2, etc. All support personnel use the same password. Support personnel can see all messages, while normal users can see messages specifically sent to them by any support person.

Is Support Logged In Right Now?

This is great stuff, but users are understandably frustrated if they log in only to find that technical support is not currently available.

We can help this situation by letting the user know whether support is logged on. Specifically, we can embed a message indicating whether support is logged on right now into any web page by taking advantage of chatentry.js.

To do this, just do the following:

1. Make sure to include these lines in the head element of your page:

<script type="text/javascript" src="chatentry.js">
</script>

2. Add a chatinvite div element anywhere in your page, at the location where you want the notification to appear:

<div id="chatinvite">
<!-- You might want to put a noscript element here
  with text for users without JavaScript -->
</div>

You can style this div element any way you like— just keep in mind that a line or two of text and a link to open a chat window will appear in it.

3. In the onLoad attribute of your body element, set a timer which checks for the availability of tech support for the first time:

<body onLoad="setTimeout('chatEntryCheckAndShow()', 10)">

If you have other commands in your onLoad attribute, don't panic! Just separate them with semicolons (the ; character).

Confused? Don't worry— just check out the provided file demochatentry.html for a complete working example.

Enjoy your new live support capabilities!

"What about user-to-user chat?"

Yes, you could modify this software to let users chat with each other. However, I strongly discourage you from doing so unless you also require users to log in with a password and closely supervise your chat room. User-to-user chat on websites has been abused for many illegal purposes, and you run serious legal risks by providing it. Of course, in a closed online community that requires users to log in first, user-to-user chat can be a useful and welcome feature. See How can I add a chat room to my website?