Install jsxc (WordPress)

Meitar M edited this page Mar 31, 2016 · 7 revisions

In addition to the WordPress installation you need a running XMPP server with BOSH support. 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.

  1. Install web server, xmpp server, (bosh server)
  2. Download and extract jsxc to a folder of your choice inside of your WordPress theme folder (e.g. /data/mydomain.com/webroot/wp-content/themes/mytheme/jsxc).
  3. Create a jsxc_client.js file in your scripts directory (e.g. /data/mydomain.com/webroot/wp-content/themes/mytheme/js) and insert the following code into it:
    jQuery(function($) {
       jsxc.init({
          loginForm: {
             form: '#page-login-form',
             jid: '#page-user-login',
             pass: '#page-user-pass'
          },
          logoutElement: $('#logout-element'),
          root: '../jsxc/',
          displayRosterMinimized: function() {
             return true;
          },
          xmpp: {
             url: 'http://YOUR_XMPP_SERVER.com:7070/http-bind/',
	     domain: 'YOUR_DOMAIN',
             resource: 'jsxc'
          }
       });
    });

Replace YOUR_DOMAIN with the domain of you XMPP server and http://YOUR_XMPP_SERVER.com:7070/http-bind/ with a correct URL of your BOSH server. Also replace #page-login-form, #page-user-login, #page-user-pass and #logout-element with correct id's of your site (more info you can find in [options description] (https://github.com/jsxc/jsxc/blob/master/src/jsxc.lib.options.js)).
4. Create a jsxc-custom.css file inside of the styles directory of your site (e.g. /data/mydomain.com/webroot/wp-content/themes/mytheme/css/).
5. Insert the following lines of code into some shared page (e.g. header.php):

    <link href="<?php echo get_template_directory_uri(); ?>/jsxc/css/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />
    <link href="<?php echo get_template_directory_uri(); ?>/jsxc/css/jsxc.css" media="all" rel="stylesheet" type="text/css" />
    <link href="<?php echo get_template_directory_uri(); ?>/jsxc/css/jsxc.webrtc.css" media="all" rel="stylesheet" type="text/css" />  
    <link href="<?php echo get_template_directory_uri(); ?>/css/jsxc-custom.css" media="all" rel="stylesheet" type="text/css" />  
    <script src="<?php echo get_template_directory_uri(); ?>/jsxc/lib/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/jsxc/lib/jquery.ui.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/jsxc/lib/jquery.colorbox-min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/jsxc/lib/jquery.slimscroll.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/jsxc/lib/jquery.fullscreen.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/jsxc/lib/jsxc.dep.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/jsxc/jsxc.min.js"></script>  
    <script src="<?php echo get_template_directory_uri(); ?>/js/jsxc_client.js"></script>

Verify that jquery is not loaded twice, otherwise the client will not work correctly.
6. Open the main page of your site and notice the jsxc is working.
7. Investigate the CSS styles of jsxc and overwrite the required styles in jsxc-custom.css to match your site's UI.

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.