Install jsxc

Meitar M edited this page Oct 6, 2017 · 12 revisions

You find a working example at jsxc/example/.

0 Preparation and Requirements

Obviously you need a running web server (e.g. Apache) and a XMPP server with BOSH support (e.g. ejabberd). Next you have to configure your XMPP server, maybe activate your BOSH module and to make sure, that your BOSH Server is reachable by your website. If your XMPP server supports CORS everything should be fine, otherwise you have to create a proxy (see prepare apache).

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

Your folder structure should now look like:

  • jsxc.example/
    • jsxc/
      • css/
        • jsxc.example.css
      • js/
        • jsxc.example.js

1 Include

Now include all these files in your template:

<!-- Javascript -->

<script src="jsxc.example/jsxc/lib/jquery.min.js"></script>
<script src="jsxc.example/jsxc/lib/jquery.ui.min.js"></script>
<script src="jsxc.example/jsxc/lib/jquery.slimscroll.js"></script>
<script src="jsxc.example/jsxc/lib/jquery.fullscreen.js"></script>

<script src="jsxc.example/jsxc/lib/jsxc.dep.js"></script>
<script src="jsxc.example/jsxc/jsxc.js"></script>

<script src="jsxc.example/js/jsxc.example.js"></script>

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

<link href="jsxc.example/css/jsxc.example.css" media="all" rel="stylesheet" type="text/css" />

2 Configure

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

$(function() {
   jsxc.init({
      loginForm: {
         form: '#form',
         jid: '#username',
         pass: '#password'
      },
      logoutElement: $('#logout'),
      root: '/jsxc.example/jsxc',
      xmpp: {
         url: 'http://localhost:5280/http-bind/',
         domain: 'localhost',
         resource: 'example'
      }
   });
});

Adjust the values according to your application. For example, if your login form has no id, but its container does, set loginForm.form to #container > form. Check out our options for more cool stuff.

3 Attach handler

$(document).on('ready.roster.jsxc', function(){
   $('#content').css('right', $('#jsxc_roster').outerWidth() + parseFloat($('#jsxc_roster').css('right')));
});
$(document).on('toggle.roster.jsxc', function(event, state, duration){
   $('#content').animate({
      right: ((state === 'shown') ? $('#jsxc_roster').outerWidth() : 0) + 'px'
   }, duration);
});

You find more events at wiki/events.

4 Customize style

If you don't like the default blue online border, append the following to your css/jsxc.example.css:

.jsxc_online {
   border-color: green;
}

5 Enjoy

Now you should be ready to go.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.