Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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.



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

<script src=""></script>

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

<script src="//"></script>

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

Barebones Example

<script src=""></script>
<script src="//"></script>
<script src="../lib/pubstrap-chat.js"></script>
<link href="//" rel="stylesheet">
<div id="target">
<script type="text/javascript">
$(function() {


You can configure PubStrapChat with a number of options.

var 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'


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; 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 to generate user profiles. View the full example at /examples/randomuserme.html.

The AJAX request returns a JSON object like the following:


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

  channel: 'pubstrapchat-randomuserme',
  data_from_session: function(callback) {
      url: "",
      cache: false
    .done(function(data) {
      // we pass the first result to the callback
  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.

  channel: 'pubstrapchat-facebook',
  data_from_session: function(callback) {

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

  id_from_data: function(data) {
  username_from_data: function(data) {

Running the examples locally

Clone and run:

python -m SimpleHTTPServer

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


Bootstrap 3 Chat Plugin



No releases published


No packages published
You can’t perform that action at this time.