Pages

Friday, August 9, 2013

A professional-looking and Open Source Live Chat with Mibew Messenger for visitors to your Moodle site

Chat the old-school way with Get Smart.

Photo of Don Adams as Maxwell Smart.
Source: eBay item photo
Author: General Artists Corporation-GAC-management.

Have you ever visited a site like Wiziq where you were able to click on a link and instantly was attended to by a sales representative on a chat console? At the end of this blog post, you will be able to setup a similar Instant Messaging (IM) system on your Moodle site. No kidding! In fact, if you own a Drupal or Joomla site, you can easily integrate the IM into your site as well.



A few weeks ago, I was intrigued by this post on Moodle.org regarding Mibew Messenger, an Open Source Instant Messaging Chat. Mibew. Mibew Messenger is an open source live support and chat application. Mibew has a web-based admin interface. Operators or admins can do the basic chat features and more:
(1) send canned messages
(2) track where visitors clicked from
(3) search previous chat conversations
(4) reassign or transfer a chat to another operator
(5) Mark or highlight nuisance users


Other Mibew features (source:  Bansal, 2010)
  • can be used with unlimited visitors, unlimited operators, and unlimited websites.
  • can be installed on your own server, thus you have complete control over it
  • supports canned (scripted) messages. An operator can pick a canned (stored) response from a dropdown list and send it out.
  • the cue word “Typing” appears when either the operator or guest is typing.
  • operators can be divided into groups (e.g., Sales, Technical etc.) 
  • incoming chat from a visitor can automatically be directed to operators of a particular group.
  • operator can view the IP address of the visitor 
  • the Operator’s image (avatar) can be displayed in the chat window for the guest or visitor to see
About Mibew Messenger
Mibew Messenger was created by a Russian named Evgeny Gryaznov in 2008. He later offered Fedor A. Fetisov and Dmitriy Simushev to take over the project in July 2013. The current developers have big plans for Mibew, with a planned roadmap to be published soon. According to Fedor,
"A very long time ago (until 2008) the Mibew project was just an open source 'lite' version of proprietary Web Messenger or webim. Actually back then it wasn't Mibew but Open Web Messenger. In the August of 2008 these two products were divided. So from that time Open Web Messenger became an independent open source project. And it was named Mibew in the May of 2009.
In the upcoming Mibew 2.0 (which is far from stable right now) there will be an API for third-party services and clients. So one will be able to write desktop and mobile clients using any frameworks and programming languages".

Mibew and my Moodle site
When I first saw Mibew, I knew I had to install it on my LAMP site. After some tinkering around and searching for information on the Mibew forums, I finally managed to install it on my Moodle 2.5 production site. It took me some time, but it was well worth the effort.

What a user sees. You don't need to be logged into Moodle
to chat with the Administrator, Tech Support or Sales team member.
By the way, who's the attractive blonde girl?


A chat session in full-flight.
Mibew Messenger is fully customisable.

Check out the "Remote user is typing..." cue.
How cool is that? Very nice. Facebook-like.
It's what you would expect from a modern chat client.

This is what the user sees if the Admin, Tech Support or
Sales team member is offline.



The user can send a text message to the
Admin, Tech Support or Sales team member who is currently offline.


The visitors list/queue status.

The Administrator's backend dashboard.
It's a very comprehensive Instant Messanging System.
And best of all, it's free!

To Download, either go to:







http://sourceforge.net/projects/webim/
or
at the dedicated page at
http://mibew.org/download









For the Github Repository, head over to:
https://github.com/Mibew/mibew


The Mibew Messenger Community is alive and well thanks to a new team of developers who, as of August 2013, have vowed to keep the project alive. You can access the Mibew forums here.

A thriving Open Source community.
A developer's haven.
Demo Site
If you are impatient for a demo on the official mibew.org site, click here.

Installing Mibew
To install, please follow the below instructions in purple font which are taken from the README file of the zip archive file. Text written by me is in black font. Hopefully with these helpful instructions, it will only take you one or two hours to install and test the Mibew Messenger System on your Moodle site:

Mibew Messenger
Copyright 2005-2013 the original author or authors.

REQUIREMENTS

 * Apache web server 1.3.34 or above
 * MySQL database 5.0 or above
 * PHP 4.x or above with MySQL support

INSTALLATION

1. Create folder with name 'webim' in the root of your website.

In my case, I have created the webim folder inside my /public_html/moodle/ folder.


2. Upload all the files contained in this archive (retaining the directory structure) into created folder.
   Be sure to chromo the webim folder to 755 and the install folder to 755.
   Note: the original documentation says 'the install folder to 644'. Don't follow it.
             
Instead, use privileges 755 for the install folder!

3. Add a MySQL database with the name 'webim'









4. Edit /webim/libs/config.php to the information needed to connect to the database


Note: below are my personal settings for the webim folder which I installed at /public_html/moodle/webim. Since moodle is located at the root directory of my website, and webim is inside the moodle folder, the $webimroot variable should store the value:
 "/moodle/webim"

The parent folder is /public_html/moodle. I created a MySQL database named frankie_webim and a MySQL username frankie_webim.

   ...
   $webimroot = "/moodle/webim";
   ...
   /*
    *  MySQL Database parameters
    */
   $mysqlhost = "localhost";
   $mysqldb = "frankie_webim";
   $mysqllogin = "frankie_webim";
   $mysqlpass = "somethingsecret";
   $mysqlprefix = "";


5. Using your web browser visit http://www.yourMoodleSite.com/moodle/webim/install/ and
   hit 'Create tables'


If your installation is successful, you will be greeted by a screen that looks like this:

Congratulations!
You made it thus far. Well done.

Click the link "Create required tables" to proceed.

If you didn't see the previous screen, then retrace your steps #1 to #4. Check your config.php and the folder privileges mode. Below are three possible error messages. In the first case, the wrong MySQL password was entered into config.php. In the second case, the wrong $webimroot value was given. In the third case either the webim folder or the install folder have the wrong chmod privileges. If you have an error during the installation, I'd bet it's the third case that's showin up.

Case 1 of common error
Wrong MySQL database name, MySQL username
or MySQL password typed inside the config.php file.

Case 2 of common error.
Wrong $webimroot value given inside config.php

Case 3 of common error.
Please check chmod privilege settings for both
webim and install folders. Both should be set to 755.


The screen you will see
after creating the tables.

Click the link "Proceed to the login page".


6. Remove /webim/install/ directory from your server
This step is a precaution so that the MySQL database and tables do not get accidentally re-created if you were to absent-mindedly type http://www.yourMoodleSite.com/moodle/webim/install again!? However, I wouldn't recommend you delete the install folder just yet. Better to do this only after you are satisfied that Mibew has been setup to your satisfaction.

You now need to login.
Leave the Password as blank and
click the Login button.
7. Logon as
                  user: admin
                  password:        
<--- leave the password as blank

You can click on the

8. Click on "Administration | Button code" and setup it on your site.

I recommend the mgreen image and the Silber chat window style.




The word "ONLINE" flashes and waxes and wanes with a very nice visual effect that is guaranteed to attract the attention of your visitor.


9. Change your Operator password and name.
To do this, go to Mibew's menu at "Administration | Profile". This is a security check. Change your password to something you can remember. Otherwise someone else could login to your Mibew administrator account using the default password of *blank*.


Operator General settings.
Change your admin password.
Add your E-mail address and change your name.

New settings done. Click Save.
Success!
To continue, click the 'Connect' link that is
located at the top-right corner of the screen.
You should also click on the "Optional services" link.

Optional Services tab.
I would recommend you check the
"Enable 'Popup dialog notification of the new visitor'."
tickbox

General Settings.
Add your company data and logo.
I would also recommend you change
the "Send message with:" from Ctrl-Enter to Enter.

10. Wait for your visitors on 'main | Visitors (without menu)' link to access the "List of Visitors Waiting" page.
At first the list of Visitors is empty.
But that should change later once a visitor clicks on the
Live Chat button on your Moodle site.

On unix/linux platforms change the owner of /webim/images/avatar folder
to the user, under which the web server is running (for instance, www).
The owner should have all rights on the folder /webim/images/avatar
(chmod 700 /webim/images/avatar).

UPDATE

1. Backup your /webim/libs/config.php
2. Backup your /webim/images/avatar folder.
3. Delete the items in the webim folder on the server.
4. Upload all the files contained in the downloaded archive (retaining the directory structure) into webim folder.
5. Re-edit the MySQL database settings you config.php
6. Visit http://<yourdomain>/webim/install/ and follow the instructions to update database (if needed).
7. Remove /webim/install/ directory from your server
8. Restore contents of /webim/images/avatar folder.


Some Good Tips

Tip1: When logging out of chat, click the "Close Chat" x, not the Windows window's top right hand corner X.
Click the "Close chat" to
properly logout a user or operator from a chat session.
Avoid clicking Windows' top-right-hand-corner X.


Tip2: Change Visitor's Chat Window header text from "You are" to "User"
By default, the visitor's chat window has some spacing issues when the Silver chat scheme is used.
As you can see below, the words "You are" and "Guest" overlap.


One solution to this is to modify the text at line 37 of the file "/public_html/cefl/webim/locales/en/properties". Remove the words "You are" and replace it with "User".




The result is a better, cleaner looking header:




Tip3: Better WAV sounds
I find Mibew's default wav files rather insipid. It's the default Windows ding sound. And that can get quite irritating after a while. What I have done on my server is to substitute the default wav files new_message.wav and new_user.wav files with better quality and more interesting sounds. You can download the new wav files from:
https://dl.dropboxusercontent.com/u/17797520/sounds/new_message.wav
and https://dl.dropboxusercontent.com/u/17797520/sounds/new_user.wav
After downloading them, upload the files to /public_html/moodle/webim/sounds subfolder. Then clear your browser cache to start using and to enjoy the new sounds.
Enjoy!

In Closing
There are many applications of Mibew on your Joomla, Drupal, Moodle, etc. site. You can use it to support potential Net-customers, or to simply do a live-chat with your fellow colleagues or Moodle users.  If you have managed to install Mibew on your site, please share with other readers of this blog and I, what you are using Mibew for.

I believe that I have managed to enhance the usability and overall impression of my Moodle site by installing Mibew Messenger. If you have any problems or difficulties with permission problems while installing the software, please do contact me. You can contact me via Webim on my site here:
http://www.moodurian.com/cefl or via email at boonsengkam@gmail.com.

Mibew Messenger may not have the pizzazz and shine of some other commercial IM systems, but for a software that is free and not-too-difficult to install by yourself, it is very PROFESSIONAL-looking. It is chock-ful of features that can be customised and it is a sure way of growing closer to your users and visitors of your site. There I highly recommend Mibew Messenger or your Moodle site. Go ahead, give it a try. I am sure that you will be pleased with the result. Now excuse me while I try to see if I can change the image of that attractive blonde to something that looks closer to me. Over and out for now.

Regards
Frankie Kam


Appendix - useful links
Mibew Main Website
Mibew Messenger on Twitter:
Mibew on Sourceforge
Mibew on Github
Youtube installation guide (2011 video)
A Quick Guide to Installing Mibew Messenger On SME-7.4
Mibew Messenger: Open Source Free Chat Support Software

At least one bug
Mibew is not perfect. No software is. I did experience one anomaly. I am using Google Chrome Version 28.0.1500.95 m running on Windows7. The problem is that sometimes the admin's or guest's chat window does not display the running dialogue text of chat exchanges. Very strange. Yet the one-on-one messages can be sent and received with no problems (other than the missing scrolling list of dialogue). See the below image to understand the problem. The window on the right is blank, yet chat messages have been sent from the Guest (left window) and the Admin (right window)! It doesn't happen all the time.


The same problem does not occur with Mozilla Firefox. If you experience the same problem, please let me know or report in on the Mibew forums. Thanks.


Postscript - Other websites using Milbew Messenger
Here's a Moodle site in Portuguese that uses Julian Ridden's outstanding Essential theme and Mibew Messenger. Dated August 2013. You could do the same for your site too!




End of post


If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!

No comments:

Post a Comment

Ratings and Recommendations by outbrain