Installation

Prebuild packages:

Overview

  1. Install web server, xmpp server, (bosh server)
  2. Add jQuery to your site
  3. Download and extract jsxc (you have to use the tar file) to a folder of your choice (e.g. jsxc.example)
  4. Create two folders in your directory css and js
  5. Create a file in each folder: jsxc.example.css in css and jsxc.example.js in js
  6. Adjust permissions

Your folder structure should now look like:

- jsxc.example/
    - jsxc/
        - css/
            - jsxc.example.css
        - js/
            - jsxc.example.js

Include

Now include all these files in your template:

<!-- Javascript -->
<script src="/jquery.min.js"></script>
<script src="jsxc.example/jsxc/jsxc.bundle.js"></script>
<script src="jsxc.example/js/jsxc.example.js"></script>

<!-- Stylesheets -->
<link href="jsxc.example/jsxc/styles/jsxc.bundle.css" media="all" rel="stylesheet" type="text/css" />
<link href="jsxc.example/css/jsxc.example.css" media="all" rel="stylesheet" type="text/css" />

Configure

Add the following lines to our jsxc.example.js:

$(function() {
    let jsxc = new JSXC({
        loadConnectionOptions: function(username, password) {
            return Promise.resolve({
                xmpp: {
                url: '/http-bind/',
                domain: 'localhost',
                }
            });
        }
    });

    let formElement = $('#form');
    let usernameElement = $('#username');
    let passwordElement = $('#password');

    jsxc.watchForm(formElement, usernameElement, passwordElement);
});

Adjust the values according to your application.

Customize style

TODO

Enjoy

Now you should be ready to go.