jQuery Web Widget Documentation


Embed a reliable chat in less than ten minutes, based on Catapush. This jQuery widget allows you to transform an html element in a container where your users can receive your messages.

Download

The jQuery Widget can be downloaded here: full version js, minified version js, full version css, minified version css. If you are using npm (package.json) you can install it with:

npm install catapush_widget

Usage

Load the library and its dependencies:

<link type="text/css" href="https://npmcdn.com/catapush_widget/dist/catapush-widget-style.min.css" rel="stylesheet">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/strophe.js/1.2.6/strophe.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/ydn.db/0.9.2/ydn.db-isw-core-qry.js"></script>
<script type="text/javascript" src="https://npmcdn.com/catapush/dist/catapush.min.js"></script>
<script type="text/javascript" src="https://npmcdn.com/catapush_widget/dist/catapush-widget.min.js"></script>

create a div container

<div id="catapush-widget"></div>

Load the widget and connect using an existing Catapush user:

    $('#catapush-widget').catapushWidget({
        'appKey': 'yourAppKey',
        'platform' : Catapush.PLATFORM.ANDROID, // Platform as defined in Catapush Library
        'user' : 'userIdentifier',
        'password' : 'userPassword'
    });

Options

The plugin offers many options, that can be passed during loading:

    var options = {'connect'...};
    $('#catapush-widget').catapushWidget(options);

List

  • instance - use an existing Catapush connection, default null
  • connect - automatically connect after initialization, default true
  • display - object containing visualization settings:
    • overflow - scrollable widget in a scrollable container
    • showDayMark - add a day mark between different days
  • interaction - object containing ui settings:
    • scrollOnMessage - scroll to last message received automatically
    • scrollOnLoad - scroll to last message on load
  • event - object containing event callbacks
    • beforeSendRead (message) - called before sending a read confirm, will not be sent if returns false

API

Plugins has some functions that can be called like this:

$('#catapush-widget').catapushWidget('scrollToLastMessage', true);
  • scrollToLastMessage (immediate) - scroll to last message, immediate can be true or false (slow scroll)
  • checkRead - force check read messages based on current visibility
  • clear - reset all messages and data

Constants

  • PLATFORMS - possible environments

Dependencies

The app depends on four libraries:

  • jQuery - v. 1.7.0 and higher - a fast, small, and feature-rich JavaScript library;
  • Strophe.js - v. 1.2.6 and higher - an XMPP library for JavaScript. Its primary purpose is to enable web-based, real-time XMPP applications that run in any browser;
  • ydn-db - v. 0.9.2 and higher - Javascript database library for IndexedDB, WebSQL and WebStorage;
  • catapush - v. 0.1 and higher - Main Catapush Library.

Can also been installed using npm (package.json):

..
  "dependencies": {
    "jquery": "*",
    "strophe.js": "*",
    "ydn.db": "*",
    "catapush": "*"
  },
..