Step One: Extraction and Upload
Go download the latest version of Ajax IM; the “Minified” copy should be fine for this guide. Once downloaded, extract the files to any folder on your computer.
After extraction, connect to your FTP server and create a new folder called ajaxim. Upload all of the Ajax IM files into this folder.
Step Two: Installation
Follow the installation guide. Be sure to select the “Default” server library, which only requires PHP (if you want to use Node.js, see the Quick Start with Node.js). Once you’ve run the installer, move on to step three.
Step Three: Initialization
Great, you’ve installed Ajax IM! Now what?
Place the loading code in the header or footer of your website.
<script type="text/javascript" src="publicpathtoajaxim/js/im.load.js?php"></script>
Note: publicpathtoajaxim should be the publicly available path to your Ajax IM installation, e.g. /ajaxim.
Place this code on your website, either in the <head> section or before </body> (frequently in a header or footer file). It will automatically load any necessary libraries (jQuery, etc.) and the main Ajax IM script, im.js. Additionally, it will automatically initialize the Ajax IM class for you.
You can find out more about the individual initialization options by reading the im.js documentation.
Step Four: Allowing users to register and login
Now that the IM library will automatically load on your website, you’ll need a way to allow users to login and register. Fortunately, Ajax IM provides a very simple function/widget that will handle this for you.
To insert a login/registration form, first add the code <div id="ajaxim"></div> somewhere on your site.
Below that <div> element, add the following code
<script type="text/javascript">
AjaxIM.loaded(function() { AjaxIM.client.form('#ajaxim'); });
</script>
This AjaxIM.client.form function will automatically load (from your theme) the login and registration forms, and insert them into the “ajaxim” element. This also means that you can insert this form into any element you would like; just swap “#ajaxim” for the element id you’d like to use (be sure to prefix it with ‘#’, which denotes that we’re referring to an element’s id).
Leave a comment