pieter loubser online
What is this?
Why do I need this?
Well for the following reasons of course:
How does it work?
Basically all the work required will be handled by MXit for you. When a visitor visits your website, the small embedded widget on your website will query MXit to determine if you are available for chatting or not. The widget will then show the visitor your presense state as either online/offline/unavailable (more detail in Step 3). Then again when you are online and one of your website visitors starts to chat with you, he will then appear as a new temporary contact in your MXit client. He will then chat to you through a web page sitting on a MXit server and you will again use the MXit client to chat back to him. This makes staying connected to your website very easy because there is a MXit client for most desktop environments and mobile phones.
How do I get it?
You will need to complete the following 5 pretty straight forward steps to enable this service on their website:
Step 1: MXit Account
You will require a MXit account to use this service. If you already have a MXit account you can skip this step and go directly to Step 2. Otherwise, don't worry, registration is quick and absolutely free-of-charge. (In short MXit is an international instant messanger.) So firstly you will need to download a MXit client. You will also be able to register a new account with any one of the many options of clients available. Here is a quick list:
Get a MXit Client Application:
For a full list of supported clients please visit their website http://www.mxitlifestyle.com/.
Don't worry, which ever client you choose, registration is very quick and easy and you will be up and running in no time. So download the most appropriate client for you and register an account. You can also use a multiple clients, depending on where you are at the time (very useful).
Step 2: Add the EVO Agent service
Once you have downloaded a MXit client, and have a registered account with them, you need to add the EVO Agent service. To complete this you will need to add a new MXit service contact with the name evoagent. The alias (nickname) you can set to EVO Agent. You can change the alias to whatever you wish, but do not change the contact name, because otherwise it will not work. After adding the service, it should now appear in your contact list. Now chat with this newly added contact, and press 3 (the Show Token option). This will show you the uniquely generated token which you will need in Step 5, so you need to copy and paste this token or write it down somewhere.
Step 3: Create your presence images
The widget requires 3 images, one for each of the 3 presence states you as the agent can be in. Here is a quick explaination of the 3 states:
After you have created these 3 images, you will need to save them onto your website server.
Step 4: Add the widget to your website
<!-- EVO Agent Widget: start -->
mxit_name = 'Your Name';
mxit_ref = 'my-website';
mxit_online_badge = '/images/online_badge.png';
mxit_unavailable_badge = '/images/unavailable_badge.png';
mxit_offline_badge = '/images/offline_badge.png';
<!-- EVO Agent Widget: end -->
Now you might wonder were is the best place to put this code snippet on your webpage right. Well the best place to put it is actually there where you want it to be displayed on the page. But you will see in Step 7 when we look at customisation that you can manipilate the whole widget's look and feel by using CSS (style sheets). So just hold on a little longer.
Step 5: Configure the EVO Agent widget
Now that you have the widget on your webpage, you will need to configure it. All the underlined fields in the above code snippet are configurable and must be updated by you. Here is the list of all the configurable variables and their respective meanings:
Remember to upload your modified webpage to your website server. Well done, your EVO Agent web widget should now be fully functional! Don't worry yet about the look and feel as we will get to customisation and styling in Step 7.
Step 6: Testing your EVO Agent widget (optional but advisable)
Its a good idea to make sure that you have configured it correctly before your visitors find error messages on your website. So open the webpage where you have added the widget to in Step 4 within your favorite web browser, and then see if it shows you one of the images you created in Step 3. If not there's most probably a problem somewhere. The following is a list of the most common errors and how to fix them:
Remember to test both online and offline states. Thus first log into MXit and refresh your webpage. Make sure that you see the online presence image. Log out of MXit, and refresh your webpage again. Now make sure that you see the offline presence image. If you saw both images then congratulations, you have suceessfully configured the EVO Agent widget!
Step 7: Customising your EVO Agent widget (optional)
MXit already put the widget in its own CSS classes to make it easy for you to customise the look and feel of the widget. Here is the CSS code you can add to your website to customise your widget.
CSS styling classes used by the EVO Agent widget
The most important class here is the mxit_widget_container one which is the main CSS class used by the widget. All output generated by the widget will be put inside this container. So you can only customise this one class if you wish. But for more control I also show you the other classes, one for each of the 3 presence states you can be in at any time. This step is really not nessacery but it could give you the power to do magic with the look and feel of the widget. Unfortunately CSS is beyond the scope of this tutorial, but try to google for some good examples!
Personally I give MXit five out of five stars for giving their users this very useful and free service. I can see that it will become a big hit with webites worldwide. Adding a live chat widget to your website makes your site just so much more dynamic and cutting-edge. Also it gives your website a more personal touch, because your visitors can see that you are actually online and in a funny kind of way there with them. It also provides your visitors a quick and easy method for giving you their feedback, comments and ideas around your content, or to ask you questions around it.
-- Comments disabled temporarily due to excessive spamming --