Bootstrap 3 Chat Plugin
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
lib remove console logs Apr 22, 2014
readme.md Update readme.md Apr 22, 2014

readme.md

About

PubStrapChat is a jQuery plugin that lets you add chat to a website easily. It plugs right into Bootstrap so it looks great out of the box, is fully responsive, yadda yadda.

$('#target').pubstrapchat();

Requirements:

This plugin requires PubNub. If you use a custom key, you need to enable the presence feature on your account.

<script src="http://cdn.pubnub.com/pubnub.min.js"></script>

Since it's a jQuery plugin, it also requires jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

It's designed to look great with Bootstrap, but does not require the Bootstrap stylesheet.

Barebones Example

<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../lib/pubstrap-chat.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<div id="target">
</div>
<script type="text/javascript">
$(function() {
  $('#target').pubstrapchat();
});
</script>

Options

You can configure PubStrapChat with a number of options.

var options = {};
$('#target').pubstrapchat(options);
Parameter Default Description
publish_key 'demo' Your PubNub publish key.
subscribe_key 'demo' Your PubNub subscribe key.
channel 'pubstrapchat' A channel name for this chatroom. Acts as a PubNub channel.
submit_text 'Send' What the chat button should say.
height '200px' How tall the chatroom iframe should be (not including chat input)

Options example

var options = {
  publish_key: 'demo',
  subscribe_key: 'demo',
  channel: 'pubstrapchat',
  submit_text: 'Send',
  height: '200px'
};

$('#target').pubstrapchat(options);

Custom User System

By default, users will get a random username like 'Purple Penguin' (color + animal). Despite how awesome these usernames may be, you probably want to configure your own user system.

You can configure PubStrapChat to use a custom user system like your own login system, facebook, twitter, etc. This way you get accurate usernames and ids for your system.

Parameter Example Description
data_from_session callback(user_data) A function that identifies the current user. Passes a callback as the only parameter. The callback must be called with the user's session data: callback(data). More examples below.
id_from_data return user_data.id; A function to extract a user's id from the data returned by data_from_session
username_from_data return user_data.username A function to extract a user's username from the data returned by data_from_session

Custom user system examples

Here's an example that uses http://randomuser.me to generate user profiles. View the full example at /examples/randomuserme.html.

The http://api.randomuser.me AJAX request returns a JSON object like the following:

{
  "results":[
    {
      "user":{
        "gender":"male",
        "email":"alfredo.jacobs25@example.com",
        "username":"bigmeercat617",
        ...
      },
      "seed":"ea85b02619b6bb4"
    }
  ]
}

We pass that into the callback for data_from_session and our user is populated.

$('#target').pubstrapchat({
  channel: 'pubstrapchat-randomuserme',
  data_from_session: function(callback) {
    $.ajax({
      url: "http://api.randomuser.me/",
      cache: false
    })
    .done(function(data) {
  
      // we pass the first result to the callback
      callback(data.results[0]);
  
    });
  },
  id_from_data: function(data) {
    // extract the "seed" (id) from the data returned by data_from_session
    return data.seed;
  },
  username_from_data: function(data) {
    // do the same for username
    return data.user.username;
  }
});

Here's another one that uses the Facebook api. View the full example at /examples/facebook.html.

$('#target').pubstrapchat({
  channel: 'pubstrapchat-facebook',
  data_from_session: function(callback) {

    FB.api('/me', function(data) {
      callback(data)
    });

  },
  id_from_data: function(data) {
    return data.id;
  },
  username_from_data: function(data) {
    return data.name;
  }
});

Running the examples locally

Clone and run:

python -m SimpleHTTPServer

Load http://localhost:8000/examples/bare.html and http://localhost:8000/examples/facebook.html